Deriving next step in color scale

As part of our color group editor in themes, we detect color scales as part of the grouping. This allows us to make a best guess at the next step in the scale when you add a color.

Initially, we applied a linear adjustment which 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:

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

The new scale has many steps that are essentially indiscernible from their surrounding counterparts. As such, we adjusted or algorithms to be more sensitive to the light end of the scale.

With the adjusted algorithm we ended up with:

Comparison with with the original algorithm (new colors are second):

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

Get started with the theme editor →

Roadmap