Colour Code Converter
Convert any colour between HEX, RGB(A), HSL(A), HSB/HSV and CMYK in one place. Live preview, contrast ratio against white and black, WCAG AA/AAA badges. Free.
Colour Code Converter Tool
How to Use the Colour Code Converter
Pick or paste a colour
Use the colour picker, or paste any HEX, RGB, HSL, HSB or CMYK value. The tool detects the format automatically.
All formats update live
Change any input and every other format updates instantly. The single source-of-truth state means no out-of-sync values.
Adjust the alpha
Slide the alpha control to add transparency. RGB and HSL outputs include the alpha channel automatically.
Check accessibility
WCAG AA and AAA badges show whether the colour meets contrast requirements against white and black backgrounds.
About Colour Format Conversion
Modern design and development demand fluency across multiple colour formats — each describes the same colour but with different trade-offs. HEX codes (#FF5733) are the lingua franca of the web because they're compact, copy-pasteable, and supported in every CSS spec since the beginning. RGB and RGBA spell out red, green, and blue channels (0–255) plus optional alpha for transparency — required when you need translucent overlays in CSS. HSL (Hue, Saturation, Lightness) lets you lighten or darken a colour by adjusting a single value, which is why design system tokens often use it. HSB/HSV (Hue, Saturation, Brightness/Value) matches how Figma, Sketch, and Adobe Photoshop expose colour controls. CMYK is the print model used by every commercial offset printer worldwide.
The reason this converter exists is that every format hides traps. HEX shortcodes (#F53) only work for specific 12-bit values. RGB → HSL conversion isn't perceptually uniform, so "lightness 50%" of red doesn't visually match "lightness 50%" of blue. CMYK on screen can never match CMYK printed — display gamut is RGB, print is subtractive. Knowing which format to use when, and how to convert without losing data, is a baseline skill for anyone who touches design systems, brand guidelines, or print collateral.
"There's no such thing as 'the' colour blue. There's the blue your monitor renders, the blue your printer prints, the blue a designer sees on a calibrated screen, and the blue your client sees on their phone. Conversion is just the start of the problem."
— print production saying, applies equally to web design
When to use which format
For web CSS, use HEX (#FF5733) for opaque solid colours — it's the shortest and works everywhere. Use RGBA (rgba(255, 87, 51, 0.5)) when you need transparency for overlays, modals, or fade-out effects. Use HSL (hsl(11, 100%, 60%)) in design system tokens where you want to programmatically generate lighter and darker variants — increment the lightness value in steps for shade ladders. For design tool exchange, HSB/HSV is most likely what Figma, Sketch, or your wireframing tool exposes — knowing the conversion makes copying a colour from Figma to CSS painless. For print briefs to commercial printers in Singapore, Malaysia, or Indonesia, CMYK is non-negotiable: that's the only model the press understands.
Why the WCAG contrast ratio matters
The contrast-ratio panel in this tool calculates the WCAG 2.1 relative luminance ratio between two colours. WCAG AA — the baseline accessibility standard most companies aim for — requires 4.5:1 between body text and its background. AAA (the stricter level) requires 7:1. Large text (≥18 px or ≥14 px bold) has lower bars: 3:1 for AA, 4.5:1 for AAA. This matters because failing contrast genuinely excludes users with low vision, colour blindness, or anyone reading on a sun-glared phone screen — a real consideration in tropical Singapore and Malaysia outdoor use. The EU's European Accessibility Act (EAA) makes WCAG AA legally required from June 2025 for many digital services; Singapore's BCA Accessibility Code references WCAG AA too. Conversion plus contrast checking in one place is the single most useful workflow for accessibility-aware design.
This converter computes every format from a single internal HSL source-of-truth, so changing one value updates all the others without accumulating rounding errors. Everything runs in your browser — your colours are never sent to any server. Suitable for confidential brand work and competitive launches.
10 Things to Know About Colour Formats
HEX is just RGB in disguise. #FF5733 is 255, 87, 51 — each pair of hex digits is one byte (0–255). The hash prefix is decorative; CSS requires it but the colour values are pure RGB.
HEX shortcodes have a catch. #F53 expands to #FF5533, not #F05030. Each digit doubles. So shortcodes only represent 12-bit colours (4096 values), not the full 16M.
HSL vs HSB confusion is universal. CSS uses HSL natively. Figma, Sketch, Photoshop, and Illustrator all use HSB by default. The two are NOT interchangeable: 50% lightness in HSL ≠ 50% brightness in HSB.
CMYK on screen is always a lie. Your monitor is an RGB device — it physically cannot display the CMYK gamut. Every CMYK preview you see is a mathematical approximation. For accurate proofs, use a printer's ICC profile.
WCAG AA requires 4.5:1. Body text must have a 4.5:1 contrast ratio against its background. Large text (≥18 px, or 14 px bold) drops to 3:1. AAA bumps these to 7:1 and 4.5:1.
Singapore mandates WCAG. The Building & Construction Authority's Accessibility Code references WCAG. The EU's European Accessibility Act enforces WCAG AA from June 2025. Accessibility is becoming a legal floor, not a stretch goal.
8-digit HEX includes alpha. #FF5733CC is #FF5733 with 80% opacity (CC = 204/255). Supported in CSS since Chrome 62, Firefox 49, Safari 9.1 — universal now.
OKLCH is the future. CSS Color Module Level 4 added OKLCH — a perceptually uniform colour space. "Lightness 50%" in OKLCH actually looks 50% as light, unlike HSL where it depends on hue.
Named colours have history. CSS has 147 named colours like tomato, cornflowerblue, papayawhip. Most date back to the X11 Window System palette from 1985. Yes, your CSS uses 40-year-old colour names.
Everything here is local. Your colours never leave your browser. Open DevTools — no network requests during conversion. Safe for confidential brand work and competitive launches.
Frequently Asked Questions
-
Both describe colour with three values (hue, saturation, lightness/brightness), but the lightness axis behaves differently. In HSL, 50% lightness is the pure hue and 100% is white; in HSB, 100% brightness is the pure hue and 0% is black. CSS uses HSL natively. Figma, Sketch, Photoshop, and Illustrator all expose HSB by default. Always convert deliberately — they are not interchangeable.
-
Alpha is the transparency component, ranging from 0 (fully transparent — invisible) to 1 (fully opaque — solid). RGBA and HSLA explicitly include it as a fourth value:
rgba(255, 87, 51, 0.5). HEX supports alpha via the 8-digit form:#FF573380(the last two digits are alpha, where 80 hex = 128 decimal ≈ 50%). -
It's the luminance ratio between two colours, ranging from 1:1 (identical) to 21:1 (black on white). WCAG accessibility guidelines require minimum ratios: AA = 4.5:1 for body text, 3:1 for large text (≥18 px or ≥14 px bold). AAA bumps these to 7:1 and 4.5:1. Below 4.5:1 for body text, you exclude users with low vision, colour blindness, and anyone reading on a high-glare screen.
-
For approximate work like web mockups, blog posts about brand colours, and quick previews — yes. For colour-critical commercial print (offset printing, packaging, branded merchandise) — no. CMYK accuracy depends on the specific printer's ICC profile, paper stock, and ink set. Always export from Adobe Illustrator or InDesign with the printer's profile applied for final artwork.
-
No. Everything runs in your browser. We don't log inputs, store conversion history, or send analytics on what you convert. Verifiable in DevTools — zero network requests during conversion. Safe for confidential brand work, competitive product launches, and any colour data you'd rather keep private.
-
HEX shortcodes (
#F53) expand by duplicating each digit.#F53becomes#FF5533, NOT#F05030. This means shortcodes only represent 12-bit colours (4096 possible values), missing 99.97% of the full 24-bit colour range (16.7 million values). Always use full 6-digit HEX for precise colours. -
Standard HEX (
#FF5733) is 6 digits representing red, green, and blue (8 bits each). 8-digit HEX (#FF5733CC) adds an alpha channel as the last two digits (CC = 204/255 = 80% opacity). Supported in CSS by every modern browser since around 2018. Use it when you need transparent solid colours in CSS without writing the longer rgba() form. -
OKLCH (Lightness, Chroma, Hue) is a perceptually uniform colour space added to CSS in Color Module Level 4. Unlike HSL, "50% lightness" in OKLCH actually looks 50% as light to the human eye regardless of hue. Useful for generating consistent design system shade ladders. Supported in Chrome, Safari, and Firefox since 2024. Worth learning if you're building a serious design system; overkill for one-off colour adjustments.
-
Phone screens, especially older Android displays and budget devices common in ASEAN markets, often have wider or narrower colour gamuts than your design monitor. A vibrant colour you picked on a calibrated MacBook can look washed out on a 2018 mid-range Android. Always test on the actual device profile of your target audience, not just your own dev machine.
-
Yes. Colour values are mathematical descriptions, not copyrightable expressions. Any HEX, RGB, HSL, or CMYK value you produce here is yours to use in client work, products, brand guidelines, design systems — without restriction or attribution.
Related News
You may be interested in these recent stories from our newsroom.
No related news yet for this tool. Our editorial team publishes new pieces every week.
Browse all news →75 more free tools
Calculators, converters, security tools — no signup.