Colour bench
Type or paste any colour into Original, then fine-tune it with the sliders and ramps.
Adjust drag, or arrow keys
Conversions click a line to copy
Ramps click any step to load it
Original to now straight line through OKLab, nine steps
Lightness OKLCH L held at your chroma and hue, mapped into sRGB
Relative luminance WCAG Y of each step above, as a neutral grey
Chroma grey through to the sRGB limit at this lightness
Hue every 30°, lightness and chroma unchanged
Related hues complement, split, triad, square
Luminance and contrast
The bar pairs your colour with the neutral grey of identical relative luminance. If the two halves read as the same weight when you squint, the colour carries no extra lightness of its own — useful when you need a tint to sit at a fixed value.
Colour vision original left, now right
Around one man in twelve sees one of these. If a pair of colours has to stay distinguishable — a status light, a warning, a chart series — check it survives here.
Input formats
Paste anything: #4f8df5, 4f8df5, #4f8df580,
rgb(79 141 245), hsl(218 90% 64%), hwb(218 31% 4%),
hsv(218 68% 96%), lab(59 8 -51), lch(59 51 279),
oklab(.65 -.02 -.14), oklch(65% .146 261),
color(display-p3 .35 .55 .94), color(srgb .31 .55 .96),
or a CSS name like rebeccapurple. Alpha after a slash works everywhere.