10Creating Themes with Advanced Colors

Making and altering a color palette for a site can be a pain. Going into hex charts to find a slightly lighter color can feel like stabbing around in the dark.

Thankfully, Sass comes with a wealth of functions to make manipulating color more precise. There’s lighten and darken, and saturate and desaturate; and there’s a whole bunch more in Appendix 1, SassScript Function Reference.

There are many books on color theory that can explain relationships, but we’ll go over some handy functions here. For example, complement($color) is a function that returns the complementary color for the input you specify.

The desaturate($color, $amount) function allows you to create more neutral tones from a primary ...

Get Pragmatic Guide to Sass 3 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.