Mixing colours with just css

In the time when we relied heavily on Sass to make the CSS on our websites, making a colour just a little bit darker or lighter was a breeze.

It’s a bit more tricky with plain CSS until you realise this is possible.

You can declare a custom property’s value using any color type you want (hex, rgb, hsl, lch, even a keyword like pink) and then convert it on the fly to any other color type you want.

Making it possible to add opacity to a colour - or making a little lighter, more saturated… more accessible!

:root {
  --color: #fb0000;
}

.selector {
  /* can’t do this */
  background-color: rgb(var(--color) / 0.5);
  
  /* can do this */
  background-color: rgb(from var(--color) r g b / .5);
}

See Jim Nielsen’s blog for a better post about CSS relative colours. I’ve refered to it a few times now, it’s change the way I do my colours in websites.