Color Converter
Convert between HEX, RGB, HSL and check contrast ratios.
AA needs 4.5:1 for body text and 3:1 for large text (18pt, or 14pt bold). AAA raises those to 7:1 and 4.5:1.
About this tool
Convert a colour between HEX, RGB and HSL and see it rendered as you go. Contrast ratios against white and black are calculated to WCAG 2.1, with pass and fail marks for AA and AAA so accessibility is not an afterthought.
How to use it
- Enter a colour in any supported format, or use the picker.
- Read the equivalent values in the other formats.
- Check the contrast ratios before using it for text.
Reading a contrast ratio
Contrast is expressed as a ratio between two relative luminances, from 1:1 (identical) to 21:1 (black on white).
WCAG 2.1 thresholds:
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
"Large" means 18pt, or 14pt bold — roughly 24px and 18.66px.
The maths is not linear, which is why intuition fails. Relative luminance weights green far more heavily than blue: green contributes 0.72, red 0.21, blue 0.07. A saturated blue on black has far less contrast than it appears, and pure yellow on white has almost none despite looking vivid.
AA is the practical target. It is what most accessibility regulations reference, and it is achievable without flattening your palette. AAA for body text is demanding enough that it constrains design significantly.
HEX, RGB and HSL are the same colour
All three describe identical sRGB colours — they differ only in how the numbers are arranged, and which edits are easy.
HEX is compact and the web default. #4f46e5 is three bytes. Shorthand #abc expands to #aabbcc, and an optional fourth pair adds alpha.
RGB exposes the channels directly, which is useful when computing a colour in code.
HSL separates hue, saturation and lightness, which is the one that matches how people think about colour. Want the same colour but lighter? Change one number. Want a complementary colour? Add 180 to the hue. Building a palette in HSL takes minutes; doing it in HEX takes guesswork.
The usual workflow is to design in HSL and ship HEX, which is why converting between them is worth a tool.
Alpha is preserved where the target format supports it — eight-digit HEX, rgba() and hsla() all carry it.
Frequently asked questions
- What contrast ratio do I need?
- WCAG AA requires 4.5:1 for body text and 3:1 for large text — 18pt, or 14pt bold. AAA raises that to 7:1 and 4.5:1 respectively.
- Which formats are accepted?
- Three, four, six and eight digit hex, rgb() and rgba(), and hsl() and hsla(). Alpha is preserved where the target format supports it.
- Does this call a colour API?
- No. All conversion and contrast maths is arithmetic done in the page itself, which is why results update instantly as you type.