Color Converter: HEX, RGB, HSL, HSB, CMYK
Pick a color with the picker or type a HEX code to instantly get its RGB, RGBA, HSL, HSLA, HSB/HSV and CMYK values, ready to copy. It also includes a palette of derived shades and the WCAG contrast ratio against white and black text. Everything is computed locally in your browser.
That's not a valid HEX code (e.g. #0D6EFD).
Shades & tints
Click any shade to use it as the current color.
WCAG contrast
Contrast ratio of the current color used as a background, against white and black text.
Frequently asked questions
Is my color uploaded to a server?
No. Every conversion (HEX, RGB, HSL, HSB, CMYK, contrast) is computed with JavaScript directly in your browser. Nothing is ever sent to a server or saved anywhere.
What's the difference between HSL and HSB/HSV?
Both describe a color with a hue plus two more axes, just defined differently: HSL uses saturation and lightness (0% lightness is always black, 100% is always white), while HSB/HSV uses saturation and brightness (0% brightness is always black, but 100% saturation with 100% brightness gives the most intense version of the color, not white). HSB is what design-tool color pickers typically use; HSL is more common in CSS.
Is the CMYK value shown accurate for printing?
It's an approximate CMYK, computed mathematically from RGB (a "naive" conversion). It's fine as a quick reference, but for professional printing the real CMYK depends on the printer's color profile (ICC) and specific ink, so it's always worth confirming with your print provider before printing anything important.
What is contrast ratio and why does it matter?
It's a measure (from 1:1 to 21:1) of how easy it is to tell a text color apart from a background color, defined by the WCAG accessibility guidelines. Normal text should have a ratio of at least 4.5:1 (AA level) or 7:1 (AAA level); large or bold text only needs 3:1 for AA. Low contrast makes text harder to read, especially for people with low vision.
Which format should I use in CSS?
HEX is the most compact and most commonly used. RGB/RGBA and HSL/HSLA are more readable and let you handle transparency with the same format (the fourth value, alpha). HSL is also more intuitive to tweak by hand - changing only the lightness to lighten or darken a color, for example. All three work equally well in any modern browser.