Oiling the Color Wheel with Jade + Sass

One of the things that I found the hardest when I started working with design was finding the right colors for the project. I actually thought that I didn’t have the talent or sensitivity needed to create a decent color palette.

One of my instructors at school once told me to “steal” other people’s palette using the Photoshop color picker because it would be easier and faster than creating my own from scratch.

- I didn’t want to create my own palletes anyway…

Later on, when I studied color theory I was surprised at the fact that choosing colors could involve mathematical calculations. In this article, I’ll walk you through some cool Sass functions to recreate the color wheel and create some color palettes that are automatically calculated from a single color value.

Our basic wheel structure

Let’s start with the markup for the wheel itself. I want it to have 3 rings of color, the middle ring will have the default hue values, the inner ring will have lighter versions of those hues or tints, and the outer ring will have darker versions of those hues, or shades.

So we have a div with the class .color-wheel that will wrap 3 lists:

One cool thing about using Jade, is that we can use loops to output html, preventing us from writing <li></li> 36 times in the example above.

Now we can think about the variables that we’ll need for our wheel. All the hues, tints and shades will be automatically calculated from a $main-color, and I guess we’ll also need to decide $how-dark and $how-light the tints and shades will be. Now, think of a really traditional color wheel, like this one by Boutet that has 12 color slots:

Claude Bautet, 1708

There are 360° in full circle, so dividing 360 by the 12 slots, we’ll get an $angle of 30° for each slot.

Inside the .color-wheel class, every div will have a border-radius: 50% and overflow: hidden, to make them look rounded.

To create the color slots, we’ll have a for loop, where each <li></li> will be a triangle that is going to be rotated the $new-angle of the original $angle * $i, considering that $i is a counter from the original position.

Now we have a full wheel, but all the slots have the same color. So we’ll also need a $new-color variable that will also rotate the hue from the $main-color to a $new-angle every time the loop runs.

We can also update our code to darken and lighten the $new-color of the outer and inner rings of the wheel, using the $how-dark and $how-light variables.

Including a Protractor

I find it useful to see how many degrees from the origin a color has to turn to become something else, and as we have already created a for loop that does that, we can create another one that inserts the $i as the content of a pseudo-element :after, for each <li></li>.

Woo-hoo! Our basic structure is done! You can play around with the values of the $main-color and $how-dark or $how-light now :)

Creating Color Harmonies

In color theory, there are some formulas to create eye-catching color schemes. In the image below, you can see some of these formulas in action:

To create that with Sass, we can manipulate the $main-color, rotating the hue to different angles. To get complementary colors, for example, we'd rotate the $main-color 180°. Or, to create a square color scheme, we can rotate each color 90° from the previous one.

That's all, folks

Thanks for reading this far, you can play around with the full working example in the codepen bellow. Feel free to comment and let me know if you think I could improve this article somehow.

Would you like to know a little more about how we create great digital products and change people’s lives? Visit our website!