Convert colors between HEX, RGB, HSL and CMYK

How the formats relate

Every format here describes the same on-screen sRGB color in a different way:

• HEX is RGB written in base 16. #RRGGBB has one pair of digits per channel, from 00 to ff. The shorthand #abc means #aabbcc, and an 8 digit form adds opacity at the end.
• RGB gives red, green and blue as numbers from 0 to 255. It is how screens mix light, so it is the most direct format.
• HSL gives a hue in degrees on the color wheel (0 is red, 120 green, 240 blue), then saturation and lightness in percent. At 50% lightness you get the pure color, so lighter and darker shades are just a change to L.
• HSV, or HSB, uses the same hue but replaces lightness with value, the brightness of the strongest channel. Most graphics software color pickers work this way. CSS cannot read it.
• CMYK describes ink on paper: cyan, magenta, yellow and black. A proper screen to print conversion depends on the printer and paper profile. This page uses the simple formula, which is a good first estimate and not a proof color.

Contrast and accessibility

The WCAG 2 contrast ratio compares the relative luminance of two colors and runs from 1:1 (no difference) to 21:1 (black on white). The thresholds that accessibility checks use are:

• 4.5:1 for normal text at level AA, and 7:1 at level AAA.
• 3:1 for large text (about 24 px, or 18.7 px bold) at AA, and 4.5:1 at AAA.
• 3:1 for icons, borders and other parts of an interface that you need to see.

The default color on this page, a light lime, is a useful example: against black the ratio is 15.45:1 and against white only 1.36:1. It works as a background for dark text and fails as text on white. The ratio is symmetrical, so the same number applies to white text on that lime.

A ratio just under a limit is never rounded up to look like a pass. WCAG 3 drafts propose a different method, but WCAG 2 ratios are what audits and accessibility rules use today.

Writing colors in CSS

Browsers read hex, rgb(), hsl() and named colors. The space separated form, such as rgb(197 236 67 / 50%), works in current browsers, and the older comma form, rgba(197, 236, 67, 0.5), works everywhere. Use whichever your project already uses.

HSL is handy for themes: keep the hue, change the lightness for hover and disabled states. HSV and CMYK have no CSS function in today's browsers, so those values are for design tools and print, not stylesheets.

When you convert through HSL, HSV or CMYK with whole numbers, the result can land one step away from the original, because those models round to a coarser grid than 256 steps per channel. Choose decimals to avoid it.