I was reading the Refactoring UI book, and the approach they recomended for picking colors was to pick a color on each side of the palette (the boldest color and weakest color). Next, choose a color at the halfway point. Repeat this until you have a full palette, ie 9 items.
So I put together an example, it’s not finished yet, but it partially works, so I’m considering it a completed experiment.
It also generates the CSS variables for you, ie:
--primary-color-100: ...; --primary-color-200: ...; --primary-color-300: ...; --primary-color-400: ...; --primary-color-500: ...;
So you can copy & paste directly into your project.
- Add a HSL color picker. Maybe use d3-color?