Color Adjustment
sRGB
OKLCHoklch(0.7 0.15 180)
OKLABoklab(0.7 -0.1 0.05)
LCHlch(70 20 180)
RGBrgb(43, 181, 160)
HSLhsl(172, 62%, 44%)
CSSoklch(0.7 0.15 180)
CSS Color 4 Color Space · OKLCH/OKLAB/LCH/LAB/RGB/HSL Conversion · Wide Gamut P3
The OKLCH Color Picker is a modern color tool based on the CSS Color 4 specification, supporting real-time conversion between OKLCH, OKLAB, LCH, LAB, RGB, and HSL color spaces. OKLCH is a perceptually uniform color space introduced in CSS Color 4, offering more natural lightness perception and more uniform chroma distribution compared to traditional HSL.
1. Drag the L/C/H sliders to adjust the color, or enter a HEX value and click "Apply" to convert
2. The color preview area shows the current color in real-time, with a gamut indicator showing the color's gamut range
3. Click any color value to copy it, or click "Copy CSS" to get the oklch() code
4. The palette section shows hue/lightness/chroma variations — click a swatch to select it directly
Frontend Developers: Use OKLCH in CSS for perceptually uniform color systems and smoother gradients. The relative color syntax (oklch(from var(--base) l c calc(h + 60))) makes color scheme generation more concise.
UI Designers: Leverage OKLCH's perceptual uniformity to create accessible color schemes where different hues at the same lightness are visually consistent, meeting WCAG contrast requirements.
Wide Gamut Content Creators: On P3-capable displays, OKLCH can represent colors more vivid than sRGB, fully utilizing hardware display capabilities.
OKLCH is based on the OKLAB color space proposed by Björn Ottosson in 2020. OKLAB improves upon CIELAB's hue shift issues, achieving better perceptual uniformity. OKLCH is the polar form of OKLAB: L = lightness (0-1), C = chroma (0-0.4+), H = hue (0-360°). The CSS Color 4 specification was officially recommended by W3C in 2022, with all major browsers supporting the oklch() function from 2023 onwards.
OKLCH is a new color space introduced in CSS Color 4, based on the OKLAB model. L represents perceptual lightness (0-1), C represents chroma (saturation), and H represents hue angle (0-360). Compared to HSL, OKLCH lightness better matches human perception and chroma is uniformly distributed.
OKLCH's L channel is perceptually uniform while HSL's is not. OKLCH's chroma gives consistent visual saturation across hues. OKLCH supports wide gamut (P3/Rec2020) while HSL is limited to sRGB. OKLCH gradients are smoother without gray midpoints.
Chrome 111+, Firefox 113+, Safari 15.4+, and Edge 111+ all support OKLCH. Since 2024, all major browsers support the CSS Color 4 specification.
When OKLCH's chroma (C) value exceeds approximately 0.15, colors may be outside sRGB gamut and enter P3 or Rec2020 wide gamut. On wide gamut displays these colors appear more vivid; on standard displays, the browser maps to the nearest sRGB color.
Use the oklch() function: background: oklch(0.7 0.15 180). Add transparency: oklch(0.7 0.15 180 / 0.5). Recommended: relative color syntax oklch(from var(--base) l c calc(h + 60)).