This content originally appeared on DEV Community and was authored by Siddharth
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.
Not quite right
Tweaking the loop gave me this final palette:
Not the best, but OK by my standards
This content originally appeared on DEV Community and was authored by Siddharth
Siddharth | Sciencx (2021-06-07T14:09:18+00:00) Programmatically generating color palettes. Retrieved from https://www.scien.cx/2021/06/07/programmatically-generating-color-palettes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.