Easy color shades with Figma tokens

An exploratory journey around shadow creation, HSL color space, and how to build dynamic Figma tokens.

There are certain things I always took for granted.

Color shades, for example, are something I never bothered to create by hand or to understand in detail. I would pick an online tool or plugin, configure some beziers or ratios, and experiment with a few value tweaks here and there, and boom!

Now, at a time when I work much more frequently on dark-themed products, which tend to be more demanding on shades, I often find myself manually post-tweaking these platform-generated tones. The problem is that either I don't remember the settings I used before or I don’t remember the platform I used to generate my shades.

If tomorrow one of my fellow designers has the need to add a new color to the blue scale, it is essential that they understand the system rationale and are able to apply it and consistently generate new shades. For this reason, I decided to explore a systematic manual process for creating shades.

The color system choice: HSL

While RGB makes me feel too much like an artist, HSL gives me a simple way to understand and mix the different parts.

Let’s see:
HSL stands for Hue, Saturation, and Luminosity.

Hue establishes a link between a wavelength value from the visible light spectrum and a name. For example, position 200 in the spectrum was named “blue”.

From end to end of the spectrum there are 360 steps, each falling on a conventionalized name: blue, green, yellow, turquoise, etc.

Saturation refers to the intensity and purity of a color. The more gray is mixed with my Hue, the paler the result will be. There are only 100 steps in Saturation.

Luminosity, similar to saturation, is the degree of lightness or darkness, in practice white or black, being added to a Hue. There are only 100 steps in Luminosity.

Great! We now understand HSL.

Define a base color

Let’s start by choosing a random Hue: 200. This Hue falls in the conventionalized name “Blue”. This Hue won’t change for any of my shades, so we won’t talk about it again.

My shades will be created by playing with Saturation and Luminosity.

For defining my base color, I will choose the maximum Saturation (100) and an intermediate Luminosity (50). This is the sweet spot before the Hue gets too much black or too much white.

The result:

Lovely!

Who doesn’t love a good chart?!

The way I found to be able to visually adjust my shades development, was by using a simple chart.

We will start by checking the impact of saturation values. In the example below, we experiment with building shades in 100%, 50%, and 25% saturation. Luminosity is evenly spread by around 11%, starting at 5% and ending at 95%. 0% and 100% luminosity would throw us to black and white.

Note: There is no need to be “religious” about taking the values from the axis. An approximate value is sufficient.

Evenly spaced luminosity with constant saturation value.

I can use differently shaped paths to describe my saturation gradation, rather than using a constant saturation value for all shades while keeping the same brightness increments. The only rule here is, again, that the shades are generated sistematically.

What is important is that anyone can understand the rationale behind shade creation.

Now, something that I’ve noticed works better for interfaces, is when the contrast difference between the shades in the two groups, dark and light, is minimal.

A way of achieving this is to limit the range of the shades to be generated. This means that now, instead of 5% to 50% and 50% to 95%, I would work with 5% to 25% and 75% to 95%, for example.

Ranges for light and dark reduced for smaller luminosity increments

Can we get to tokens now?!

Now for the fun part, the tokens.

Let us choose one of the color schemes from above.

In this chart, I can notice that my base color has much more saturation than the shades. There is nothing wrong with that.

My saturation values are, in order, from left to right:
44%, 55%, 63%, 68%, 100%, 68%, 63%, 55%, 44%.

My Luminosity values are, in the same order:
5%, 12%, 18%, 25%, 50%, 75%, 82%, 89%, 95%.

Here’s the plan:

1. Create my Hues as a color token. For this example, I created Mars, Saturn, and Jupiter. Instead of adding a Hex, RGB, or HSL color, I just defined a hue value for each: 100, 200, and 300.

2. Go to the section “Other” and create 5 tokens for saturation and 9 for luminosity. The reason why there are only 5 for saturation is that they repeat themselves (44%, 55%, 63%, 68%, 100%, 68%, 63%, 55%, 44%).

3. Go back to the colors and let's create our first set of shades. To be faster, I use the editor and copy/paste my mars.100 color ten times. Then I edit the saturation and luminosity tokens' names. Note how from saturation.500 we start going down again as previously mentioned.

4. To build the remaining ones, it's easier if you go on editor mode, copy the required piece of code and easily swap the hue name. In the video, you can also see how easy it is now to tweak saturation or luminosity values and refine all shades at once.

Follow me, more on Design Tokens and Design Systems to come!