note-color

0.0.1 โ€ข Public โ€ข Published

note-color ๐ŸŽน ๐ŸŽจ

A lightweight library that maps musical notes to colors based on the Chrome Music Lab's beautiful palette. Perfect for music visualizations, educational tools, and creative projects!

Installation ๐Ÿ“ฆ

npm i note-color

Demo ๐ŸŽญ

Try the interactive demo to see all the features in action!

Features โœจ

  • ๐ŸŽต Map any musical note to a consistent color
  • ๐Ÿ”  Support for multiple notation styles (C, C#, Db, do, rรฉ, etc.)
  • ๐ŸŽน Works with MIDI note numbers and pitch classes
  • ๐ŸŽจ Multiple built-in palettes (default, pastel, monochrome)
  • ๐Ÿ–Œ๏ธ Create custom palettes for your project's aesthetic
  • ๐Ÿง  Smart handling of edge cases with robust normalization
  • ๐Ÿชถ Zero dependencies - tiny footprint!

How It Works ๐Ÿ”

The package maps the 12 notes of the chromatic scale to specific colors:

C  โ†’ ๐Ÿ”ด Red
C# โ†’ ๐ŸŸ  Orange
D  โ†’ ๐ŸŸ  Light Orange
D# โ†’ ๐ŸŸก Yellow/Orange
E  โ†’ ๐ŸŸก Yellow
F  โ†’ ๐ŸŸข Light Green
F# โ†’ ๐ŸŸข Green
G  โ†’ ๐ŸŸข Teal
G# โ†’ ๐Ÿ”ต Blue
A  โ†’ ๐ŸŸฃ Purple
A# โ†’ ๐ŸŸฃ Magenta
B  โ†’ ๐ŸŸฃ Pink

This mapping is based on the Chrome Music Lab's color scheme, created by Google's Creative Lab team to help people explore music in a fun, visual way.

Usage ๐Ÿš€

Basic Usage ๐Ÿš€

import getNoteColor from "note-color";

// Get color for note C
getNoteColor("C"); // Returns "#e23058" (red)

// Different notation styles - all get normalized to standard notation
getNoteColor("C#"); // Returns "#f7583a" (orange)
getNoteColor("Db"); // Same as C#: "#f7583a"
getNoteColor("do"); // Latin solfรจge for C: "#e23058"
getNoteColor("rรฉ"); // Latin solfรจge (with accent) for D: "#f8943e"

Supported Notation Systems ๐Ÿ”ค

The package supports multiple notation formats:

Standard Note Names

// Major scale notes
getNoteColor("C"); // "#e23058"
getNoteColor("D"); // "#f8943e"
getNoteColor("E"); // "#edd92a"
getNoteColor("F"); // "#95c531"
getNoteColor("G"); // "#11826e"
getNoteColor("A"); // "#5b37cb"
getNoteColor("B"); // "#e957b2"

// With accidentals (sharps)
getNoteColor("C#"); // "#f7583a"
getNoteColor("D#"); // "#f3b72f"
getNoteColor("F#"); // "#55a753"
getNoteColor("G#"); // "#3161a3"
getNoteColor("A#"); // "#a247be"

// With accidentals (flats) - automatically converts to sharp equivalent
getNoteColor("Db"); // Same as C#: "#f7583a"
getNoteColor("Eb"); // Same as D#: "#f3b72f"
getNoteColor("Gb"); // Same as F#: "#55a753"
getNoteColor("Ab"); // Same as G#: "#3161a3"
getNoteColor("Bb"); // Same as A#: "#a247be"

Unicode Symbols

// With Unicode sharp sign (โ™ฏ)
getNoteColor("Cโ™ฏ"); // Same as C#: "#f7583a"
getNoteColor("Dโ™ฏ"); // Same as D#: "#f3b72f"

// With Unicode flat sign (โ™ญ)
getNoteColor("Dโ™ญ"); // Same as C#: "#f7583a"
getNoteColor("Eโ™ญ"); // Same as D#: "#f3b72f"

// Special cases
getNoteColor("Bโ™ฏ"); // Same as C: "#e23058"
getNoteColor("Cโ™ญ"); // Same as B: "#e957b2"
getNoteColor("Eโ™ฏ"); // Same as F: "#95c531"
getNoteColor("Fโ™ญ"); // Same as E: "#edd92a"

Latin Solfรจge (Do-Re-Mi)

// Basic solfรจge
getNoteColor("do"); // C: "#e23058"
getNoteColor("re"); // D: "#f8943e"
getNoteColor("mi"); // E: "#edd92a"
getNoteColor("fa"); // F: "#95c531"
getNoteColor("sol"); // G: "#11826e"
getNoteColor("la"); // A: "#5b37cb"
getNoteColor("si"); // B: "#e957b2" (or "ti" in some systems)

// With accidentals
getNoteColor("do#"); // C#: "#f7583a"
getNoteColor("re#"); // D#: "#f3b72f"
getNoteColor("fa#"); // F#: "#55a753"
getNoteColor("sol#"); // G#: "#3161a3"
getNoteColor("la#"); // A#: "#a247be"

// With accents (same results)
getNoteColor("dรณ"); // C: "#e23058"
getNoteColor("rรฉ"); // D: "#f8943e"
getNoteColor("mรญ"); // E: "#edd92a"
getNoteColor("fรก"); // F: "#95c531"
getNoteColor("sรณl"); // G: "#11826e"
getNoteColor("lรก"); // A: "#5b37cb"
getNoteColor("sรญ"); // B: "#e957b2"

Case Insensitivity

// Case insensitive - these all return the same color
getNoteColor("C"); // "#e23058"
getNoteColor("c"); // "#e23058"
getNoteColor("DO"); // "#e23058"
getNoteColor("Do"); // "#e23058"
getNoteColor("do"); // "#e23058"

Working with MIDI and Pitch Classes ๐ŸŽน

The package accepts several numeric input formats:

MIDI Note Numbers (0-127)

MIDI notes span from 0 to 127, where middle C is 60:

// MIDI note numbers
getNoteColor(60); // Middle C: "#e23058"
getNoteColor(61); // C#: "#f7583a"
getNoteColor(62); // D: "#f8943e"
getNoteColor(72); // C one octave above middle C (still "#e23058")

// Common MIDI ranges
// Piano keys: 21 (A0) to 108 (C8)
// Middle C (C4): 60
// A440 (A4): 69

Pitch Classes (0-11)

Pitch classes represent the 12 notes regardless of octave:

// Pitch classes (0-11)
getNoteColor(0); // C: "#e23058"
getNoteColor(1); // C#: "#f7583a"
getNoteColor(2); // D: "#f8943e"
getNoteColor(7); // G: "#11826e"
getNoteColor(11); // B: "#e957b2"

Any Integer (With Modulo 12)

The package applies modulo 12 to any integer, wrapping numbers outside the 0-11 range:

// Numbers wrap modulo 12
getNoteColor(12); // Same as 0 (C): "#e23058"
getNoteColor(13); // Same as 1 (C#): "#f7583a"
getNoteColor(24); // Same as 0 (C): "#e23058"
getNoteColor(-1); // Same as 11 (B): "#e957b2"
getNoteColor(-12); // Same as 0 (C): "#e23058"

Pitch Class to Note Mapping

Pitch Class Note Color (Default Palette)
0 C #e23058
1 C# #f7583a
2 D #f8943e
3 D# #f3b72f
4 E #edd92a
5 F #95c531
6 F# #55a753
7 G #11826e
8 G# #3161a3
9 A #5b37cb
10 A# #a247be
11 B #e957b2

Color Palettes ๐ŸŽจ

The package comes with three built-in palettes:

  1. default - Chrome Music Lab's original colorful palette
  2. pastel - A softer, pastel version of the color wheel
  3. monochrome - Grayscale from black to white
// Use built-in palettes
getNoteColor("C", { paletteId: "default" }); // Default red: "#e23058"
getNoteColor("C", { paletteId: "pastel" }); // Pastel red: "#ffb3ba"
getNoteColor("C", { paletteId: "monochrome" }); // Black: "#000000"

// Get available palettes
import { getAvailablePalettes } from "note-color";
getAvailablePalettes(); // ["default", "pastel", "monochrome"]

// Access palette data directly
import { PALETTES } from "note-color";
console.log(PALETTES.pastel); // View the full pastel palette

// Create a custom palette (must include all 12 notes C through B)
const rainbowPalette = [
  { note: "C", name: "Vivid Red", hex: "#ff0000" },
  { note: "C#", name: "Vivid Orange", hex: "#ff8800" },
  { note: "D", name: "Vivid Yellow", hex: "#ffff00" },
  // ... and so on for all 12 notes
];

getNoteColor("C", { palette: rainbowPalette }); // "#ff0000"

Pastel Palette Preview

Note Color Name Hex Code Preview
C Pastel Red #ffb3ba ๐Ÿฉท
C#/Db Pastel Orange #ffdfba ๐Ÿงก
D Pastel Yellow #ffffba ๐Ÿ’›
D#/Eb Light Pastel Yellow #e6ffba ๐Ÿ’š
E Pastel Green #baffba ๐Ÿ’š
F Light Pastel Cyan #baffdf ๐Ÿ’™
F#/Gb Pastel Cyan #baffff ๐Ÿ’™
G Light Pastel Blue #bad3ff ๐Ÿ’™
G#/Ab Pastel Blue #babdff ๐Ÿ’œ
A Pastel Purple #d3baff ๐Ÿ’œ
A#/Bb Pastel Magenta #ffbaff ๐Ÿ’—
B Light Pastel Magenta #ffbad3 ๐Ÿ’—

Monochrome Palette Preview

Note Color Name Hex Code Preview
C Black #000000 โšซ
C#/Db Very Dark Gray #1a1a1a โšซ
D Dark Gray #333333 โšซ
D#/Eb Medium Dark Gray #4d4d4d โšซ
E Medium Gray #666666 โšซ
F Gray #808080 โšซ
F#/Gb Medium Light Gray #999999 โšซ
G Light Gray #b3b3b3 โšซ
G#/Ab Very Light Gray #cccccc โšช
A Almost White #e6e6e6 โšช
A#/Bb Off White #f2f2f2 โšช
B White #ffffff โšช

Additional Options and Advanced Usage โš™๏ธ

// Get full note information including name
const noteInfo = getNoteColor("F", { fullInfo: true });
// Returns: { note: 'F', name: 'Yellow-Green', hex: '#95c531' }

// Now you can use the individual properties
console.log(`Note: ${noteInfo.note}`); // "Note: F"
console.log(`Color name: ${noteInfo.name}`); // "Color name: Yellow-Green"
console.log(`Hex code: ${noteInfo.hex}`); // "Hex code: #95c531"

// Handle errors silently
getNoteColor("Z", { failSilently: true }); // null instead of throwing error
getNoteColor({}, { failSilently: true }); // null (invalid input type)

// Combine multiple options
getNoteColor("C", {
  paletteId: "pastel",
  fullInfo: true,
  failSilently: true,
}); // Returns full pastel palette info for C

Error Handling

Without failSilently, invalid inputs will throw errors:

try {
  getNoteColor("Z"); // Throws: "Error: Note Z not found in palette"
} catch (error) {
  console.error(error.message);
}

try {
  getNoteColor({}); // Throws: "Error: Note must be a string or number"
} catch (error) {
  console.error(error.message);
}

Working with Arrays of Notes

Process multiple notes at once:

// Map an array of notes to their colors
const notes = ["C", "E", "G"]; // C major triad
const colors = notes.map((note) => getNoteColor(note));
// ["#e23058", "#edd92a", "#11826e"]

// Create an array of pitch classes and get their colors
const pitchClasses = [0, 4, 7]; // C major triad as pitch classes
const chordColors = pitchClasses.map((pc) => getNoteColor(pc));
// ["#e23058", "#edd92a", "#11826e"]

Default Palette ๐ŸŽจ

Note Color Name Hex Code Preview
C Amaranth #e23058 ๐Ÿ”ด
C#/Db Orange Soda #f7583a ๐ŸŸ 
D Royal Orange #f8943e ๐ŸŸ 
D#/Eb Saffron #f3b72f ๐ŸŸก
E Dandelion #edd92a ๐ŸŸก
F Yellow-Green #95c531 ๐ŸŸข
F#/Gb Apple #55a753 ๐ŸŸข
G Deep Green-Cyan #11826e ๐ŸŸข
G#/Ab Lapis Lazuli #3161a3 ๐Ÿ”ต
A Iris #5b37cb ๐ŸŸฃ
A#/Bb Purple Plum #a247be ๐ŸŸฃ
B Brilliant Rose #e957b2 ๐ŸŸฃ

Use Cases and Examples ๐Ÿ’ก

Here are some practical ways to use this package:

Music Visualization ๐ŸŽต

// Create a real-time piano visualizer
pianoKeys.forEach((key) => {
  const midiNote = key.midiNumber;
  const color = getNoteColor(midiNote);
  key.addEventListener("noteon", () => {
    key.style.backgroundColor = color;
  });
});

Music Education ๐ŸŽ“

// Highlight chord notes with their respective colors
function visualizeChord(chordName) {
  const chordNotes = getChordNotes(chordName); // Your function to get notes
  return chordNotes
    .map((note) => {
      const color = getNoteColor(note);
      return `<span style="color:${color}">${note}</span>`;
    })
    .join(" - ");
}

Audio Analysis ๐ŸŽง

// Visualize frequency data from audio analysis
function visualizeAudioFrequencies(frequencies) {
  frequencies.forEach((freq) => {
    const midiNote = frequencyToMidi(freq); // Your conversion function
    const color = getNoteColor(midiNote, { failSilently: true }) || "#888";
    // Draw visualization with the color
  });
}

Synesthesia Experience ๐Ÿง 

// Create a synesthesia experience that maps sounds to colors
audioContext.addEventListener("audioprocess", (event) => {
  const dominantPitch = getPitchFromAudio(event.inputBuffer);
  document.body.style.backgroundColor = getNoteColor(dominantPitch);
});

Musical Games ๐ŸŽฎ

// Note recognition game
function createNoteQuiz() {
  const randomNote = getRandomNote();
  const color = getNoteColor(randomNote, { fullInfo: true });

  displayElement.textContent = "What note corresponds to this color?";
  displayElement.style.backgroundColor = color.hex;

  checkAnswerButton.addEventListener("click", () => {
    if (userInput.value.toLowerCase() === randomNote.toLowerCase()) {
      score++;
      feedback.textContent = `Correct! This is ${randomNote} (${color.name})`;
    }
  });
}

Instrument Learning Tools ๐ŸŽธ

// Colorful fretboard visualization
fretboardPositions.forEach((position) => {
  const note = position.note;
  position.element.style.backgroundColor = getNoteColor(note);
  position.element.setAttribute("data-note", note);
});

Credits ๐Ÿ‘

  • Original color palette by Chrome Music Lab, a collection of experiments by Google's Creative Lab team
  • Package created with โค๏ธ to make music more colorful and accessible

License ๐Ÿ“„

MIT

Package Sidebar

Install

npm i note-color

Weekly Downloads

4

Version

0.0.1

License

MIT

Unpacked Size

39.5 kB

Total Files

4

Last publish

Collaborators

  • fmenard