As elements are added to a stylesheet, keeping colours consistent throughout a project can be tricky. CSS functions are available to speed creation of colour variations and quickly implement changes when needed.

Some fundamentals

I recall web projects in the past whereby we started out with a colour palette provided by a designer where the colours were used for print and screen. The colours would show Pantones, CMYK, RGB and/or Hex. There was sometimes a conversation about whether colours should be provided as an RGB ie 255, 69, 0 for an orange colour, or whether to use the Hex as #FF4500

When I found out about SCSS I was delighted to be able to use nested CSS, which is now possible in CSS through browser improvements, and also creating base colours by using variables. This meant I could just use the variable value and if it changed it was amended in just one place.

For example:

$coloractive: rgb(216, 14, 68);

.active {

color: $coloractive;

}

So if I change anything in the variable $coloractive, the class .active will update too.

Using color-mix()

Having created some colour variables we can think about functionality within CSS that will make new colours without having to reach for a colour sampling tool, graphics program or calculator.

The syntax for color-mix is quite simple and needs 3 parameters to work:

color-mix( { color-space }, { color1 }, { color2 } )

For colour values can use variables, either in the SCSS format or in CSS.

$coloractive: rgb(216, 14, 68);

or

--coloractive: rgb(216, 14, 68);

Then find another colour to mix in:

–colordarker: rgb(0,0,0);

Which can be –colordarker: black;

So for a darker link color when hovered, for example, in CSS we could do:

:root {

--coloractive: rgb(216, 14, 68);

–colordarker: rgb(0,0,0);

}

a {

color: var(--coloractive);

}

a:hover {

color: color-mix( in srgb, –coloractive, –colordarker 50%);

}

In More Detail

There’s a few things to explain in the example. Firstly my editor seems to have replaced minus signs for hyphens which means the bit before “coloaractive” doesn’t work copying from this text.

This is a screenshot from my Developer Tools window:

You can see how the colours have been read. Don’t forget to wrap css values in the var() function.

If I change the percentage then it will make it more or less black.

And srgb means the colorspace. It’s parameter that tells the function how to interpolate colour. It’s more of a concept than I really want to go into here, so please, just take a look at this article https://developer.mozilla.org/en-US/blog/color-palettes-css-color-mix/#specifying_the_interpolation_color_space_in_color-mix and see how gamuts and colour spaces can be used within this function.

Conclusion

Like many of my first experiments in change text size or background colours in a web page, the best way to try things out is exactly that. Take a little bit of code and change some parameters. You soon see that changing values can bring about changes that save effort off the page, with the graphics programs, etc.

We started with the word palette, and that means a collection of colours in this instance. So try repeating the variables then applying them to css classes. Maybe use different header tags as examples and use some pseudo elements such as h1, h2, h3 to display the colours from your palette. Then change the second colour variable and see how that affects every element that uses it.

Happy experimenting.

Further reading

https://developer.mozilla.org/en-US/blog/color-palettes-css-color-mix/

https://una.im/color-mix-opacity/

https://www.smashingmagazine.com/2023/08/oklch-color-spaces-gamuts-css/