Using the converter
Use the colour picker or type a value. The tool understands HEX with 3, 4, 6 or 8 digits, rgb(), hsl(), plain numbers like 255 136 0, and CSS colour names. Tap Copy next to any format.
Why contrast matters
Text that is too close to its background colour is hard to read, especially on phones outdoors. The contrast figures follow the WCAG formula, so you can quickly see whether white or black text works on your colour.
Building a page? Shrink your styles with the code minifier or encode an image with the image to Base64 tool.
Frequently asked questions
How do I convert HEX to RGB?
Split the six digits into pairs and read each pair as a base 16 number. #2b2f8f is 2b = 43, 2f = 47 and 8f = 143, so it is rgb(43, 47, 143).
What is HSL?
HSL describes a colour by hue (the position on the colour wheel, 0 to 360 degrees), saturation (how vivid it is) and lightness (how light or dark). It makes it easy to build lighter or darker shades of the same colour.
What contrast ratio do I need for readable text?
WCAG asks for at least 4.5 to 1 for normal text (level AA) and 3 to 1 for large text. Level AAA asks for 7 to 1. The tool shows the ratio against white and black text.
Can I type a colour name?
Yes. Any standard CSS colour name such as tomato, teal or navy works.
Is my colour uploaded?
No, everything is calculated in your browser.