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 co…

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


Print Share Comment Cite Upload Translate
APA
Siddharth | Sciencx (2024-03-28T10:02:40+00:00) » Programmatically generating color palettes. Retrieved from https://www.scien.cx/2021/06/07/programmatically-generating-color-palettes/.
MLA
" » Programmatically generating color palettes." Siddharth | Sciencx - Monday June 7, 2021, https://www.scien.cx/2021/06/07/programmatically-generating-color-palettes/
HARVARD
Siddharth | Sciencx Monday June 7, 2021 » Programmatically generating color palettes., viewed 2024-03-28T10:02:40+00:00,<https://www.scien.cx/2021/06/07/programmatically-generating-color-palettes/>
VANCOUVER
Siddharth | Sciencx - » Programmatically generating color palettes. [Internet]. [Accessed 2024-03-28T10:02:40+00:00]. Available from: https://www.scien.cx/2021/06/07/programmatically-generating-color-palettes/
CHICAGO
" » Programmatically generating color palettes." Siddharth | Sciencx - Accessed 2024-03-28T10:02:40+00:00. https://www.scien.cx/2021/06/07/programmatically-generating-color-palettes/
IEEE
" » Programmatically generating color palettes." Siddharth | Sciencx [Online]. Available: https://www.scien.cx/2021/06/07/programmatically-generating-color-palettes/. [Accessed: 2024-03-28T10:02:40+00:00]
rf:citation
» Programmatically generating color palettes | Siddharth | Sciencx | https://www.scien.cx/2021/06/07/programmatically-generating-color-palettes/ | 2024-03-28T10:02:40+00:00
https://github.com/addpipe/simple-recorderjs-demo