note-color Package Demo

Interactive Piano

Click on a key to see its corresponding color:

C
D
E
F
G
A
B
C#
D#
F#
G#
A#
Click a key above

All Note Colors

Supported Note Notations

Click on any notation to see its color:

Pitch Class & MIDI Number Support

The package supports pitch classes (0-11) and MIDI numbers:

Multiple Color Palettes

Switch between different color palettes:

Usage Examples

// Install the package
npm install note-color

// Import the package
import getNoteColor, { getAvailablePalettes, PALETTES } from 'note-color';

// Basic usage - get color by note name
const cColor = getNoteColor('C');  // Returns "#e23058"

// Get color for different note formats
getNoteColor('Bb');     // Same as A#: "#a247be"
getNoteColor('c#');     // Works with lowercase: "#f7583a"
getNoteColor('do');     // Latin solfège for C: "#e23058"
getNoteColor('sol#');   // Latin solfège for G#: "#3161a3"
getNoteColor('ré');     // Accented solfège: "#f8943e"

// Get color by MIDI number
getNoteColor(60);       // Middle C: "#e23058"
getNoteColor(61);       // C#: "#f7583a"

// Get color by pitch class (0-11)
getNoteColor(0);        // C: "#e23058"
getNoteColor(7);        // G: "#11826e"

// Pitch class wrapping (modulo 12)
getNoteColor(12);       // Same as 0 (C): "#e23058"
getNoteColor(-1);       // Same as 11 (B): "#e957b2"

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

// Use predefined palettes
getNoteColor('C', { paletteId: 'pastel' });  // "#ffb3ba"
getNoteColor('D', { paletteId: 'monochrome' });  // "#333333"

// See available palettes
const palettes = getAvailablePalettes();  // ["default", "pastel", "monochrome"]

// Create a custom palette
const customPalette = [
  { note: 'C', name: 'Custom Red', hex: '#ff0000' },
  { note: 'D', name: 'Custom Blue', hex: '#0000ff' },
  // ... etc
];

// Use custom palette
getNoteColor('C', { palette: customPalette });  // "#ff0000"

// Handle errors silently
getNoteColor('Z', { failSilently: true });  // null instead of throwing