Color Schemes with Sass

Sass is awesome, no doubt. But one of the most interesting features in my opinion is the possibility of helping an user to choose its color scheme (just think of a customizable e-commerce web, whose users design their own website for selling their products). Usually, I’d recommend to visit websites such as Paletton (also known as Color Scheme Designer), a place where you can pick a color and combine it using different design criteria (adjacent and complimentary color, triad and tetrad) in order to get your color palette. But the customization through those websites can get tricky if you wish to use two colors, one main and one alternative.

In order to create a great palette for you, Sass can help you with its color functions: darken, lighten, invert, compliment, mix and more. Here’s an example of mine with two variables: $base & $alternative:

If you wish to learn more about this, I’d recommend you Katie Kurkoski’s CSSConf AU video and this post by Petr Tichy.

Leave a Reply

Your email address will not be published. Required fields are marked *