Programmatically generating color palettes

Siddharth - Jun 7 '21 - - Dev Community

You may have seen color palettes like the Material Palette or the tailwind colors. Well, I wanted to know how these were generated and wanted to generate my own too. Here's how I did it.

The Base Colors

This was the easiest one because I could just use hsl to adjust the hue by a certain step. So we get hsl(0, 50%, 50%), hsl(20, 50%, 50%), hsl(40, 50%, 50%)

Base colors

That was easy enough

The rest of the palette

Then, I thought of iterating over the saturation to brighten or darken the colors. So I iterated again, adding in 10 to the value, but there was always grey at the start of every color.

Color palette with grey at the start


Not quite right

Tweaking the loop gave me this final palette:

Not the best, but OK by my standards

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .