Calculating Colour Tones Using Hex Values

For most of my career I’ve been using my eye and gradually improving aesthetic taste for building colour palettes for interfaces. I’d check for sufficient contrast and compare my colour choices to those made by some of my favourite interface designers.

But it always bothered me how unstructured and approximate my colour selections would be, amounting to not much more than manually selecting a colour in the Sketch colour panel. Trying it out and experimenting.

My first reaction was to find the best book on the subject, which led me to the “Interaction of color” by Josef Albers, which my then housemate and talented product designer Steven Fabre, promptly borrowed for months on end.

Until today, I didn’t really go any further with applying a logical and structured approach to constructing a set of tones based on a specific colour. Being aware of Google’s Material Design colour palette I knew that it must be possible to choose tones on more than just a mouse click in a colour panel.

So today it occurred to me to investigate how I could go about easily creating a set of evenly distributed tones on any colour I wanted, in Sketch.

A brief chat with a front-developer coworker, Kieran McDonald, introduced me to the anatomy of Hex values which I am ashamed to say I had never bothered to attempt to understand. At least low level understanding became crucial to achieving my goal.

Here’s the important stuff:

  • In the Hex code, each pair of digits represents a primary colour, first red, then green, then blue
  • Digits represent anything from 1 to 16, where 0 is equal to 1 and letters ‘a’ to ‘f’ are used after 9
  • In case you didn’t know, absolute black is #000000 and at the opposite end, white is #ffffff

We eventually came across a Smashing magazine article which demonstrated exactly what I was trying to do. Here’s the example, and you can read the article here it does go lot more in-depth.

What is demonstrated in the example (ignoring the far left tone for a second) is that by increasing the first digit of each colour pairing by 1, we achieve a lighter tone. As these digits increase, more white is added as you get closer to “f” or white.

Combining our new-found understanding (potentially that is, I bow down to you if you already knew how Hex codes worked) of how to count in Hex digits, 0–9 then a-f, we can use the method displayed in Smashing Magazine’s illustration above and experiment with increasing or decreasing a base colour’s tone by any increment we want.

Which in effect is like being able to drag my mouse vertically in the Sketch colour picker with unwavering and robot-like accuracy.

Here’s something I prepared earlier where I increased each tone by 2, in the first digit of each pairing.

Hope this helps take come of the guesswork out of your next interface colour palette and satisfies your craving for logic and perfection in everything you do.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.