Experiments >

Color palette builder

Experiment #18714th May, 2021by Joshua Nussbaum

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.





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

Stay tuned in

Learn how to add more experimentation to your workflow