This guide will cover where color has been, where it is going, and how CSS will enable and support web developers to manage color. Display p3 has more vivid colors and the mixes result in black and white in the middle, where sRGB looks a bit desaturated and the mixes in the middle aren't black and white results. The bottom two color mixes are in display p3. The top two color mixes are in sRGB with sRGB colors. Where sRGB looks a bit desaturated and the mixes in the middle aren't complete black or white results. Display p3 has more vivid color and the mixes result in complete black and white in the middle. The following image shows some of the mixing upgrades. Now in CSS, we have LCH's 'perceptual lightness.' Preview for yourself: įurthermore, gradients and mixing get some upgrades: color space support, hue interpolation options, and less banding. For example, before now we had HSL and its 'lightness' channel, which was the best web developers had. In addition to more colors, arguably the most vivid colors the display is capable of, new color spaces provide unique tools and methods for managing and creating color systems.

Also, think about all those gradients that banded because there wasn't enough bit-depth, that's resolved too. In supporting browsers, there's 50% more colors to pick from! You thought 16 million colors sounded like a lot, wait until you see how many colors some of these new spaces can show. A series of images are shown transitioning between wide and narrow color gamuts, illustrating color vividness and its effects. This guide will explain how you can start to take advantage of this new world of color. CSS can now support HD (high definition) displays, specifying colors from HD gamuts while also offering color spaces with specializations. Thank CSS Color Level 4 for helping us escape this trap written primarily by Lea Verou and Chris Liley.įrom Chrome 111 is support for CSS Color 4 gamuts and color spaces, joining Safari who's had support for display-p3 since 2016. Trapped, only showing 30% of the colors the human eye can see.

If CSS never updated, it would be stuck in the 90s color ranges forever, forced never to match the wide gamut offerings found in images and video. The current color formats have no language for wide color ranges. Īs displays become more capable of showing a wide range of colors, CSS needs a way to specify colors from within these wider ranges. We've grown very accustomed to specifying colors within this gamut. It is the most common color gamut capability amongst displays a common denominator. For over 25 years, sRGB (standard red green blue) has been the only color gamut for CSS gradients and colors, with color space offerings within it like rgb(), hsl() and hex.

Css color code list pdf