Deriving next step in color scale

Our color group editor in themes allows us to detect color scales as part of the grouping. When you add a color, the algorithm makes a best guess at the subsequent step in the scale.

Initially, we applied a linear adjustment. This was a start, but it began to fail on lighter colors because there wasn't enough contrast between steps in the scale.

Consider the following colors that form the beginning of a color scale:

Our original algorithm that lightened on a linear scale:

This scale seems to match what we might create on our own. If we add more steps, however, we approach white, which is where the linear lightness adjustment begins to break down. Below adds 16 steps to the scale:

This new scale has many steps that are essentially indiscernible from surrounding colors. As a result, we adjusted our algorithm to be more sensitive to the light end of the scale.

With the adjusted algorithm, we created this scale:

Below shows a comparison of the adjusted and original algorithm, with new colors second:

With this small algorithm adjustment, we compute better steps across the entire color scale.

Get started with the theme editor →

Roadmap