Color Converter

What is color converter?

Designers and developers move between color formats all the time. CSS accepts HEX, RGB and HSL, design tools often show different ones, and brand guides might list only one.

This converter also tests contrast. A ratio of 4.5 to 1 or higher is the common minimum for body text in accessibility guidelines, so you can see at once whether white or black text works on your color.

How to use the color converter

1. Enter a HEX value with or without the hash sign. Three digit shortcuts work.
2. Look at the swatch and the converted values.
3. Check the two contrast ratios to choose readable text.

How the color converter works

HEX is split into red, green and blue pairs and read as base 16 numbers from 0 to 255. HSL is derived from RGB. Contrast follows the WCAG formula using relative luminance of the color compared with white and black.

Worked example

Common uses of the color converter

• Matching a brand color from a design file to CSS.
• Checking if text is readable on a colored background.
• Finding a lighter or darker shade by changing HSL lightness.
• Translating a color between tools that use different formats.
• Teaching color theory to students.

Tips and common mistakes

Do not rely on color alone to carry meaning. Add text or icons for colorblind users.

WCAG asks for 4.5 to 1 for normal text and 3 to 1 for large text.

Background: what to know before you rely on it

Screens make colors by mixing red, green and blue light, which is the RGB model. HEX is just RGB written in base 16. HSL describes a color in the way people think about it, as a hue on the color wheel, a saturation and a lightness, which makes it easy to build tints and shades. Accessibility rules, the WCAG guidelines, set minimum contrast ratios so people with low vision can read text. Normal text should reach 4.5 to 1 and large text 3 to 1. About one in twelve men has some color vision deficiency, so never use color alone to carry meaning.

Private, free and fast

This tool runs entirely in your browser. What you type or choose is not uploaded to a server and is not saved after you close the page, which keeps it fast and private. It is free to use as often as you like. See more in all converters, or browse the full list of tools.

Related tools

Results are for information and education. For legal, financial, medical or security decisions, check with a qualified professional. Check critical conversions with an official source.