What Are Oklch Colors?
18 days ago
- #OKLCH
- #color-models
- #web-design
- OKLCH is a perceptually uniform color model, making colors more accurate to human perception.
- Color models like RGB, HSL, LCH, and OKLCH describe colors differently, affecting ease of manipulation.
- Gamut defines possible colors within a model, with sRGB and Display-P3 being common examples.
- OKLCH uses Lightness, Chroma, and Hue, similar to LCH but based on the OKLab color space.
- Lightness ranges from 0 to 1 (or 0% to 100%), Chroma controls intensity, and Hue is measured in degrees (0-360).
- OKLCH simplifies creating uniform color palettes by adjusting only Hue or Lightness without hue/saturation drift.
- Gradients in OKLCH follow Lightness, Chroma, and Hue, avoiding muddy midpoints seen in sRGB.
- OKLCH supports colors beyond sRGB, like those in Display-P3, with fallbacks for unsupported displays.
- Maximum chroma ensures colors fit within a display's gamut, preventing unwanted clipping.
- OKLCH is supported in modern browsers, with fallback options using @supports in CSS.
- A tool called oklch.fyi helps generate OKLCH palettes and convert existing CSS variables.