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%)
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.
Tweaking the loop gave me this final palette:
Not the best, but OK by my standards
Top comments (0)