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

Adam Argyle

Forover 25 years,sRGB(standard red green blue) has been the only colorgamut for CSS gradients and colors, with color spaceofferings within it likergb(),hsl() and hex. It is the most common colorgamut capability amongst displays; a common denominator. We've grownaccustomed to specifying colors within it.

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

If CSS never updated, it would be stuck in the 90s color ranges forever, forcednever to match the wide gamut offerings found in images and video.Trapped, only showing30% of the colors the human eye can see.Thank CSSColor Level 4 for helping us escape,written primarily byLea Verou andChris Liley.

Chrome supportsCSS Color 4 gamuts andcolor spaces. CSS can now supportHD (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,readwhere color is going andhow to manage color in future bymigrating to HD color.

Overview

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

In addition to more colors, arguablythe most vivid colors the display is capable of,new color spaces provide unique tools and methods for managing and creatingcolor 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, hueinterpolation 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 wallsare wide gamut, high definition color ready. The color capability of displaysgrew 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 bestcolor 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 acomment about the gamut of a display, or the range of colors it has to choosefrom. In the following image, three gamuts are compared, and the larger the sizethe more colors it offers.

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

This article reviews the previous color gamuts. You can read about theseven new gamuts inAccess more colors and new spaces.

Human visual gamut

Color gamuts are often compared against thehuman visual gamut ; the entirety ofcolor we believe the human eye can see. HVS is often portrayed with achromaticity diagram, like this:

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

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

What is a color space?

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

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

The level 4 specification introduces 12new color spaces for looking up colors. These are in addition to the 4 colorspaces 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 bottlemade to hold that range of particles.

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

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

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

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

Since the 2000s, you have been able to use the following for any CSS propertiesthat accept a color as a value: hexadecimal (hex numbers),rgb(),rgba(), byname likehotpink, or with keywords likecurrentColor.

Around 2010, depending on your browser, CSS could usehsl() colors. Then in 2017,hex with alpha appeared. Last, onlyrecently,hwb() started gettingsupport 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 withhexadecimal numbers. The followingcode examples show all the ways this syntax can specify red, green and blue plusopacity.

.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

The RGB color space features direct access to the red, green and blue channels.It allows specifying an amount between 0 and 255 or as a percentage 0 to 100.This syntax was around before some syntax normalization was in thespecifications, so you'll see comma and no-comma syntaxes in the wild. Movingforward, commas are no longer required.

.valid-css-rgb-colors{--classic:rgb(64,149,191);--modern:rgb(64149191);--percents:rgb(25%58%75%);--classic-with-opacity-percent:rgba(64,149,191,50%);--classic-with-opacity-decimal:rgba(64,149,191,.5);--modern-with-opacity-percent:rgb(64149191/50%);--modern-with-opacity-decimal:rgb(64149191/.5);--percents-with-opacity-percent:rgb(25%58%75%/50%);--percents-with-opacity-decimal:rgb(25%58%75%/.5);--empty-channels:rgb(nonenonenone);}

HSL

One of the first color spaces to orient itself towards human language andcommunication, HSL (hue saturation and lightness) offers all the colors in thesRGB gamut while not requiring your brain to know how red, green and blueinteract. Like RGB, it also originally had commas in the syntax, but movingforward, commas are no longer required.

.valid-css-hsl-colors{--classic:hsl(200deg,50%,50%);--modern:hsl(20050%50%);--classic-with-opacity-percent:hsla(200deg,50%,50%,50%);--classic-with-opacity-decimal:hsla(200deg,50%,50%,.5);--modern-with-opacity-percent:hsl(20050%50%/50%);--modern-with-opacity-decimal:hsl(20050%50%/.5);/* hueless and no saturation */--empty-channels-white:hsl(nonenone100%);--empty-channels-black:hsl(nonenone0%);}

HWB

Another sRGB gamut color space oriented at how humans describe color is HWB(hue, whiteness, blackness). Authors can choose a hue and mix in white or blackto find their desired color.

.valid-css-hwb-colors{--modern:hwb(200deg25%25%);--modern2:hwb(20025%25%);--modern-with-opacity-percent:hwb(20025%25%/50%);--modern-with-opacity-decimal:hwb(20025%25%/.5);/* hueless and no saturation */--empty-channels-white:hwb(none100%none);--empty-channels-black:hwb(nonenone100%);}

Next steps

Read about thenew color spaces, syntaxes and tools,then learn how tomigrate to HD color.

Non-sRGB color spaces on the web are in their early days, but we'll seean increase in usage from designers and developers over time. Knowing whichcolor space to build a design system on, for example, is a strong tool to be ina creators toolbelt. Each color space offers unique features and a reason it wasadded to the CSS specification, and it's ok to start small with these and addas needed.

Resources

Read more of our color level 5 articles.

• CSS relative color syntax
• CSS color-mix

And, you can find additional reading across the web:

• CSS Color Module Level 4 from W3C

• CSS Color Module Level 5 from W3C

• LCH colors in CSS: what, why, and how?

• Better than Lab? Gamut reduction: CIE Lab & OKLab

• Towards richer colors on the Web

• Okhsv and Okhsl: Two new color spaces for color picking

• Towards richer colors in Chromium (PDF)

• LCH is the best color space!

• Designing accessible color systems

• Color Spaces, by Hannah Weller

• Wide Gamut Color in CSS with Display-P3

• CIE 1931 color space

• Color Formats in CSS

• Color Spaces by Bartosz Ciechanowski

And tools:

• afc163.github.io/color3d/
• Gamut visualization
• Vivid gradient generator