What Are Modern CSS Color Spaces?
CSS Color Level 4 introduces several new color spaces beyond the traditional sRGB. OKLCH and OKLab provide perceptually uniform color manipulation, meaning equal numerical changes produce equal perceived color shifts. Display P3 enables wider-gamut colors on modern displays. HWB (Hue, Whiteness, Blackness) offers an intuitive alternative to HSL. This tool converts a single color input into all these representations with ready-to-use CSS syntax.
How to Use This Color Space Explorer
- 1Enter a HEX color using the color picker or text input.
- 2View the color converted into 8 different color spaces.
- 3Click Copy CSS next to any format to copy the CSS-ready value.
- 4Use OKLCH values for perceptually uniform color palettes in modern CSS.
Common Use Cases
Modern CSS Design
Use OKLCH for creating perceptually uniform color palettes in CSS.
Wide-Gamut Color Work
Convert sRGB colors to Display P3 for richer colors on supported screens.
Color Science Education
Understand how the same color is represented across different color models.
Frequently asked questions
What is the advantage of OKLCH over HSL?
OKLCH is perceptually uniform, meaning equal changes in lightness, chroma, or hue produce visually equal changes. HSL is not perceptually uniform, so two colors with the same HSL saturation can appear very different in perceived brightness.
Can browsers actually display Display P3 colors?
Yes, modern browsers on wide-gamut displays (most modern Macs, iPhones, and many newer monitors) can render Display P3 colors using CSS color() function.
What is OKLab vs OKLCH?
OKLab uses L (lightness), a (green-red axis), b (blue-yellow axis) — a Cartesian model. OKLCH uses L (lightness), C (chroma/saturation), H (hue angle) — a cylindrical model. OKLCH is more intuitive for picking colors.