Click to learn more
OKLCH is a modern color format that stands for OK Lightness, Chroma, and Hue. OKLCH color provides better perceptual uniformity than RGB or HSL, making it ideal for creating accessible, consistent color palettes in CSS and design tools. It's part of the CSS Color Level 4 specification and offers superior color manipulation capabilities for modern web development.
What does OKLCH stand for? OKLCH stands for OK Lightness, Chroma, and Hue. If you're wondering "what is OKLCH" or "OKLCH what is it", it's a cylindrical representation of the Oklab color space designed to be perceptually uniform - meaning that numerical changes in color values correspond to similar visual changes that humans actually perceive.
OKLCH color format represents a significant advancement over traditional color spaces like RGB, HSL, and HEX, making it easier for designers and developers to work with consistent, accessible colors in modern web design.
From 0% (black) to 100% (white)
Color intensity/saturation
Color wheel position (0-360°)
Changes in OKLCH values correspond to how humans actually perceive color differences, making it easier to create harmonious color palettes.
OKLCH makes it easier to ensure sufficient contrast ratios and create accessible color combinations for users with different visual needs.
Color manipulations like lightening, darkening, or adjusting saturation produce more predictable and visually pleasing results.
OKLCH is part of the CSS Color Level 4 specification and is increasingly supported by modern browsers and design tools.
OKLCH in CSS provides a modern way to define colors with better perceptual accuracy. Here's how to use OKLCH color format in your stylesheets:
Good news! OKLCH browser support is excellent in modern browsers. You can confidently use OKLCH in production with appropriate fallbacks.
Coverage: OKLCH is supported by approximately 85%+ of global users as of June 2025, making it safe to implement with fallbacks for legacy browsers.
Detailed version support for OKLCH across all major browsers:
TailwindCSS v4 started using OKLCH color format for themes instead of previous HSL color format. Now the colors you see in your theme variables in index.css are in OKLCH format.
Always provide fallbacks for older browsers that don't support OKLCH:
Now that you understand what OKLCH is and why use OKLCH over traditional color formats, here are practical tips for implementing OKLCH in your projects:
Start with Lightness
Adjust the L value first to get the right brightness level
Control Chroma for Intensity
Higher chroma values create more vibrant colors
Use Hue for Color Relationships
Complementary colors are 180° apart on the hue wheel