Migrate HSL colors to perceptually uniform OKLCH — instantly, 100% local
Paste any HSL color and instantly get the OKLCH equivalent for use in modern CSS. OKLCH is the successor to HSL in CSS Color Level 4, offering perceptually uniform lightness and access to the full P3 color gamut. No upload, no account, everything runs in your browser.
Need HEX ↔ RGB ↔ HSL ↔ OKLCH all at once?
Open the full Color Converter →HSL was designed for simplicity, not perceptual accuracy. A yellow at hsl(60, 100%, 50%) looks far brighter than a blue at hsl(240, 100%, 50%), even though they share the same lightness value. OKLCH solves this by mapping colors to a perceptually uniform space: colors at the same L value look equally bright to the human eye. This is critical for building accessible color scales, automatic dark-mode pairs, and design tokens that work consistently across the full palette.
HSL's lightness is not perceptual — a yellow at L=50% looks much brighter than a blue at L=50%. OKLCH's lightness is perceptual: all colors at L=0.7 look equally bright. This makes automatically generating accessible text contrasts and tonal palettes predictable and reliable.
L (Lightness) ranges 0–1 (black to white). C (Chroma) is color intensity, typically 0–0.37 for sRGB colors. H (Hue) is the angle in degrees on the color wheel, 0–360.
Yes. oklch() is available in Chrome 111+, Firefox 113+, Safari 15.4+, Edge 111+. It covers over 95% of global browser usage as of 2025.
No. Both HSL and OKLCH represent the same sRGB color space — OKLCH just provides a different coordinate system. The underlying color is identical. Minor floating-point rounding may occur but is visually undetectable.