Click on a key to see its corresponding color:
Click on any notation to see its color:
The package supports pitch classes (0-11) and MIDI numbers:
Switch between different color palettes:
// 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