Color Format Converter
Paste a color in any notation and get every other one, plus the Tailwind v4 @theme block using OKLCH. Values that fall outside the sRGB gamut are flagged rather than silently clipped.
Paste any notation, including CSS color names.
Formats
HEX
#6366F1
RGB
rgb(99 102 241)
HSL
hsl(238.7 83.5% 66.7%)
OKLCH
oklch(58.54% 0.2041 277.12)
Perceptually uniform — what Tailwind v4 uses.
Tailwind v4
CSS-first theme block, using OKLCH like v4 does by default.
@theme {
--color-brand: oklch(58.54% 0.2041 277.12);
}Frequently asked
Why does Tailwind v4 use OKLCH?
OKLCH is perceptually uniform: raising lightness by the same amount looks like the same step to the eye, whatever the hue. In HSL it does not — yellow at 50% lightness looks far brighter than blue at 50%. That makes OKLCH much better for generating scales where every step feels evenly spaced.
What does the gamut warning mean?
OKLCH can describe colors more saturated than an sRGB screen can show. When that happens the HEX, RGB and HSL rows are clipped to the nearest displayable color, while the OKLCH value stays exact. On a wide-gamut display the original may still render correctly through color(display-p3 …).
Which notations can I paste?
Hex (3, 4, 6 or 8 digits), rgb(), rgba(), hsl(), hsla(), oklch() and CSS color names like rebeccapurple.
Are the OKLCH numbers accurate?
The conversion follows the CSS Color 4 matrices and is checked against the reference values for white, black, red, green and blue, plus a round-trip test that returns the original RGB unchanged.