Color Format Converter

HEX, RGB, and HSL — the classic web color formats

HEX (like #3b82f6) and RGB (like rgb(59 130 246)) describe the same thing: how much red, green, and blue light a screen mixes, each channel from 0 to 255. HEX is just RGB written in base-16 — two hex digits per channel — so converting hex to rgb is a direct translation: 3b = 59, 82 = 130, f6 = 246. An 8-digit hex code adds a fourth pair for alpha (opacity), where 80 ≈ 50% opacity.

HSL (hue, saturation, lightness) re-arranges the same sRGB colors into a wheel that is easier for humans to reason about: hue is an angle from 0–360° (0 red, 120 green, 240 blue), saturation is color intensity, and lightness runs from black (0%) to white (100%). HWB (hue, whiteness, blackness) is a newer variant that models how painters mix a pure hue with white and black. CMYK (cyan, magenta, yellow, key/black) is a subtractive model used for print — expect shifts, since printable CMYK covers a smaller gamut than a screen.

Why OKLCH matters for modern CSS

HSL has a flaw: its lightness is not perceptually uniform. hsl(60 100% 50%) (yellow) looks far brighter than hsl(240 100% 50%) (blue) even though both claim 50% lightness. OKLCH — supported in all major browsers since 2023 — fixes this: its L channel matches human perception, so two colors with the same OKLCH lightness genuinely look equally bright. That makes it ideal for generating accessible palettes, consistent hover states, and dark-mode variants by shifting one channel at a time.

OKLCH is the polar (hue-angle) form of OKLAB, the same way LCH relates to CIE LAB. LAB and OKLAB place colors in a perceptual space with an L (lightness) axis plus two opponent axes: a (green ↔ red) and b (blue ↔ yellow). OKLCH can also address colors outside sRGB — wide-gamut Display-P3 colors on modern screens — which hex and rgb() cannot represent at all.

❓Color Converter FAQ