Generate colour themes with ease thanks to this SCSS mixin

In a recent web app project, I wanted to generate a bunch of colour themes quickly. The basic UI remains the same, and the navbars or buttons get a key colour. Depending on the key colour, the text should be either black or white to be legible. I have come across this problem many times in my career.

Before there were CSS preprocessors, I would find & replace colour values. Since SCSS, I can at least create variables like $button-text and $button-background. However, changing variables for a list of UI elements is still a lot of work if you need to generate fifty themes. Never mind if you want to blend a little of that key colour in your text colour to make the whole thing come together.

I am convinced that a lot of design work can benefit from some automation and this case is not different. Thanks to the science of colour theory, and the magic of SCSS mixins, it is fairly easy to do:

See the Pen KvYMdg by Xavier Bertels (@xavez) on CodePen.

The important part is the @mixin. If you send a colour through the mixin, it evaluates whether that colour needs to have white text or black text on it in order to be legible. It then blends a little of your input colour with the text colour for that neat designer finish. If you want to understand more about the math behind it, check out the Wikipedia article on relative luminance.

If this is useful to you, feel free to share this with other designers!