CSS Color Module Level 4

I recently wrote about CSS variables, which is a feature that we have previously only had available to us in preprocessors. Preprocessors have also given us color functions, allowing us to manipulate colours—lighten, darken, saturate, mix colours, etc. It's very useful when specifying a colour scheme for a site. Sometimes we want to generate a colour that is close to another colour, but slightly different like this:


/*sass color function*/
darken( $base-color, 10% )
lighten( $base-color, 10% )

Recently I discovered that the CSS Color Module Level 4 is in W3C working draft. It'll allow us to apply a number of adjusters to color properties in CSS natively, without preprocessors.


.container {
/*Add a bit more green*/
background-color: color-mod(#70bc53 green(227));
}

We often set a base colour with a variable and use a slightly modified version of that colour elsewhere. What's exciting is that one day we may not need a preprocessor for any of this! We already have CSS variables. Soon we may have colour functions in CSS.


:root {
   --base-color: #937b19;
}
.container {
   color: color-mod(var(--base-color) hue(359));
}

You can also adjust multiple parts of a colour in the same function.


.container {
   color: color-mod(#70bc53 hue(359) saturation(48%) lightness(49%) tint(37%)
}

There are many properties of colour that can be adjusted with the colour function. Including: 

  • alpha
  • hue
  • saturation
  • lightness
  • tint
  • shade
  • red
  • green
  • blue
  • whiteness
  • blackness
  • contrast

Browser support

It's in draft and not supported by any browsers yet, so we can't go crazy just yet. It can be used with the cssnext plugin suite for PostCSS.

If you want to experiment with it and visualise the colour function, check out https://colorme.io/.

Note that the naming and syntax of the color function is still in flux. color-mod was previously known as just color. Color Me is still using color, so don't be alarmed!