Programmatically generating color palettes

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%)

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.

Not quite right

Tweaking the loop gave me this final palette:

Not the best, but OK by my standards