Skip to content
Dogu SangjaToolboxAll tools

Color Converter & Contrast CheckerBeta

Convert any CSS color between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH, and check WCAG contrast ratios for AA/AAA, normal and large text.

All formats

  • HEX#3366ff
  • RGBrgb(51, 102, 255)
  • HSLhsl(225, 100%, 60%)
  • HWBhwb(225 20% 0%)
  • LABlab(47.4 26.93 -82.47)
  • LCHlch(47.4 86.76 288.08)
  • OKLCHoklch(0.5726 0.2338 265.28)

Contrast checker

Contrast ratio14.67:1
AA · normal text (4.5:1)
✓ Pass
AA · large text (3:1)
✓ Pass
AAA · normal text (7:1)
✓ Pass
AAA · large text (4.5:1)
✓ Pass

Large text preview (Aa)

This is a sample sentence for checking contrast in normal text.

What this tool does

Paste or pick any CSS color and see it in HEX, RGB, HSL, HWB, LAB, LCH and OKLCH, each with its own copy button. A swatch and an alpha slider show how the color looks with transparency. Below the converter, a contrast checker compares two colors against the WCAG 2 thresholds and previews sample text in them.

Color models, briefly

  • HEX and RGB describe a color as amounts of red, green and blue (0–255, or 0–100%).
  • HSL adds hue, saturation and lightness, which is often easier to reason about than raw RGB.
  • HWB (hue, whiteness, blackness) mixes white and black into a hue — handy for tints and shades.
  • LAB and LCH describe color the way human vision perceives lightness (L) together with either green–red/blue–yellow axes (LAB) or chroma and hue (LCH).
  • OKLCH is a newer, perceptually uniform version of LCH built for the modern web.

Why OKLCH is useful

In HSL, keeping “lightness” at the same number while changing the hue can still look much lighter or darker to the eye — pure yellow at L = 50% looks far brighter than blue at the same L. OKLCH’s lightness channel tracks how bright a color actually looks, so palettes built by adjusting only the lightness value stay visually consistent across hues, and you can change a color’s saturation without accidentally changing how light or dark it appears.

How WCAG contrast is computed

The contrast checker follows the WCAG 2 formula: it computes the relative luminance of each color (a weighted mix of its linear-light red, green and blue channels), then divides (L1 + 0.05) by (L2 + 0.05), using the lighter color as L1. The result is a ratio such as 4.5:1.

  • AA, normal text: 4.5:1
  • AA, large text: 3:1
  • AAA, normal text: 7:1
  • AAA, large text: 4.5:1

“Large text” means at least 18pt (about 24px) at regular weight, or 14pt bold (about 19px).

Out-of-gamut colors

LAB, LCH and OKLCH can describe colors that no ordinary screen can show, because they cover a wider range than sRGB. When that happens, this tool tells you and shows the closest color your sRGB display can reproduce for HEX and RGB.

Sources

Frequently asked questions

What does "outside the sRGB gamut" mean?

Most screens can only show colors inside the sRGB color space. LAB, LCH and OKLCH can describe colors outside it, closer to what wide-gamut displays or printers can produce. When a color you enter is out of gamut, the HEX and RGB values shown are the closest color sRGB can actually display, not the exact value you typed.

What's the difference between WCAG AA and AAA?

AA is the minimum contrast level most accessibility guidelines require: 4.5:1 for normal text and 3:1 for large text. AAA is the stricter, enhanced level: 7:1 for normal text and 4.5:1 for large text.

How is the contrast ratio calculated?

It's the WCAG 2 formula (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker color. Luminance is a weighted sum of a color's linear red, green and blue values, so the ratio ranges from 1:1 (identical colors) to 21:1 (black on white).

Why do OKLCH numbers look so different from HSL for a similar-looking color?

HSL's lightness is simply the average of the largest and smallest of the red, green and blue channels, so it doesn't match how bright a color actually looks. OKLCH's lightness comes from a perceptual model, so the same lightness number produces similarly bright colors across different hues, even though the two scales don't line up numerically.

Open-source software used: culori (MIT)