Color Converter
Convert between HEX, RGB, HSL, and CMYK colour formats instantly. Pick a colour, enter any value, and see all formats updated live.
By Alex van den Berg · Last reviewed · How we test our tools
Quick colours
Which colour format should you use?
The standard format for CSS, HTML, and web design. A 6-digit code where two digits each represent red, green, and blue channels in hexadecimal (0–F). Compact and easy to copy. #FF5733
Red, Green, Blue — the native language of all digital screens. Values from 0–255 for each channel. Used in CSS (rgb(255, 87, 51)), JavaScript canvas operations, and graphic design software.
Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Much more intuitive for humans — you can darken a colour by reducing L, or desaturate by reducing S. Preferred by CSS developers for theme design and colour variations.
Cyan, Magenta, Yellow, Key (black) — the ink model used in commercial printing. CMYK values are percentages of each ink. Note: screen colours (RGB) and print colours (CMYK) have different gamuts, so conversions are approximate.
The formulas behind the conversion
Every conversion on this page is plain arithmetic — here is what happens when you type a value:
HEX → RGB
Each pair of hex digits is one channel read as a base-16 number: #FF5733 → R = FF₁₆ = 255, G = 57₁₆ = 87, B = 33₁₆ = 51.
RGB → HSL
Scale channels to 0–1, find the maximum and minimum. Lightness is their midpoint: L = (max + min) / 2. Saturation is the spread (max − min) scaled by lightness, and hue is which channel is largest and by how much, mapped onto a 360° wheel (red at 0°, green at 120°, blue at 240°). For rgb(255, 87, 51): max = 1.0, min = 0.2 → L = 60%, S = 100%, H ≈ 11° — a saturated orange-red.
RGB → CMYK
Black (K) is set by the brightest channel: K = 1 − max(R′, G′, B′). Each ink is then the remaining distance to full colour: C = (1 − R′ − K) / (1 − K), and likewise for M and Y. This is the standard device-independent approximation — a real print shop's ICC profile will adjust it for specific inks and paper.
Colour contrast and accessibility (WCAG)
If you are choosing colours for a website or app, the most important number is not the hue — it is the contrast ratio between text and background. The Web Content Accessibility Guidelines (WCAG) require:
- 4.5 : 1 minimum for normal body text (Level AA)
- 3 : 1 for large text (18pt+, or 14pt bold), icons, and UI component boundaries
- 7 : 1 for enhanced accessibility (Level AAA)
Contrast is calculated from relative luminance — a weighted sum of the RGB channels (green counts most, blue least, matching human eye sensitivity) — not from how different two colours "look". Two hues can appear clearly distinct yet fail the ratio badly: pure red #FF0000 on pure green #00FF00 is only about 2.9 : 1, and invisible to many people with colour-vision deficiency, which affects roughly 1 in 12 men.
Practical workflow: pick your brand hue here, then adjust the HSL Lightness value up or down until a contrast checker reports a pass — changing L preserves the hue while moving luminance, which is exactly what contrast needs.
Frequently Asked Questions
Why does my CMYK colour look different when printed?
RGB screens and CMYK printers have different colour gamuts. Some vivid RGB colours — especially bright blues, greens, and oranges — simply cannot be reproduced with CMYK inks. The CMYK value shown is a mathematical approximation; your printer's colour profile and paper type will further affect the final result. Always request a physical proof before a large print run.
What is the difference between HSL and HSB/HSV?
Both describe colours using hue and saturation, but the third component differs. HSL's Lightness is symmetric: 0% = black, 50% = the pure colour, 100% = white. HSB/HSV's Brightness goes from 0% (black) to 100% (the pure colour without mixing in white). This converter uses HSL, which is the format accepted by CSS.
How do I get the HEX code of a colour on my screen?
On Mac, use the built-in Digital Colour Meter (Applications → Utilities). On Windows, use PowerToys Color Picker or the eyedropper in MS Paint. In most browsers you can also open DevTools → Elements → any colour value → click the colour swatch to open a colour picker with the HEX value.
What are web-safe colours?
Web-safe colours are the 216 colours defined using hex values that are multiples of 33 (00, 33, 66, 99, CC, FF) in each channel — e.g. #336699. They were standardised in the 1990s for consistency across monitors with only 256 colour depth. Modern screens support 16+ million colours, so web-safe colours are largely obsolete today.
What contrast ratio do I need for accessible text?
WCAG Level AA requires at least 4.5:1 between normal text and its background, and 3:1 for large text and UI components. Contrast is computed from relative luminance, not hue difference — see the accessibility section above for a practical workflow using the HSL lightness slider.
What is an 8-digit hex code?
The last two digits are the alpha (opacity) channel: #FF573380 is #FF5733 at ~50% opacity (hex 80 = 128 out of 255). CSS also accepts 4-digit shorthand (#F538) where the final digit is alpha.
Sources & further reading
- W3C — Web Content Accessibility Guidelines (WCAG) 2.2, Success Criterion 1.4.3 "Contrast (Minimum)". w3.org
- MDN Web Docs — CSS
<color>data type (hex, rgb(), hsl(), and alpha notation). developer.mozilla.org - IEC 61966-2-1 — the sRGB colour space standard used by screens and assumed by these conversions. webstore.iec.ch
- NHS — "Colour vision deficiency (colour blindness)", prevalence figures. nhs.uk