Color Space Explorer — OKLCH, OKLab, P3 & More
Free online extended color space converter. Convert between HEX, RGB, HSL, HWB, OKLab, OKLCH, Linear sRGB, and Display P3 with CSS output. No sign-up required.
HEX
#3B82F6
#3b82f6
RGB
59, 130, 246
rgb(59 130 246)
HSL
217.2deg, 91.2%, 59.8%
hsl(217.2 91.2% 59.8%)
HWB
217.2deg, 23.1%, 3.5%
hwb(217.2 23.1% 3.5%)
OKLab
L=0.6231, a=-0.0332, b=-0.1851
oklab(62.31% -0.0332 -0.1851)
OKLCH
L=0.6231, C=0.1880, H=259.8deg
oklch(62.31% 0.1880 259.8)
Linear sRGB
0.0437, 0.2232, 0.9216
color(srgb-linear 0.0437 0.2232 0.9216)
Display P3 (est.)
0.2314, 0.5098, 0.9647
color(display-p3 0.2314 0.5098 0.9647)
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
- Enter a HEX color using the color picker or text input.
- View the color converted into 8 different color spaces.
- Click Copy CSS next to any format to copy the CSS-ready value.
- Use 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.
FAQ
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.