Joe Golike

An internal tool I built that we used in creating and refining the color system for Noodle UI charts and visualizations.

The starting point for our color system was D3’s Category 10 color scheme. It is a solid set of colors used everywhere. But it had some things that weren’t working for us:

• The colors felt too bland and we wanted a more vibrant feel for our charts
• The color scheme worked better for dark on light color systems, but not as well for light on dark systems
• The yellow didn’t align with Noodle’s brand color

We used Color Explorer to generate colors in HCL color space, a more intuitive system than RGB to manipulate colors visually. We threw out brown and gray from the scheme as brown was not a vibrant color, especially on dark backgrounds, and gray was used extensively in the chrome of our design system. The results were an eight- and sixteen-color categorical set we used for charts and visualizations.