Color Converter
Paste any CSS color — get HEX, RGB, HSL and OKLCH, plus a live swatch and contrast check.
Which color format should you use?
HEX (#378ADD) is the compact web default and what design tools
hand you most often. RGB spells out the red, green and blue light mix and is
the format CSS animations and alpha variants build on. HSL describes the same
color as humans think about it — hue, saturation, lightness — which is why "same hue, 10%
darker" palettes are trivial in HSL and painful in HEX.
OKLCH is the perceptually uniform newcomer in CSS Color 4: equal numeric steps look like equal visual steps, and its chroma axis never pushes colors out of your display's gamut the way HSL saturation can. Modern design systems are moving their palettes to OKLCH for exactly those two reasons. This tool also shows each color's relative luminance and tells you whether black or white text has the better WCAG contrast on top of it — the quickest accessibility check there is.
FAQ
What inputs are accepted?
Hex in 3, 4, 6 or 8 digits, rgb()/rgba(), hsl()/hsla(), and the 148 named CSS colors such as rebeccapurple.
Is the OKLCH value CSS-ready?
Yes — copy the oklch(L% C H) line straight into a stylesheet. L is a percentage, C and H are plain numbers, which is the form browsers accept today.
Is anything uploaded?
No — all conversion math runs locally in your browser.