Oklab

What is Oklab?

Web color has evolved significantly from the early days of hex codes and RGB values. The Oklab color space represents a major advancement in how we specify and manipulate colors on the web, offering perceptually uniform results that align with how the human eye actually perceives color differences.

Oklab is a perceptually uniform color space designed by Björn Ottosson in 2020 specifically for image processing and color manipulation tasks. Unlike traditional color spaces like RGB or HSL, Oklab is engineered so that equal changes in color values produce approximately equal perceived changes in visual appearance.

For modern web development projects requiring sophisticated color systems, Oklab provides the mathematical foundation for predictable, human-centered color choices that enhance user experience across diverse displays and lighting conditions.

CSS oklab() Syntax

Absolute Value Syntax

The basic syntax for specifying an Oklab color directly:

oklab(L a b[ / A])

Example usage:

/* Mid-tone with slight warm shift */
.element {
 color: oklab(40.1% 0.1143 0.045);
}

/* Lighter color */
.highlight {
 background: oklab(59.69% 0.1007 0.1191);
}

/* Same color with 50% opacity */
.overlay {
 background: oklab(59.69% 0.1007 0.1191 / 0.5);
}

/* Using percentage for opacity */
.translucent {
 background: oklab(59.69% 0.1007 0.1191 / 50%);
}

Relative Color Syntax

The relative color syntax allows deriving new colors from existing colors, enabling sophisticated color manipulations:

oklab(from <origin-color> L a b[ / A])

Example usage:

/* Green at 50% opacity */
.semi-transparent {
 color: oklab(from green l a b / 0.5);
}

/* Lightened variant */
.lightened {
 color: oklab(from #123456 calc(l + 0.1) a b);
}

/* Modified HSL origin */
.adjusted {
 color: oklab(from hsl(180 100% 50%) calc(l - 0.1) a b);
}

The browser converts the origin color to Oklab internally and exposes the channel values (l, a, b, alpha) as variables you can manipulate with calc() and other CSS math functions.

Browser Support and Compatibility

The oklab() function is part of CSS Color Level 4 and has achieved broad browser support:

Feature Detection

Use CSS @supports to detect Oklab support:

@supports (color: oklab(0 0 0)) {
 /* Oklab is supported */
 .gradient-element {
 background: linear-gradient(
 in oklab,
 oklab(from red l a b),
 oklab(from blue l a b)
 );
 }
}

Progressive Enhancement

For projects supporting older browsers, use a fallback strategy:

.button {
 /* Fallback for older browsers */
 background: #6366f1;
 
 /* Oklab for modern browsers */
 @supports (color: oklab(0 0 0)) {
 background: oklab(45% 0.12 0.05);
 }
}

Best Practices for Using Oklab

1. Choose the Right Color Space for the Task

• Oklab: Perceptual operations, gradients, color relationships, design systems
• RGB: Device output, image processing, performance-critical rendering
• HSL: Simple adjustments, quick prototyping, familiar color wheels

2. Start with Perceptual Tools

Use color pickers designed for Oklab/LCH to find base colors that are perceptually balanced. Many modern design tools now support these color spaces.

3. Leverage Relative Syntax

Build color systems that derive from base tokens rather than hardcoding values:

/* Good: Derived from base token */
--surface-elevated: oklab(from var(--surface-base) calc(l + 0.05) a b);

/* Avoid: Hardcoded values */
--surface-elevated: oklab(52% 0.02 0.03);

4. Test with Real Content

Verify color relationships across actual use cases, not just isolated swatches. Perceptual uniformity matters most when colors interact.

5. Consider Contrast Requirements

Use Oklab modifications for color development but always verify WCAG compliance with actual color combinations using tools like contrast checkers.

6. Document Your Color System

Maintain documentation that explains the Oklab values and their intended perceptual properties, making it easier for team members to extend the system correctly.

For teams implementing Oklab, following established design principles ensures color decisions align with overall project goals while maintaining accessibility standards.

Conclusion

Oklab represents a significant advancement in web color specification, offering developers and designers a perceptually uniform color space that produces consistent, predictable results. From creating smooth gradients to building comprehensive design systems, Oklab provides the foundation for color work that aligns with human perception.

The combination of Oklab's mathematical properties and CSS's relative color syntax creates powerful capabilities for color manipulation that were previously difficult or impossible to achieve. As browser support continues to expand and design tools adopt these standards, Oklab is poised to become an essential tool in every web developer's toolkit.

Start experimenting with Oklab in your projects today, using feature detection for progressive enhancement, and discover the difference perceptually uniform color can make in your designs.

Need help implementing Oklab and modern CSS color techniques in your project? Our web development team specializes in cutting-edge CSS implementations that enhance both aesthetics and performance.

Sources

• MDN Web Docs - oklab()
• Björn Ottosson - A perceptual color space for image processing
• Chrome for Developers - CSS relative color syntax
• CSS Color Module Level 4 - W3C Specification