After we found a basic way of coloring pitches, let's now look at a way to color scales.

Chroma Center

This is the C major scale in a chromatic circle, indexed from 0 to 11:

If we now add all indices of active notes inside modulo 12, we get:

(0 + 2 + 4 + 5 + 7 + 9 + 11) % 12 = 2

... which is the index of D. Interestingly, D is the only place we can put a mirroring axis that won't change the notes after reflection. Let's call this the chroma center. We can calculate it for any chroma like this:

export default function chromaCenter(chroma: string) {
  const digits = chroma.split('');
  const ones = digits.map((d, i) => (d === '1' ? i : -1)).filter((i) => i !== -1);
  return ones.reduce((sum, i) => i + sum, 0) % 12;
}

Here, we are summing all indices that contain "1" inside mod 12.

101011010101 
C D EF G A B

Scale Colors

Now, we can use the chroma center for cyclical color interpolation:

import { interpolateSinebow } from 'd3-scale-chromatic';
import chromaCenter from './chromaCenter';

export default function chromaColor(chroma) {
  return interpolateSinebow(chromaCenter(chroma) / 12);
}

... and run it on all diatonic scales:

Here, we can see that scales that contain the same notes have the same color.

export const circleOfFifths = Array.from({ length: 12 }, (_, i) => Note.get(Note.fromMidi(60 + ((i * 7) % 12))).pc);
export const scaleColor = (scale) => chromaColor(scaleChroma(scale));
export const familyScales = (family) => (
  <ul style={{ margin: 0 }}>
    {circleOfFifths.map((tonic) => (
      <li style={{ marginBottom: 2, listStyle: 'none', display: 'flex' }} key={tonic}>
        {Scale.modeNames(`${tonic} ${family}`).map(([root, scale], i) => (
          <span style={{ backgroundColor: scaleColor(`${root} ${scale}`), marginRight: 2, padding: 2 }} key={i}>
            {root} {scale}
          </span>
        ))}
      </li>
    ))}
  </ul>
);

<div>{familyScales('major')}</div>;

More Scales

Modes of Harmonic Minor:

Modes of Melodic Minor:

Issue: Same Color for Different Scales

While the coloring inside one scale family works, we can see that some scales across families have the same color, for example C melodic minor and C mixoldian.

This is because the center is the same for both:

We can also double check this by calculating the chroma center:

(0 + 2 + 3 + 5 + 7 + 9 + 11) % 12 = 1 // C melodic minor
(0 + 2 + 4 + 5 + 7 + 9 + 10) % 12 = 1 // C mixolydian

Still, this way of coloring chromas is very helpful to differentiate different tonal centers inside the same scale family.

That's it for today, the next color post will be about scale light and darkness to diversify the colors.