High definition CSS color guide

CSS Color 4 brings wide gamut color tools and capabilities to the web: more colors, manipulation functions, and better gradients.

Adam Argyle

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. It is the most common color gamut capability amongst displays; a common denominator. We've grown accustomed to specifying colors within it.

As displays become more capable of showing a wide range of colors, CSS needs a way to specify colors from within these wider ranges. The current color formats have no language for wide color ranges.

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. Trapped, only showing 30% of the colors the human eye can see. Thank CSS Color Level 4 for helping us escape, written primarily by Lea Verou and Chris Liley.

Chrome supports CSS Color 4 gamuts and color spaces. CSS can now support HD (high definition) displays, specifying colors from HD gamuts while also offering color spaces with specializations.

This guide has three parts. Read on to remember where color has been. Then, read where color is going and how to manage color in future by migrating to HD color.

Overview

In supported browsers, there's 50% more colors to pick from. If you thought 16 million colors sounded like a lot, wait until you see how many colors some of these new spaces can show. Also, think about all those gradients that banded because there wasn't enough bit-depth, that's resolved too.

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. For example, before now we had HSL and its "lightness" channel, which was the best web developers had. Now in CSS, we have LCH's "perceptual lightness."

Furthermore, gradients and mixing get some upgrades: color space support, hue interpolation options, and less banding.

The following image shows some of the mixing upgrades.

The problem with color and the web is that CSS is not high definition ready, while the displays most folks have in their pockets, laps or mounted on walls are wide gamut, high definition color ready. The color capability of displays grew faster than CSS, now CSS is here to catch up.

There's much more than just "more colors." By the end of these documents, you'll be able to specify more colors, enhance gradients, and pick the best color spaces and color gamuts for each task.

What is a color gamut?

A gamut represents the size of something. The phrase "millions of colors" is a comment about the gamut of a display, or the range of colors it has to choose from. In the following image, three gamuts are compared, and the larger the size the more colors it offers.

A color gamut can also have a name. Like a basketball versus a baseball or a vente coffee cup versus a grande; a name for the size can help people communicate. Learning these color gamut names helps you communicate and quickly understand a range of colors.

This article reviews the previous color gamuts. You can read about the seven new gamuts in Access more colors and new spaces.

Human visual gamut

Color gamuts are often compared against the human visual gamut ; the entirety of color we believe the human eye can see. HVS is often portrayed with a chromaticity diagram, like this:

The outermost shape is what we can see as humans, and the inner triangle is the rgb() functions range, aka the sRGB color space.

As you saw triangles above, comparing gamut sizes, so will you find triangles below. This is the industry's way of communicating about color gamuts and comparing them.

What is a color space?

Color spaces are arrangements of a gamut, establishing a shape and a method of accessing colors. Many are simple 3D shapes like cubes or cylinders. This color arrangement determines which colors are next to each other, and how accessing and interpolating colors will work.

RGB is like a rectangular color space, where colors are accessed by specifying coordinates on 3 axes. HSL is a cylindrical color space, where colors are accessed with a hue angle and coordinates on 2 axes

The level 4 specification introduces 12 new color spaces for looking up colors. These are in addition to the 4 color spaces previously available:

• Hex
• RGB
• HSL
• HWB

Color gamut and color space summary

A color space is a mapping of colors where a color gamut is a range of colors. Consider a color gamut as a total of particles and a color space as a bottle made to hold that range of particles.

Here's an interactive visual by Alexey Ardov that demonstrates color spaces. Point, drag, and zoom around in this demo. Change the color space to see a visualization of other spaces.

• Use color gamuts to talk about a range of colors, like low range or narrow gamut versus high range or wide gamut.
• Use color spaces to talk about arrangements of color, syntax used to specify a color, manipulate color and interpolate through color.

A review of the classic color spaces {#classic-color-spaces}

CSS Color 4 outlines a bunch of new features and tools for CSS and color. First, a recap of where color was before these new features.

Since the 2000s, you have been able to use the following for any CSS properties that accept a color as a value: hexadecimal (hex numbers), rgb(), rgba(), by name like hotpink, or with keywords like currentColor.

Around 2010, depending on your browser, CSS could use hsl() colors. Then in 2017, hex with alpha appeared. Last, only recently, hwb() started getting support in browsers.

All of these classic color spaces reference color within the same gamut, sRGB.

HEX

The hex colorspace specifies R, G, B and A with hexadecimal numbers. The following code examples show all the ways this syntax can specify red, green and blue plus opacity.

.valid-css-hex-colors {
  /* classic */
  --3-digits: #49b;
  --6-digits: #4499bb;

  /* hex with opacity */
  --4-digits-opaque: #f9bf;
  --8-digits-opaque: #ff99bbff;
  --4-digits-with-opacity: #49b8;
  --8-digits-with-opacity: #4499bb88;
}

RGB