Modifying CSS Colors with the color() function

11 June 2015 on

For the past few days, I've been using cssnext to create stylesheets. One of my favorite features is the new color() function defined in the CSS Color Module Level 4.

While extremely powerful when used in combination with CSS Variables, the color() function is still very useful even without them.

The color() function takes a color and can apply several "color modifier" or "color adjusters" to modify the given color.

A small example before we dig deeper:

body {
  background-color: color(#ffffff blackness(+ 5%));
}

This takes the white color #ffffff and adds 5% "blackness", this is equivalent to:

body {
  background-color: rgb(243, 243, 243);
}

You may use the color() function everywhere a CSS color value is expected, from font color to background gradients, everything is supported.

A slightly more complex example using gradients:

#color-example {
  background: linear-gradient(to right, white, color(blue blend(lime 50%)), black);
}

As you can see, with the color function you now only need to define your base colors and can derive from them by using any "color adjuster" you want. This also leads to more comprehensible stylesheets and less "magic" colors (similar to magic numbers) which are based upon any base-color.

RGBA Adjuster

[red( | green( | blue( | alpha( | a(] ['+' | '-']? [ | ] )
[red( | green( | blue( | alpha( | a(] *  )

With an operator, adjust the red, blue, green or alpha channels of the base color. Without an operator, set the red, blue, green or alpha channels of the base color.

rgb( ['+' | '-']? [ | ]{3} )
rgb( ['+' | '-']  )

Adjusts the base color in the red, green, and blue channels simultaneously.

Note: The rgb() function don't seem to be working using cssnext yet, but I might be doing something wrong.

HSL/HWB Adjuster

[hue( | h(] ['+' | '-' | *]?  )

Similar to the red(), green() etc. functions for colors the hue() function sets or adjusts the hue of the base color.

[saturation( | s(] ['+' | '-' | *]?  )
[lightness( | l(] ['+' | '-' | *]?  )
[whiteness( | w(] ['+' | '-' | *]?  )
[blackness( | b(] ['+' | '-' | *]?  )

Sets or adjusts the saturation, lightness, whiteness, or blackness of the base color.

Blending Adjuster

To make colors simply lighter or darker, the tint() and shade() are the easiest way to achieve this. They work the same as blending either white or black.

tint(  )

Mixes the base color with white.

shade(  )

Mixes the base color with black.

blend(   [rgb | hsl | hwb]? )
blenda(   [rgb | hsl | hwb]? )

blend() and blenda() mix the base color with the given color.

The only difference between blenda() and blend() is, that blenda() respects the alpha channel of both colors (while blend() only preserves the alpha channel of the base color).

Contrast Adjuster

contrast( ? )

Finds a color that contrasts with the base color sufficiently to satisfy accessibility guidelines, using the definition of "contrast" given by the WCAG 2.0 Guideline 1.4.3.

Browser support

While I don't know any browser which supports the color(), it can be easily compiled by cssnext and Myth.