HEX, RGB, HSL, CMYK and how to check text contrast
A color code is one color written in a different notation. HEX, RGB and HSL describe the same light on a screen, so they convert into one another exactly, apart from rounding. CMYK describes ink on paper, so its conversion from screen values is only an estimate. The WCAG contrast ratio is a separate number that compares how light two colors are, and it decides whether text is readable. Paste a color into the color converter to see every format at once.
Color converterNeed a color in another formatOpenIf the colour you need is inside a photo, a logo or a screenshot, read it off the pixel with the image colour picker first, then paste the HEX here.
Hex and RGB are the same numbers
A HEX code is three pairs of hexadecimal digits. #34D6A0 holds a red, a green and a blue value. Each pair is a number from 00 to FF, which is 0 to 255 in decimal. So 34 is 52, D6 is 214 and A0 is 160, and the RGB form is rgb(52, 214, 160).
Writing the number in hexadecimal changes only how it looks. Shorthand #abc means #aabbcc, with each digit doubled. An eight-digit code adds an alpha pair at the end, from 00 for fully transparent to FF for fully opaque, so #34D6A080 is roughly half transparent. RGBA writes the same alpha as a number from 0 to 1.
CSS also accepts color names. rebeccapurple is #663399. The converter reads names through the browser itself, so any name the browser knows will work.
HSL describes a color the way people describe it
HSL stands for hue, saturation and lightness. Hue is an angle around a color wheel: red is 0 degrees, green is 120 and blue is 240. Saturation says how far the color is from gray, and lightness says how far it is from black or white.
The same #34D6A0 is hsl(160, 66%, 52%). Its hue sits between green and blue, its saturation is high, and its lightness is just above mid-point. HSL is the easiest form to edit by hand, because you can keep the hue and move only the lightness to get a lighter or darker shade.
HSV is close to HSL but uses value, the brightness of the strongest channel, in place of lightness. Some color pickers use it, so you may meet it in other tools. The converter shows it beside HSL so you can compare the two.
CMYK is for ink, so it is an estimate
Screens add light: red, green and blue together make white. Printers take light away with ink: cyan, magenta, yellow and black on white paper. The two systems cannot match exactly, so a CMYK value is always a translation.
The converter uses the simple formula. Black is K, one minus the largest of the red, green and blue values on a 0 to 1 scale. Cyan, magenta and yellow are then worked out from what K leaves over. The formula ignores the ink, the paper and the color profile the printer uses. The printed result will therefore differ, and very bright colors can fall outside what CMYK inks can print at all. Use the CMYK value to start a conversation with a printer, and ask for a proof before a large run.
Contrast is about light, not hue
The WCAG contrast ratio compares two colors by their relative luminance. Luminance is worked out from the red, green and blue values after gamma correction, and green counts most because human eyes respond to it most. Each channel is converted from the 0 to 255 scale first, and the luminance is 0.2126 times red, plus 0.7152 times green, plus 0.0722 times blue.
The ratio is the lighter luminance plus 0.05, divided by the darker luminance plus 0.05. Black on white gives 21 to 1, the largest possible. Two colors can look quite different in hue and still have a low ratio if they have the same lightness, and that is the case the check exists to catch.
The thresholds
WCAG 2.x sets two levels, and the ratio it asks for depends on the size of the text.
- Level AA: 4.5 to 1 for normal text, and 3 to 1 for large text.
- Level AAA: 7 to 1 for normal text, and 4.5 to 1 for large text.
Large text is 24 pixels or more, or 18.66 pixels and bold. Anything smaller counts as normal. Gray text on white is a common failure. A mid-gray such as #777777 on white is about 4.48 to 1. It fails AA for normal text by a small margin, and it passes AA for large headings.
The converter shows the ratio rounded to two decimals, but each pass or fail uses the exact figure. A value that displays as 4.50 can therefore still fail if it is slightly under. The check measures one thing only. It does not cover font weight, line spacing or how people with color blindness see a design, so test the real page at its real sizes as well.
Tints and shades
The strip under the converter shows nine steps around the color: four tints mixed toward white, the color itself, and four shades mixed toward black. Clicking one copies its HEX code. This helps when you need a set of related colors, such as a light background, a hover state and a dark text color, all taken from one brand value. Check each pair you pick with the contrast section before you use it.
Quick answers
Is the CMYK value exact?
No. It is a plain arithmetic conversion that ignores the printer, the paper and the color profile. Treat it as a starting point and ask for a proof.
Does a passing contrast ratio make a design accessible?
It means the text colors meet one measurable threshold. Accessibility also depends on size, spacing, motion and how the page is built, so the ratio is a guide, not a full review.
Which format should I store in a stylesheet?
Whichever you can read and edit most easily. HEX is compact and common. HSL is easier to adjust by hand, because you change lightness without changing the hue.
