About this tool
Four notations for the same sRGB colour
HEX, RGB, HSL and HWB are four ways to write a colour in sRGB, the default colour space of the web. HEX and RGB give the red, green and blue channels directly, each from 0 to 255. HSL gives a hue angle, a saturation and a lightness; HWB gives the same hue angle with an amount of white and an amount of black mixed in. Converting between them changes the notation, not the colour.
An eight-digit hex code such as #5a3ff080, or a fourth value after a slash such as rgb(90 63 240 / 0.5), adds an alpha channel. The space-separated form is the CSS Color Level 4 syntax and works in every current browser; the comma form, rgba(90, 63, 240, 0.5), is there for older tools.
What OKLCH and OKLab add
OKLab is a colour space designed by Björn Ottosson in 2020 so that equal numeric steps look like equal steps to the eye. OKLCH is the same space in polar form: lightness from 0 to 1, chroma (how colourful) and a hue angle. Two OKLCH colours with the same lightness look about equally light, which is not true of HSL, where a yellow and a blue at 50% lightness differ widely.
OKLCH can also describe colours that an sRGB screen cannot show. When you enter one, this tool keeps its lightness and hue and lowers the chroma until the colour fits, and it tells you that it did so.
How the contrast ratio is calculated
WCAG 2 defines contrast as (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and the darker colour. The result runs from 1:1 for two identical colours to 21:1 for black on white.
Level AA asks for at least 4.5:1 for normal text and 3:1 for large text; level AAA asks for 7:1 and 4.5:1. Large text means at least 24 CSS pixels, or about 18.7 pixels when bold. The ratio shown here is rounded down, because a pair measuring 4.499:1 does not meet 4.5:1.
How this tool computes the values
The conversions run in JavaScript in your browser, using the sRGB transfer function and the OKLab matrices published with the colour space. Each output is rounded to a few decimals, chosen so that the value converts back to the same 8-bit colour with these formulas. A browser may calculate OKLCH and OKLab with slightly different constants, so a pasted OKLCH or OKLab value can come out a step or two of 255 away in one channel, most often in a saturated green. The nearest named colour is the one at the smallest distance in OKLab.