How to Build a Grayscale Color Palette

If you wanted to be 100% mathematical and consistently even about crafting a grayscale color palette, you could create the colors in a math-friendly color function like HSL, like so:

hsl(0 0% 0%);
hsl(0 0% 10%);
hsl(0 0% 20%);
hsl(0 0% 30%);
hsl(0 0% 40%);
hsl(0 0% 50%);
hsl(0 0% 60%);
hsl(0 0% 70%);
hsl(0 0% 80%);
hsl(0 0% 90%);
hsl(0 0% 100%);

Here’s an example of using those colors as backgrounds:

If you wanted to DRY that up in SCSS, you could do something like:

@for $i from 0 through 10 {
  div:nth-child(#{$i}) {
    background: hsl(0 0 ($i * 10%));

In actuality, you’d probably run that loop just to create variables dynamically then use those variables. We could do that as Sass variables, but you could adapt the above to do that if you wish. Let’s move on to something more useful.

CSS Custom Properties are probably the way to go with color variables, so maybe you’d do:

@for $i from 0 through 10 {
  html {
    --color-#{$i}: hsl(0 0% #{$i * 10%});
  div:nth-child(#{$i}) {
    background: var(--color-#{$i});

That duplicates a bunch of html selectors, but whatever, text compression is good and browsers are fast. Refactor as you please.

If you wanted to sprinkle in a little hue, like have all your grays be just a little green too, because that’s so hot hot hot right now, you could just dial the hue where you want it and turn the saturation up a tiny smidge…

hsl(85 3% 0%)
hsl(85 3% 10%)
hsl(85 3% 20%)

For good measure, RGB makes gray colors when all three of the thingers are the same. So you could do like:

rgb(0 0 0)
rgb(25 25 25)
rgb(50 50 50)
rgb(75 75 75)

I don’t know how you’d mess with Hue in that world, but here’s gray-only anyway:

Here’s the thing though: I don’t think any of that is all that useful really.

A “real world” grayscale system probably…

  • … has more than 10 steps, but not, like, too many more or else you might as well just set whatever damn color you want.
  • … has groupings of lightnesses. They probably aren’t all exactly equidistant.
  • … is probably crafted from my mind and skill of an actual designer who isn’t doing things entirely mathematically, but instead dances through the colors tweaking things to suit the feel of the task at hand.

Tools that are maybe more useful

Grayscale design is a nice tool that checks off some of my boxes for a better grayscale palette:

  1. As many/few values as you want.
  2. Adjust the positions to make groupings as needed. Each value doesn’t have to be equidistant. Allows you to add colors too to make hue variations or entire color-based palettes with the same math.

Color Designer is similar in how you can make as many steps as you want, has a neat feature where the steps are between any two colors, and can interpolate in new-school color spaces like LCH and LAB.

Primer Prism is very cool, and probably my favorite, in how it visualizes the hue, lightness, and saturation. Clearly, lightness changes dramatically, but it’s a great look to make saturation dip in the middle and change hue ever so slightly in each step 😍. That’s the kind of choice a talented designer might make and it’s so interesting to see it visually expressed like this, with the ability to tweak.

One response to “How to Build a Grayscale Color Palette”

  1. Enrico says:

    for several reasons I really love this, it’s great

Leave a Reply

Your email address will not be published.