hex, rgb, hsl and oklch in step, with tints, shades and a WCAG contrast check.
This runs entirely in your browser. Nothing you paste, type or drop here is sent anywhere — there is no server on the other end of it.
One colour, in every notation at once — hex, rgb, hsl and oklch — kept in step as you edit any of them. Below that: tints and shades derived from it, harmonies around the wheel, and a WCAG contrast check against a second colour, because most of the time the actual question is not what the colour is but whether text will be readable on it.
WCAG AA: 4.5:1 for normal body text, 3:1 for large text (roughly 24px, or 19px bold) and for the boundaries of interactive components. AAA raises the first two to 7:1 and 4.5:1. If a number here is close to the line, treat it as failing — real screens and real eyes are less forgiving than the formula.
Because HSL's lightness is a arithmetic convenience and oklch's is perceptual. Two HSL colours at 50% lightness can look obviously different in brightness; two oklch colours at the same L will not. That is why oklch ramps stay even and HSL ramps sag.
Yes — it is supported across current Chrome, Safari and Firefox. If you still support older browsers, give a hex fallback immediately before the oklch declaration and let the cascade sort it out.
No. It is one necessary check of many. Contrast says nothing about focus order, hit targets, motion, or whether colour is the only thing carrying a meaning — that last one is the trap this tool cannot see.