Color Converter & Contrast Checker

Convert between HEX, RGB and HSL, and check colour contrast

calendar_today Last updated: September 17, 2026

Same colour, three ways

HEX
#00609b
RGB
rgb(0, 96, 155)
HSL
hsl(202.8, 100%, 30.4%)

Contrast check

Sample text at this pairing

Smaller text, which is the harder case.

Contrast ratio6.67:1
Pass — AA, normal text
Pass — AA, large text
Fail — AAA, normal text
Pass — AAA, large text

The ratio follows WCAG 2.1, gamma step included — the part a rough average of the channels gets wrong.

lightbulb

Sahel's colour converter moves between HEX, RGB and HSL and checks contrast against WCAG, saying whether a pair passes for normal and large text — all in your browser.

help_outline

How does this tool work?

1

Paste a colour

A hex code, rgb(...) or hsl(...).

2

Take the format you want

The same colour in three ready-to-copy notations.

3

Check the contrast

Add a background colour to see the ratio and whether it passes WCAG.

Frequently asked questions

What is HSL good for? expand_more
It describes a colour the way people think about it: hue, then how pure it is, then how light. Lightening or darkening means changing one number, where RGB needs all three adjusted together.
What does the contrast ratio mean? expand_more
A comparison of the two colours' brightness, from 1:1 for identical colours up to 21:1 for black on white. WCAG asks for at least 4.5:1 for normal text and 3:1 for large text.
Why does a grey that looks readable fail? expand_more
Because the verdict is not based on impression but on a brightness calculation including gamma correction. Mid grey on white looks acceptable to good eyesight in good light, and becomes unreadable for low vision or in sunlight.
Does passing the ratio make a design readable? expand_more
It is a floor, not a guarantee. Font size, weight and spacing all matter too — but contrast is the first thing tested and the easiest to fix.