Color Converter (HEX, RGB, HSL)
Convert between HEX, RGB, HSL, HSV and CMYK. Measure the contrast ratio and build lighter and darker tones.
How it works
- Type a color code or pick one from the color picker.
- Read every format on the right and copy it in one click.
- Check the contrast ratio and pick a new color from the tone list.
Why this tool
- Five formats: HEX, RGB, HSL, HSV and CMYK.
- Input accepts #1f6feb, rgb(...) or hsl(...).
- WCAG contrast against white, black and a second color.
- AA and AAA results for normal text and for large text.
- A lighter and darker tone scale. Click a tone to use it.
Color codes describe the same color in different ways. HEX is short and easy to paste, and it is the standard in CSS and design tools. RGB gives the same information as three numbers from 0 to 255, and rgba adds transparency. HSL splits a color into hue, saturation and lightness. CMYK gives four ink values for print.
HSL is a design tool. To build a ten step scale from a brand blue, hold the hue and move only the lightness. That is hard to do by hand in HEX and easy in HSL. This tool also shows a ready tone list. Click a tone and the tool switches to that color.
The contrast section is about accessibility. WCAG 2.1 asks for at least 4.5:1 for normal text and 3:1 for large text. Large text means 18.66 pixels bold or 24 pixels regular. Level AAA asks for 7:1 and 4.5:1. The tool compares your color with white, with black and with a second color you choose, and prints the AA and AAA result for each.
Light grey text is a common mistake. #999999 gives 2.8:1 on white and fails. #767676 passes at 4.54:1. Check that number when you pick a text color.
All the math runs in your browser. There is no network request.
Frequently asked questions
What does the contrast ratio mean?
It measures the brightness difference of two colors. 1:1 is the same color and 21:1 is black on white. WCAG asks for at least 4.5:1 for normal text and 3:1 for large text.
What counts as large text?
Text at 18.66 pixels bold, or at 24 pixels regular and above. At those sizes 3:1 is enough.
When is HSL useful?
When you build a tone scale. Hold the hue (H) and move the lightness (L) to get a matching family of colors. That is hard to do by hand in HEX.
Are the CMYK values ready for print?
Roughly. The tool uses a simple conversion and ignores the color profile. For serious print work, use the profile from your printer.
What should I do about color blindness?
Never carry information with color alone. Add an icon, a label or a pattern. A high contrast ratio also helps in most types of color blindness.
Does any data go to a server?
No. All the math runs in your browser. There is no network request.