Hex to RGB / HSL / OKLCH converter

Format reference

• Hex (#RRGGBB) — six hexadecimal digits, two each for red, green, and blue. Most common in CSS and design tools. Optional 3-digit shorthand (#RGB) doubles each digit.
• RGB (0–255) — three integers from 0 to 255 representing red, green, and blue intensity. Same color space as hex, just decimal instead of hexadecimal.
• HSL (Hue, Saturation, Lightness) — cylindrical-RGB representation. Hue is an angle 0°–360° around the color wheel; saturation is 0–100% (gray to vivid); lightness is 0–100% (black to white). Easier than RGB for picking related colors, but not perceptually uniform — equal L values can look quite different in brightness.
• OKLCH (Lightness, Chroma, Hue) — modern perceptually-uniform color space designed by Björn Ottosson (2020). L (0–100%) tracks perceived brightness so equal L values look equally bright; C is chroma (saturation, unbounded but typically 0–0.4 for in-gamut sRGB colors); H is hue in degrees. Used in CSS Color Module 4 and internally by Tailwind v4 for color manipulation.

Why OKLCH matters

For tasks like generating a palette of evenly-spaced colors or building a tonal scale (lightness 10, 20, 30, …), HSL fails subtly: a yellow at 50% lightness looks much brighter than a blue at 50% lightness because the underlying RGB-cylindrical model doesn't account for the human eye's sensitivity. OKLCH fixes this — equal L values produce equally-bright colors across all hues, so palettes and tonal scales behave the way you'd intuitively expect.