How to use the hex to rgb converter and contrast checker
- Type a colour in any of the HEX, RGB or HSL fields, or use the colour picker. The other formats update instantly.
- Use the alpha slider for transparency; the HEX value gains two alpha digits and RGB becomes RGBA.
- Copy any format with its copy button.
- In the contrast checker, set a text colour and background colour to see the ratio and AA/AAA pass or fail for normal and large text.
Worked example
Dodger blue and a grey that just fails
#1e90ff converts to rgb(30, 144, 255) and hsl(210, 100%, 56%). In the contrast checker, #777777 text on white has a ratio of 4.48:1, which fails AA for normal text (4.5:1) but passes for large text. One step darker, #767676, gives 4.54:1 and passes AA.
How it works
HEX digits are read as 8-bit channels (3 and 4 digit forms are doubled). HSL uses the standard CSS conversion. Contrast follows WCAG 2: each channel is linearised from sRGB, relative luminance is 0.2126 R + 0.7152 G + 0.0722 B, and the ratio is (L1 + 0.05) / (L2 + 0.05). Pass or fail uses the unrounded ratio, and a value just below a threshold is never displayed rounded up to it.
Frequently asked questions
Is my data uploaded?
No. This tool runs entirely in your browser. Your input is processed on your device and is not sent to our server or stored.
What contrast ratio do I need?
WCAG 2 AA requires 4.5:1 for normal text and 3:1 for large text (24px, or about 18.7px bold) and for UI components. AAA requires 7:1 and 4.5:1.
How is a transparent colour handled in the contrast check?
The contrast checker uses opaque hex colours. In the converter, colours with alpha are previewed over a checkerboard; to check contrast of a translucent colour, blend it with its background first.
Why do my HSL values change slightly after converting back?
CSS values are rounded to whole numbers, and each HEX channel has only 256 levels, so a round trip can shift HSL by a fraction of a percent.
Limitations
- sRGB only; Display P3 and other wide-gamut spaces are not converted.
- Contrast ratio is a WCAG 2 measure; it does not model every aspect of readability, such as font weight or APCA.