Unlocking the Power of CSS Colors
For years, developers relied on predefined color keywords and obscure HEX values to select and apply colors in CSS. However, as CSS evolved, more user-friendly and flexible alternatives emerged, such as RGB and HSL functions. The introduction of the alpha channel allowed for transparency control, and opacity was initially specified using a separate color function, rgba(). In this article, we’ll explore the new color specification methods available with CSS Color Module Level 5.
New Color Functions and Improvements
CSS Color Module Level 5 introduces several new color functions and improvements, including:
- LCH (Lightness, Chroma, Hue): provides access to approximately 50% more colors than traditional RGB.
- HWB (Hue, Whiteness, Blackness): similar to HSL, but with whiteness and blackness parameters.
- LAB (CIELAB): represents colors in a way that closely matches human perception.
- color-mix: returns the result of two colors mixed in specified percentages.
- color-contrast: helps developers build accessible websites by comparing color contrast.
- color: allows the browser to display colors in any color space.
- accent-color: changes the color of accented form controls.
Exploring the New Color Functions
HWB (Hue, Whiteness, Blackness)
HWB is a color specification method similar to HSL. The hue argument can be any number between 0 and 360, and it refers to a specific color on the color wheel. Whiteness and blackness parameters range from 0 to 100%.
css
hwb(0 20% 40%) /* hue: 0, whiteness: 20%, blackness: 40% */
LAB (CIELAB)
LAB color functions are based on the CIELAB color space, which represents colors in a way that closely matches human perception. The L in LAB indicates lightness, while A and B are chromaticity coordinates.
css
lab(29.567% 68.298 -112.0294) /* lightness: 29.567%, A: 68.298, B: -112.0294 */
LCH (Lightness, Chroma, Hue)
LCH is a color space that provides access to approximately 50% more colors than traditional RGB. The L in LCH indicates lightness, while C is chroma, and H is hue.
css
lch(50% 100 0) /* lightness: 50%, chroma: 100, hue: 0 */
color-mix
The color-mix function returns the result of two colors mixed in specified percentages.
css
color-mix(in lch, purple 50%, plum 50%) /* mix 50% purple and 50% plum in LCH color space */
color-contrast
The color-contrast function helps developers build accessible websites by comparing color contrast.
css
color-contrast(#fff vs #000, #ccc, #aaa) /* compare contrast of #fff and #000, #ccc, #aaa */
color
The color function allows the browser to display colors in any color space.
css
color(display-p3 1 0 0) /* display color in display-p3 color space */
accent-color
The accent-color property changes the color of accented form controls.
css
accent-color: #f00; /* change accent color to #f00 */
Browser Support
Some of the new color functions and improvements are still considered experimental and may not have full browser support. Here’s a summary of current browser support:
| Feature | Chrome | Firefox | Safari |
| — | — | — | — |
| LCH | | | |
| HWB | | | |
| LAB | | | |
| color-mix | | | |
| color-contrast | | | |
| color | | | |
| accent-color | | | |
Conclusion
The new CSS color features provide a wider range of colors and more flexibility for developers. While some features are still experimental, they promise to revolutionize the way we represent colors on the web.