Color Converter

HEX (#RRGGBB)

#FF0000      red
#3b82f6      blue (Tailwind blue-500)
#FFF         shorthand for #FFFFFF (white)
#FF000080    8-digit with alpha (red 50% opacity)

Pros: Compact, copy-pasteable, universally supported. Cons: Hard to manipulate without conversion (can't easily darken or shift hue).

RGB / RGBA

rgb(255, 0, 0)            red
rgb(255 0 0)              modern space-separated syntax
rgba(255, 0, 0, 0.5)      red 50% opacity
rgb(255 0 0 / 50%)        modern syntax with alpha

Same color space as HEX, just different syntax. Useful for CSS animations where channels change independently.

HSL / HSLA

hsl(0, 100%, 50%)         red (hue 0 = red, saturation 100%, lightness 50%)
hsl(220, 80%, 50%)        vibrant blue
hsla(0, 100%, 50%, 0.5)   red 50% opacity

Pros: Easy to manipulate — bump saturation to 60%, decrease lightness by 10% for darker variant. Cons: "Lightness" is mathematical, not perceptual — yellow at 50% L is brighter than blue at 50% L.

OKLCH (modern default)

oklch(0.6 0.2 30)         orange (lightness 0.6, chroma 0.2, hue 30)
oklch(60% 50% 250)        percentage syntax for L and C
oklch(0.6 0.2 30 / 50%)   with alpha

Pros: Perceptually uniform — colors at same L look equally bright. Easy to generate accessible palettes algorithmically. Supports wide gamut (P3, Rec2020). Cons: Newer — IE/old browsers don't support; numeric values feel less intuitive than HEX.

1. Perceptual uniformity

In HSL, hsl(60, 100%, 50%) (yellow) looks much brighter than hsl(240, 100%, 50%) (blue) — both have 50% lightness mathematically, but our eyes see them as completely different brightnesses. OKLCH fixes this: oklch(0.7 0.15 60) and oklch(0.7 0.15 240) appear visually equal in lightness.

2. Better gradient interpolation

linear-gradient(red, blue) in sRGB passes through muddy gray. linear-gradient(in oklch, red, blue) stays vibrant by interpolating in perceptual space. Tailwind v4, Radix Colors, and most modern design systems use OKLCH gradients by default.

3. Wider color gamut

Modern displays (iPhone, MacBook, OLED TVs) support P3 color space — about 25% wider than sRGB. OKLCH can express these colors. display-p3 and OKLCH together let you use the extra colors on supporting displays while gracefully falling back on sRGB.

4. Programmatic palette generation

With perceptually uniform lightness, you can generate a palette by varying L while holding C and H constant:

/* All blues with consistent perceived brightness */
--blue-50:  oklch(0.97 0.02 250);
--blue-100: oklch(0.94 0.04 250);
--blue-500: oklch(0.62 0.18 250);
--blue-900: oklch(0.30 0.10 250);

Try the same in HSL — it doesn't work as cleanly because HSL lightness isn't perceptually uniform.

5. Used by major design systems (2024+)

Tailwind v4 default colors, Radix Colors, Adobe Spectrum v2, Material You all use OKLCH internally for color generation. Apple's Human Interface Guidelines now show P3 colors. The industry has settled on OKLCH for the next decade of design tokens.

What color formats are supported?

HEX (#rgb, #rrggbb, #rrggbbaa), RGB (rgb(r, g, b) and rgb(r g b / a)), HSL (hsl(h, s%, l%)), OKLCH (oklch(L C H)), and CSS named colors (red, cornflowerblue, etc.).

Is OKLCH conversion accurate?

Yes — uses the standard OKLab transformation matrices (RFC-equivalent in CSS Color 4 spec). Some OKLCH values fall outside the sRGB gamut; in that case, the converted RGB/HEX is clamped to the nearest valid sRGB color. The preview swatch shows the rendered result so you can see gamut clamping.

What about CMYK and LAB?

CMYK (cyan, magenta, yellow, black) is for print only and isn't used in CSS. LAB (CSS Color 4) is similar to OKLCH but uses different math; OKLCH is generally preferred for CSS as the perceptual hue handling is better.

Why does my OKLCH gradient look different in different browsers?

Browsers implement OKLCH per spec, but display calibration varies. P3-display laptops show wider gamuts than older sRGB monitors. Test on multiple devices for production designs. Use HEX/RGB for exact pixel control if needed.

What's the difference between #FFF and #FFFFFF?

Both mean pure white. The 3-digit form is shorthand for each digit doubled — #F00 = #FF0000 (red), #3F8 = #33FF88. Only works when each pair has identical digits; arbitrary colors need 6 digits.