Colour magic with Sass
The influence that colours have upon us is profound, though frequently we don’t recognise it. It can mean the difference between a customer completing your check-out process, or not.
The process of selecting and implementing a colour pallette for a design is arguably one of the most difficult tasks a designer faces. Fortunately, the ‘art’ of colour is far more science than art. By relying on colour theory it’s possible to spin out a palette of harmonious, complementary and aesthetically pleasing colours from a single colour choice. Online tools, like Adobe’s Kuler, provide an easy-to-use interface that allows you to easily experiment with various colour schemes.
Your colour choices may be the deciding factor in the subconscious process by which a visitor decides to trust, or not trust, your brand. It’s that important.
My process used to involve several hours messing around in Kuler tweaking settings and switching schemes, before finally going with either the basic complementary or triadic schemes. I now go immediately to these first, because they always work.
Sassy palettes please
Now I know that this is the case, and since I’ve switched toSass, my color scheming process can now be automated. Generating colour palettes, and indeed any other colour manipulation process, with Sass is laughably easy. I simply declare my ‘Brand colour’ variable and use that to generate the colour variables I need, like this:
// Brand palette
$brand-color: rgb(52, 73, 94);
// Return the complementary colour to $brand-color
$complement-color: adjust_hue($brand-color, 180);
// Triadic color scheme from $brand-color ? Go!
$secondary-color: adjust_hue($brand-color, 120);
$tertiary-color: adjust_hue($brand-color, -120);
With this in place I can simply redefine the value of $brand-color to change my entire colour scheme site-wide. By hanging all my other colour choices from these variables I can keep my stylesheets flexible, maintainable and re-usable.
Within the same variables.scss I can then go on to declare other colour choices by referencing the variables generated for my colour pallette, like so:
// Link colours.
$link-color: $complement-color;
$link-color-hover: lighten($link-color, 10%);
My links now automagically complement my primary colour choice, which I might use in the banner or footer for example, perfectly. Importantly, I need only to change the value of $brand-color to change all the colours in my design.
Experiment with colour
The above example is only the tip of the iceberg. I’ve touched only on adjust-hue() there’s plenty more ways to manipulate colour with Sass. If you want to learn more about manipulating colours with Sass then Sass & Compass Color Functions is a great comprehensive resource. Not certain about the syntax or how to combine multiple functions? Check out SassMe.
If you want to learn more about the fundamentals of colour theory and the application of colour in web design I highly recommend Mark Boulton’s brilliant book Designing for the web. It’s a book that every web designer should own.
