How do I convert HEX to RGB?

Split the six digits into three pairs and convert each from base 16 to a number from 0 to 255. #FF5733 is rgb(255, 87, 51).

What contrast ratio do I need?

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

A description of colour by hue (0 to 360 degrees), saturation and lightness, which is handy for making lighter or darker variants.

Color Converter

Convert between HEX, RGB and HSL, and check contrast against white and black.

Updated September 19, 2026Checked by the editorial team

Pick a colour

HEX

RGB

HSL

Contrast check

Compare against

The quick brown fox

jumps over the lazy dog

6.63 : 1

AA normal text (4.5): Pass
AA large text (3): Pass
AAA normal text (7): Fail
AAA large text (4.5): Pass

Pick a colour or type a value in HEX, RGB or HSL, and the other formats update at once. A contrast panel shows how well white and black text would read on that colour.

Contrast matters for accessibility. Text that is hard to read for many people is a real barrier, not only a style issue.

How color converter works

HEX and RGB are two ways of writing the same red, green and blue values. HSL describes the same colour by hue (the angle on the colour wheel), saturation and lightness, which is often easier for adjusting a shade.

The contrast ratio compares the relative luminance of two colours on a scale from 1 (no contrast) to 21 (black on white). WCAG asks for at least 4.5 to 1 for normal text and 3 to 1 for large text at level AA.

The formula

HEX #RRGGBB  →  RGB: each pair of digits is a value from 0 to 255
Contrast ratio  =  (L1 + 0.05) ÷ (L2 + 0.05),  where L1 is the lighter luminance

Worked example: checking a brand blue

#1F4FD8 is rgb(31, 79, 216), or hsl(226, 75%, 48%).

Against white its contrast ratio is about 6.6 to 1, which passes AA for normal text and misses AAA (7 to 1).

When to use this tool

Translating a colour from a design tool into CSS.
Adjusting lightness or saturation in HSL to build a palette.
Checking whether text on a coloured background meets accessibility guidelines.

Common mistakes to avoid

Choosing text colours by eye only. Colours that look fine to you may fail for readers with low vision.
Using colour alone to convey meaning, such as red and green status dots without labels.
Assuming a screen and print show the same colour. RGB screens and CMYK print differ.

Frequently asked questions

How do I convert HEX to RGB?: Split the six digits into three pairs and convert each from base 16 to a number from 0 to 255. #FF5733 is rgb(255, 87, 51).
What contrast ratio do I need?: WCAG AA asks for 4.5 to 1 for normal text and 3 to 1 for large text. AAA asks for 7 to 1 and 4.5 to 1.
What is HSL?: A description of colour by hue (0 to 360 degrees), saturation and lightness, which is handy for making lighter or darker variants.

Learn more

Results are for information only and are not financial, legal or medical advice. The calculation logic is covered by automated tests, and examples on this page are worked out and re-checked before publishing. Spotted a mistake? Tell us.