Color Converter and Contrast Checker: HEX, RGB, HSL, OKLCH

Named colors in every format

WCAG 2 contrast thresholds

Contrast of common color pairs

How to convert a color and check its contrast

1. Enter a color. Type or paste any CSS color into the Color box: #1e6bb8, rgb(30, 107, 184), hsl(210, 72%, 42%), hwb(210 11.8% 27.8%) or a name such as steelblue. Or pick one with the color picker, which stays in sync with the box.
2. Copy the format you need. Read the HEX, RGB, HSL, HWB, CMYK and OKLCH rows and press Copy next to the one you want. The nearest named color is shown too.
3. Enter the text and background colors. In the contrast checker, type or pick the text color and the background color. Use Swap to try them the other way round.
4. Read the contrast ratio. The ratio runs from 1:1 (no contrast) to 21:1 (black on white). Compare it with 4.5:1 for normal text and 3:1 for large text at level AA, or 7:1 and 4.5:1 at level AAA. #767676 on #ffffff is 4.54:1.

Frequently asked questions

How do I convert a hex color to RGB?

Split the hex code into three pairs and read each pair as a base-16 number from 0 to 255. #1e6bb8 is 1e, 6b and b8, which is 30, 107 and 184, so rgb(30, 107, 184). A three-digit code repeats each digit, so #f80 is #ff8800. A fourth (or eighth) digit pair is the alpha channel.

How do I convert RGB to HSL?

Scale the channels to 0-1, find the largest and smallest, and take lightness as their average. Saturation is their difference divided by 1 - |2L - 1|, and the hue is the angle on the color wheel that depends on which channel is largest. rgb(30, 107, 184) gives hsl(210, 72%, 42%). The converter does this for you and shows HSL to one decimal.

How is the WCAG contrast ratio calculated?

Each channel is turned into linear light with the sRGB transfer function, and relative luminance is 0.2126 R + 0.7152 G + 0.0722 B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color’s luminance and L2 the darker one’s. It does not matter which color is the text, so swapping them gives the same ratio. This is the WCAG 2 formula; the newer APCA method is not used here.

What contrast ratio do I need for WCAG AA and AAA?

Level AA needs 4.5:1 for normal text and 3:1 for large text; level AAA needs 7:1 for normal text and 4.5:1 for large text. Large text is at least 18 pt (24 CSS pixels), or at least 14 pt (about 18.7 pixels) and bold. Icons, form borders and other interface parts need 3:1 at AA (criterion 1.4.11). On white, #767676 is the lightest neutral gray that passes AA for normal text and #595959 the lightest that passes AAA.

Why does a ratio of 4.499 not show as 4.5?

WCAG does not allow rounding a ratio up to reach a threshold, so the page cuts the ratio to two decimals instead of rounding it: 4.499 shows as 4.49 and fails. Pure red on white is 3.9985:1 exactly, which many tools round to 4.00; here it shows 3.99:1. Whatever the checker shows, a pass means the exact ratio is at or above the minimum.

Can I use the CMYK value for printing?

No. The CMYK shown is the naive textbook conversion from RGB (black is 1 minus the brightest channel, then the other three are scaled), so #ff0000 is cmyk(0%, 100%, 100%, 0%). It ignores ink, paper and color profiles. Real print workflows convert with an ICC profile for the press and paper, and the result looks different. Treat it as a rough approximation.

What is OKLCH and why is it useful?

OKLCH is the polar form of OKLab, a color space by Björn Ottosson designed so equal numeric steps look like equal steps to the eye. L is lightness (shown as a percent), C is chroma (colorfulness, about 0 to 0.37 for screen colors) and h is the hue angle in degrees. Unlike HSL, changing only L keeps a color’s apparent hue, which makes it good for building palettes. It is valid CSS in current browsers: oklch(52.3% 0.1412 252.58) is #1e6bb8.

Which color formats can I type?

Hex with 3, 4, 6 or 8 digits (the # is optional for 3 and 6), rgb() and rgba(), hsl() and hsla(), hwb(), transparent, and the 148 CSS named colors including rebeccapurple and both gray and grey spellings. The functions accept comma syntax (rgb(30, 107, 184)) and space syntax with an optional slash alpha (rgb(30 107 184 / 50%)), numbers or percentages, and hue in deg, grad, rad or turn. Case and extra spaces do not matter.

How are the values rounded, and are conversions exact?

Whatever you enter is first converted to whole 8-bit red, green and blue values, the same precision as a hex code, and every format is computed from those. RGB is whole numbers, HSL and HWB are shown to one decimal, CMYK to whole percents, OKLCH lightness to one decimal percent, chroma to four decimals and hue to two. Converting a hex color to HSL and back is exact for every color we tested, and the HEX and RGB rows are always exact. HWB at one decimal can land one step off in one channel for about 1 color in 120, so use HEX or RGB when you need the exact value.

How is the nearest named color chosen?

It is the one of the 148 CSS names with the smallest straight-line distance to your color in OKLab, a space where distance matches how different two colors look. The page says “exact match” when your color is one of the names. When several names share a value, the first alphabetically is shown, so gray is shown instead of grey and aqua instead of cyan.

How does it handle transparent colors in the contrast check?

A color with alpha is blended first, as a browser would paint it: a translucent background over white, then a translucent text color over that background. The ratio is for the blended colors, and the page tells you when it blended. The real result on your page still depends on what sits behind the background.