Color palette builder

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.

The cool thing is, it animates the palette as more colors are added, using svelte’s crossfade transition and uses d3-color to aproximate a color halfway between 2 colors.

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.

Code

https://svelte.dev/repl/c049d685a16e442fa11281909cb5dac4?version=3.38.2

Demo

Notes

• Add a HSL color picker. Maybe use d3-color?