Logo
loophole letters

Coloring Pitches

code
d3

April 01, 2020

Let's play with colors. Vizualization loves color. To map musical notes to color, we can do various things.

rainbow with hsl

One simple approach is using the hsl color, dividing the 360 degrees through 12 pitches:

import { TinyColor } from '@ctrl/tinycolor';
import { Note } from '@tonaljs/tonal';

export function noteColor(note: string, rotate = 0): TinyColor {
  return new TinyColor({
    h: Math.floor((rotate + (Note.chroma(note) / 12) * 360) % 360),
    s: 100,
    l: 50,
  });
}

If we throw that into the svg-piano:

import { Range } from '@tonaljs/tonal';

export function ColorKeyboard({ options, colorizer = noteColor }) {
  options = { range: ['C3', 'C4'], ...options };
  return (
    <Keyboard
      options={{
        ...options,
        colorize: Range.chromatic(options.range).map((note) => ({
          keys: [note],
          color: colorizer(note).toHexString(),
        })),
      }}
    />
  );
}

If this is too aggressive for you, read on..

Using d3-scale-chromatic

After just scratching the surface of color research, I found out that there is a universe of color nerds out there, most of them coming from the data viz world. The best color scales for this purpose I found so far are the cyclical scales of d3-scale-chromatic.

sinebow

Less angry rainbow

I like this one the most

Note height as lightening factor





angry rainbow

sinebow

less angry rainbow

Next Steps

Thats enough for today. More ideas for the future:

  • colorize based on the circle of fifths instead of chromatically
  • mix chord colors out of individual note colors
  • use non cyclic color scales for things like interval "spice" or voicing diff

Felix Roos 2023