We are currently experiencing exciting developments in the realm of color. With advanced high-definition color spaces like LCH, OKLCH, LAB, and OKLAB, we now have access to 50% more colors available in modern browsers, which may soon render the traditional RGB and HSL formats obsolete.
To help you become familiar with these new color spaces, it’s important to note that both OKLCH and OKLAB are based on human perception and can accurately represent any color visible to the human eye. OKLAB is particularly effective for creating rich gradients, while OKLCH is an excellent choice for developing color palettes in design systems. Notably, OKCLH and OKLAB colors are fully supported in Chrome, Edge, Safari, Firefox, and Opera.
- sRGB is no longer the best color space
The sRGB color space covers only 30% of the colors that the human eye can perceive. Color definitions in RGB and HSL are limited to sRGB. However, we now have the option to use the display-p3 color space, which encompasses 50% more colors. - OKLCH and OKLAB are based on human perception
In HSL, lightness and saturation each range from 0% to 100%, but this does not align well with how our eyes perceive light. OKLCH considers these specifics, making colors appear more authentic to our perception. - Understanding the OKLCH Syntax
OKLCH stands for Lightness, Chroma, and Hue (LCH). The syntax for OKLCH is structured as oklch(100% 0.37 330 deg). Lightness ranges from 0% to 100%, while Chroma is a value between 0 and 0.37, indicating the color’s intensity. Most hues would set the upper limit for Chroma at 0.187. - Differences in Hue Values
The hue values in OKLCH differ from those in HSL, as all hues have been shifted by approximately 30 degrees due to perceptual differences. This means that lightness cannot be translated 1:1 from HSL to OKLCH. - Optimizing Gradients with OKLAB
OKLAB is tailored for superior image processing quality and serves as the default color space for animations and interpolations. It is particularly effective for creating perceptually consistent gradients and has a high dynamic range. - Using OKLCH for Design Systems
OKLCH is ideal for developing color palettes in design systems. Similar to HSL, you can create shades of colors by adjusting the color intensity. Unlike RGB, there is no need for guesswork, and the syntax is more readable and user-friendly. - Comprehensive Color Specification
With OKLCH and OKLAB in the display-p3 color space, we can define any color our eyes can perceive. Colors that fall outside of the supported range are rounded to the nearest available color. - Browser Support for OKLCH/OKLAB
OKLCH and OKLAB are fully supported in modern browsers, including Chrome, Edge, Safari, Firefox, and Opera. Feature queries in CSS can be used to target browsers that support these color spaces, while providing fallbacks for those that do not.
Currently, OKLCH and OKLAB colors are not available in Figma, but when they are, we will experience a transformative approach to using color on the web.
