A Hotter Pink: CSS Gets an ‘Explosion’ of New Colors

Just as television dramatically moved from black-and-white to color pictures in the 1950s and 1960s, so too are Cascading Style Sheets (CSS) going through a similar revolution. Everyone’s favorite stylesheet language is getting a range of new features that will allow developers and designers work with a far wider, and more nuanced, set of colors.

“Color is exploding with features in 2022. We have new color spaces, more colors, built-in color manipulation, and auto contrast functions,” noted Adam Argyle, Google’s Chrome CSS Developer advocate, in a “State of CSS” video talk prepared for Google I/O earlier this month.

Many of these features are currently only supported by the development releases of most browsers. But over time, they should be available across the board.

More Color Spaces

Perhaps most importantly, the new CSS color options are no longer dependent on the standard sRGB (standard red, green, and blue) spectrum, a color space designed by Microsoft and HP for PCs that developers relied on for the past 25 years to choose colors. Now 10 new color spaces are supported, all with a wider range of colors.

For instance, one color space, display-p3 offers 50% percent more colors, almost all of them already supported by modern laptops, TVs and smartphones.

The idea is that developers can now use more vivid colors, the kind that are already supported in Adobe Photoshop, for instance. These colors, however, will be rendered by the browser itself, directly on the page.

“You thought you were picking hot pink in your color picker. But if you change the color space you’re picking from,” you can get a much more vivid pink for your design, Argyle notes.

Different color spaces divide up their respective spectrums in different ways, offering new gradients that can be easier to work with. based on math, sRGB has a lot of “dead zones” of uninteresting, muddy colors, whereas lch() and Lab() offer fuller gradients, consisting of all the colors humans can see. Currently, the Safari browser supports both of these. Here is the syntax for the “hot pink” color in lch:

#lch {
rad-pink: lch(50% 200 230);
}

In lch, the first number, the “CIE Lightness” represents the lightness of the color (l), from black at 0 to white at 100. The second value, the chroma (c), is the amount of color, and the third value, is the hue (h). The CIE lightness here is 50% based on a perceptual, rather than mathematical, color space, with no muddy dead zones.

The CSS Media query provides a way to query the browser to see if HD colors are accepted and the CSS Support query checks to see if the browser supports the color space.

Although way to generate colors is through the adjustment of hues.

HWB() can compose a color based on its balance of hue, whiteness and blackness. “It’s an internationally humanistic way of thinking about color,” Argyle said. In the demo below, Argyle showed five swatches with the same hue, but with varying ratios of white and black.

Auto-Generated Colors

You can also mix colors of the fly, with the new color-mix(). This bit of functional notation mixes two colors in a color space of your choice (by default in lch). You can also specify by percentage how dominant the color is in the mix. The color-contrast() element actually has the browser pick appropriate colors for a web page, based on the pre-selected thematic hues. It can even mix them to an AA contrast ratio needed to meet accessibility standards. The idea is that will “automate good contrast,” for accessibility and branding.

The Relative-Color syntax is another way the browser can help with branding and accessibility efforts. It can extract new colors from existing colors, Argyle said. This is also great for consistent branding, where all the colors must coordinate with the brand colors, Argyle pointed out. “It gives me the power to create perceptually linear palettes with very, very little code,” Argyle noted.

CSS will also be offering many new gradients, or the rules of how colors blend into one another. Today, gradient manipulation is only available for sRGB, though a set of new controls for picking gradients for other color spaces will soon be available. Different color spaces will display different interim colors moving across the gradient.

👁 Image

A background color, in the HSL color space, that fades from black to white, would be rendered like this:

background-image: linear-gradient(
 to right in HSL,
 black, white
);

Fonts themselves also get some more color. The new Colrv1 fonts — supported by all browsers except Firefox — allows the developer to add gradients, compositing and blending to font definitions. “This could be a huge win for icon fonts,” Argyle said.

Color changes can also be made to checkboxes and other elements of a webpage. The accent-color property allows you to tint built-in elements, which can be used to thematically cohere a webpage with a lot more nuance. “Bring your brand color to your forms with one line of CSS, and the browser will ensure that there’s proper contrast between your color and the checkboxes and the tracks,” Argyle said. Accent colors can be applied to an entire website, or to just selected elements. It can also be used to adjust a webpage to the user’s preference of light or dark modes.

For a full rundown, check the whole presentation here: