Generating color palettes with code

Most monitors use the sRGB color spectrum, which basically means they can represent a limited subset of the colors we can see in real life.

When you see an hexadecimal color (like #FF0000) or a CSS color value (like rgb(100,0,0)), you are seeing the representation of a color inside the sRGB spectrum, the color scheme used by the browser. These are instructions that the browser sends to your screen to render a color, by adding light from red, green and blue LEDs (each pixel contains these three colors, that combined can achieve white).

There are many ways to represent sRGB colors, the most common one is the hexadecimal notation, which works by setting a value for Red, Green and Blue.

Although the resulting hexadecimal value is a short string, which makes it convenient to share and store, this method for choosing colors is not particularly intuitive for humans. We don't often think about colors as the addition of other colors. To have a better mental model, HSL was created.

Hue, saturation, luminosity

As an alternative to rgb(), hsl() is a CSS function used to express any hexadecimal color. It's called HSL because it receives three arguments: Hue, Saturation and Luminosity.

This function allows for more intuitive ways to tweak its values. For example, we can set a fixed value for hue and saturation, and increment lightness by 10%, from 0 to 100 (11 steps in total), to get a palette of any color.

This is the result of going from hsl(0, 0%, 0%) to hsl(0, 0%, 100%), by steps of 10%. Since the saturation is 0, this will get a palette of grays.

But because we don't want to only use grays, let's see how to obtain colors using hsl().

Generating color palettes

Given all we've discovered so far, we could try to create palettes dynamically using the arguments of the hsl() function.

Here we have an implementation of the gray palette using for-loops in Sass.

1
.palette.gray {
2
  $hue: 0;
3
  $saturation: 0%;
4
  @for $i from 0 through 10 {
5
    .step:nth-child(#{$i + 1}) {
6
      background-color: hsl($hue, $saturation, $i * 10%);
7
    }
8
  }
9
}

The result looks like this:

We can also use JSX to express this color palette, with a component like this:

1
export const ColorPalette = ({ hue = 0, saturation = 100 }) => {
2
  return (
3
    <div style={{ display: "grid", gridTemplateRows: "repeat(11, 1fr)" }}>
4
      {[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map((lightness) => (
5
        <div
6
          key={lightness}
7
          style={{
8
            backgroundColor: `hsl(${hue}, ${saturation}%, ${lightness}%)`,
9
            aspectRatio: "1 / 1",
10
          }}
11
        />
12
      ))}
13
    </div>
14
  );
15
};

This component can then be used like this:

<ColorPalette hue={325} saturation={90} />

Let's go ahead and generate a palette for different hues, by using our ColorPalette component multiple times in the following way:

1
<ColorPalette hue={0} />
2
<ColorPalette hue={60} />
3
<ColorPalette hue={180} />
4
<ColorPalette hue={230} />
5
<ColorPalette hue={270} />

You might think this is a good method to generate color palettes for graphic design or the web. After all, the result we got surely must be a harmonic color palette... right? Well, as we can see, not so much. We have inconsistencies all around!

And let's not even look into start changing saturation, because that value tends to be misleading as well!

Therefore, this method to generate palettes is not reliable. You do not want to use colors generated this way to generate button variants, or any other piece of UI where legibility and consistency is important.

The problem with HSL

Let's look again at the sRGB spectrum inside the "shoe-shaped" figure (this "shoe shape" is actually a representation of the CIE XYZ color space, a color space that takes into account psychological perception).

Well, as we can see in the graphic, clearly not.

If we only consider "the amount of power the LED pixel is using", we could say the screen is using, for both cases, 50% and 75% of it's full capacity.

But if we compare this output with a model that takes into account psychological perception, we can see that the screen is limited when representing certain colors, which causes distortions in the results of HSL.

Luckily, smarter people have come up with solutions and alternatives to deal with color in code. We'll explore one of them, HSLuv.

HSLuv:
The human-friendly alternative to HSL

HSLuv is a color space designed for perceptual uniformity.

It's based on the CIELUV color space, created in 1976 based on experiments that tried to "marry" the distributions of color wavelengths with the psychologically perceived colors in human vision.

Which basically means that HSLuv makes it easy to reason about color.

It is commonly used for:

1. Generating colors for statistical graphics and data visualization software.
2. Generating themes, like this neat code syntax highlighter theme generator.
3. Build color palettes with consistent contrast ratios, like the one created for Polaris, Shopify's design system.

HSLuv has dozens of open-source implementations for different programming languages. The JavaScript implementation has a tiny footprint in bundle size (2kb) and a very simple API.

1
import hsluv from "hsluv";
2

3
// Convert hsluv to hex
4
hsluv.hsluvToHex([hue, saturation, lightness]);
5

6
// Convert hex to hsluv
7
hsluv.hexToHsluv(hex);

Once we have a HSLuv value, changing it's lightness, even across different hues, will produce somewhat uniform results.

Let's look at an implementation of the ColorPalette component using HSLuv. To achieve this, we only need to make a small change in line 8.

1
export const ColorPalette = ({ hue = 0, saturation = 100 }) => {
2
  return (
3
    <div style={{ display: "grid", gridTemplateRows: "repeat(11, 1fr)" }}>
4
      {[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map((lightness) => (
5
        <div
6
          key={lightness}
7
          style={{
8
            backgroundColor: hsluv.hsluvToHex([hue, saturation, lightness]),
9
            aspectRatio: "1 / 1",
10
          }}
11
        />
12
      ))}
13
    </div>
14
  );
15
};

Let's try to generate the same palettes as before, and compare the results.

The code:

1
<ColorPalette hue={0} />
2
<ColorPalette hue={60} />
3
<ColorPalette hue={180} />
4
<ColorPalette hue={230} />
5
<ColorPalette hue={270} />

HSL implementation (for reference):

HSLuv implementation:

You might notice that colors outputted by this method look more uniform.

Let's look for example at the red color: it looks like magenta in HSLuv.

The Hue for red in HSL might not necessarily have the same value in HSLuv. Since HSLuv makes some corrections in the Hue dimension to achieve uniformity, we need adjustments to get the same red as with HSL.

HSL can easily be converted to hexadecimal (for example, red is #ff0000) and we can convert that value to HSLuv using this function:

hsluv.hexToHsluv("#ff0000");
// [12.177050630061776, 100.0000000000022, 53.23711559542933]

As we can see, HSLuv needs a value of 12 for hue to show red. (Technically, 12.1770..., but we will round it up). So, let's paint the palette again after making this adjustments for all the colors...

HSL implementation (for reference):

HSLuv implementation:

And voilà.

As you can see, the HSLuv implementation is much better at keeping consistency and preserving contrast for different colors.

Still, according to personal preference, some optical adjustments might be needed. For example, HSLuv tends to remove too much saturation and makes some colors look dull.

For some scenarios, it might make sense to sacrifice some uniformity in the contrast dimension in pro of having more saturated colors. This tradeoff might make sense for some cases and not for others, so it's impossible for a fully automated tool to make this kind of judgments.

Side-note: alternative color models

As a side-note, HSLuv is not the only color space that achieves perceptual uniformity. Although it's results are good enough for changes in luminosity only, if you also want to make gradient changes in Hue or Saturation, other color spaces are better-suited.

In particular, CIECAM02-UCS performs much better for this use cases (thanks Nate Baldwin for pointing this out). If you want to try it out, there's a D3 module to work with this color appearance model, and the Leonardo Color library (a tool specifically created to generate color palettes) uses this model by default.

Other alternative tools like Chroma.js can be used to generate palettes using alternative models like LAB, LCH, CMYK, etc. Some of this models work better for certain scenarios.

For this article, I sticked with HSLuv for some simple reasons:

1. Minimal bundle-size. It's 2kb of JS in total, vs. ~14kb for Chroma.js and ~88kb for Leonardo Color. (Source: bundle-phobia)
2. "Good enough" results. I tested the palettes we generated in the article with all three tools. The differences where almost unnoticeable. (Again, this can change if you're changing other dimensions besides luminosity or trying different things. For example, I found Chroma.js has better APIs than HSLuv to create gradients between colors, and Leonardo Color is the only tool that takes into account the psychological effect that the background color has in the perception of the foreground color).
3. Simple API. No need to understand different color spaces or concepts like interpolation. Or any other technical knowledge besides the basics, for that matter.

Again, there are always tradeoffs. If you don't need to generate color palettes dynamically, I recommend you to check the Leonardo Color web UI. It uses the CIECAM02 color space by default, which produces some nice gradients between colors.

Conclusion

Links of interest:

• HSLuve Figma plugin displays an HSLuv color selector inside Figma.
• Chromatic Figma plugin fix gradients to achieve perceptual uniformity. Supports HSLuv (search for "Lab" color mode when using the "Fix gradient" option).
• postcss-plugin-hsluv brings HSLuv to PostCSS.
• hsluv-sass brings HSLuv to Sass
• hsluv-stylus brings HSLuv to Stylus
• Chroma.js documentation
• Leonardo Color npm package
• Leonardo Color web UI
• huey "rapid color palettes accross the rainbow" (select "Lab" color scaling mode for a result similar to the one from HSLuv)