Programmatic Color Scales

Overview

This project is a combination of my interests and curiosity in:

• Color theory
• Making complex systems out of simple inputs
• Using code as a design tool

I've long been a fan of Nate Baldwin's writing about color and work on Leonardo, a tool for generating adaptive color systems. Recently, I read Matthew Ström's blog post about , where he documented his process developing a similar tool, including code snippets of the core math.

Inspired by their approaches of using math & code to systematize the process building design system color palettes, I jumped into CodePen to try implementing Matthew's code. It was a solid start, but didn't fully work and I also wanted to code a UI to visualize the palettes as they were generated. I continued to iterate, debugging the math and diving deeper into color science.

After a couple weeks, I got everything working as expected and added a few more parameters to the controls. The UI allows you to set a few inputs, such as min/max saturation, number of scale steps, and hue shift. From those parameters, it then generates & displays a set of with consistent contrast ratios. There's even a button to copy all generated hex codes to paste into Figma.

It's not necessarily a practical tool for production design systems work — nor did I intend it to be. More than anything, it was a fun and immersive way to push my coding skills, play around with parametric design systems, and learn more about color theory!