HSL ↔ RGB ↔ HEX ↔ OKLCH Color Converter

Modern CSS gives you six or more ways to express a color: hex, rgb(), hsl(), hwb(), oklch(), oklab(). Each has tradeoffs (perceptual uniformity, readability, browser support). This converter shows your color in every format simultaneously — pick the one that fits.

Inputs (edit any)

Preview

How to use the HSL ↔ RGB ↔ HEX ↔ OKLCH Color Converter

Use the color picker, or edit any of HEX / RGB / HSL fields — the others recalculate live. HWB, OKLCH, and OKLAB are computed and shown read-only (input formats are less standardized to parse robustly).

About HSL ↔ RGB ↔ HEX ↔ OKLCH Color Converter

Color models in CSS:

  • Hex (#RRGGBB) — most common; compact; not perceptually uniform.
  • RGB — same gamut as hex but as decimal; rgb(255 0 0 / 50%) with alpha.
  • HSL (Hue, Saturation, Lightness) — easier to reason about for designers; not perceptually uniform (HSL "lightness" of green is much brighter than HSL "lightness" of blue).
  • HWB (Hue, Whiteness, Blackness) — alternative artist-friendly model; same hue as HSL.
  • OKLCH (Lightness, Chroma, Hue) — perceptually uniform; introduced in CSS Color 4 (2024). The new recommended format for design systems.
  • OKLAB — same color space as OKLCH but in Cartesian (L, a, b) form. Better for math (interpolation, contrast calculation).

Why OKLCH matters: in HSL, going from hsl(0 100% 50%) (red) to hsl(120 100% 50%) (green) creates a visible brightness shift because HSL "lightness" 50% means different things at different hues. In OKLCH, the L coordinate truly represents perceived lightness — going from oklch(60% 0.2 30) to oklch(60% 0.2 130) stays at the same perceived brightness. This makes OKLCH the right choice for designing color scales, gradients, and accessibility-checked palettes.

Common use cases

  • Migrating to OKLCH-based design systems — see your existing hex / HSL colors in the new format.
  • Building gradients — interpolating in OKLCH gives smoother results than in RGB.
  • Tweaking lightness consistently — adjust L in OKLCH without shifting hue.
  • Copy-paste between tools — Figma uses HSL, design tokens often use HEX, modern CSS uses OKLCH — converter saves time.