Skip to content
DevTools

Color Converter

color → color

Convert HEX, RGB, HSL and OKLCH, and check contrast against WCAG.

Colour
HEX#0167fa
RGBrgb(1 103 250)
HSLhsl(215.4 99.2% 49.2%)
OKLCHoklch(56.1% 0.2335 260.4)

contrast

Against

Body text at this contrast

Smaller supporting text, which is what the AA threshold of 4.5:1 is written for.

4.86:1AA passAA large passAAA failAAA large pass

About Color Converter

Enter a colour in any notation — a hex value, rgb(), hsl(), or oklch() — and get all four back, with a swatch so you can see what you actually typed. Percentage and 0-255 channel syntax are both understood, as are three-, four-, six- and eight-digit hex.

OKLCH is included because it is what modern CSS reaches for, and because it behaves differently from HSL in a way that matters. In HSL, two colours with the same lightness value can look nothing alike in brightness — yellow at 50% looks far lighter than blue at 50%. OKLCH is built on a perceptual model, so equal lightness numbers look equally light, which is what makes a generated palette come out even instead of lumpy.

Below the conversions is a WCAG contrast checker. Enter a second colour and it grades the pair against the AA and AAA thresholds for both body and large text, and previews real text at that contrast — because a ratio alone does not tell you whether the result is comfortable to read.

Common questions

What contrast ratio do I actually need?
WCAG AA asks for 4.5:1 for body text and 3:1 for large text — 18.66px bold or 24px regular and above. AAA raises those to 7:1 and 4.5:1. AA is the level most accessibility regulations reference.
Why prefer OKLCH over HSL?
Because its lightness matches perception. Darkening a colour by ten percent in OKLCH looks like the same amount of change whatever hue you started from, so a scale of shades comes out evenly spaced. Doing the same in HSL gives steps that jump around.
My OKLCH colour looks clipped. Why?
OKLCH can describe colours a screen cannot show. When a value falls outside the sRGB gamut, converting back has to clamp it to the nearest displayable colour, so a very high chroma may come back duller than you asked for.
Is an eight-digit hex value the same as rgba()?
Yes. The last two digits are alpha, from 00 fully transparent to ff opaque. It is supported everywhere that matters now, and is shorter than the equivalent rgba() call.

This page does the work itself, in this tab. Nothing you paste is sent to a server. Close the tab and no copy remains.