Color Converter

About this colour converter

HEX, RGB and HSL describe the same sRGB colour through three different coordinate systems. HEX and RGB are the same thing written differently — a triple of 0–255 channel values, hexadecimal being base 16. HSL re-expresses those channels as hue in degrees, saturation and lightness as percentages, which is far easier to reason about when you want a lighter tint or a desaturated variant of a colour you already have.

Do not confuse HSL lightness with perceptual brightness. hsl(60, 100%, 50%) is a bright yellow and hsl(240, 100%, 50%) is a dark blue, yet both report 50% lightness. The WCAG contrast calculation therefore does not use HSL at all: it converts each channel to linear light with the sRGB transfer function, weights the channels as 0.2126 R + 0.7152 G + 0.0722 B, and compares the two resulting luminances as (L1 + 0.05) / (L2 + 0.05). That is why the ratio below is the number to trust, not the lightness values.

The thresholds are set by WCAG 2.1 level AA at 4.5:1 for normal text and 3:1 for large text, which is defined as 18 pt (24 px) regular or 14 pt (about 18.7 px) bold. Level AAA raises those to 7:1 and 4.5:1. Passing the ratio is necessary but not sufficient for a readable interface — font weight, size, letter spacing and the surrounding contrast all matter, and the ratio says nothing about whether colour is the only cue distinguishing two states.