Css media

CSS gets an “explosion” of new colors – The New Stack

Just as television dramatically shifted from black-and-white to color images in the 1950s and 1960s, Cascading Style Sheets (CSS) are also experiencing a similar revolution. Everyone’s favorite stylesheet language gets a range of new features that will allow developers and designers to work with a much 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,” Google Chrome CSS Developer Advocate Adam Argyle noted in a video conference call. “State of CSS” prepared for Google I/O earlier this month.

Most of these features are currently only supported by development versions of most browsers. But over time they should be available at all levels.

More color spaces

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

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

The idea is that developers can now use more vibrant colors, those that are already supported in Adobe Photoshop, for example. However, these colors will be rendered by the browser itself, directly on the page.

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

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

In lch, the first number, the “CIE Lightness” represents the brightness 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 queries the browser to see if HD colors are accepted and the CSS Support query checks if the browser supports the color space.

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

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

Five swatches with the same hue setting, but different portions of black and white.

Automatically generated colors

You can also mix fly colors, with the new color-mix(). This little piece of functional notation mixes two colors into a color space of your choice (defaults to lch). You can also specify the color cast in the mix as a percentage. The color-contrast() element allows the browser to choose the appropriate colors for a web page, based on pre-selected theme hues. It can even mix them to an AA contrast ratio needed to meet accessibility standards. The idea is that it will “automate good contrast”, for accessibility and branding.

The Relative-Color syntax is another way the browser can help with customization and accessibility efforts. It can extract new colors from existing colors, Argyle said. It’s also great for cohesive branding, where all colors should coordinate with 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 feature many new gradients, or the rules for blending colors into each other. Currently, gradient manipulation is only available for sRGB, although a set of new commands for selecting gradients for other color spaces will be available soon. Different color spaces will show different intermediate colors moving across the gradient.

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

The fonts themselves also get a bit more color. The new Colrv1 fonts, supported by all browsers except Firefox, allow the developer to add gradients, builds and blends 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 on a webpage. The accent-color property allows you to tint built-in elements, which can be used to give thematic consistency to a web page with many more nuances. “Bring your brand color to your forms with a single line of CSS, and the browser will make sure there’s good contrast between your color and the checkboxes and tracks,” Argyle said. Accent colors can be applied to an entire website or to selected elements only. It can also be used to adjust a web page to the user’s preferences for light or dark modes.

For a full overview, check out the full presentation here: