Hello, Hackers! It's me, Denis, author and developer of Chromatone. Thanks everyone for your views, opinions and very interesting links to other similar projects to learn from. I will try to implement all the insights got here in the upcoming 3.0 version of the web-site.
It's been a 7+ years solo build research and design project that is based on my own research and experiments made to explore music as an engineer and independent learner. I was a drummer when I started working on Chromatone but now I have released a number of music albums and singles as solo musician, play 2-4 live sessions a week and help others get into music in their own way.
But I'm not fanatic about the colorful notes. On the main page of web-site you can click a cog icon in the "flower" logo and then adjust any of all of 12 note colors to your preference. And this palette will be used throughout the Theory articles and Practice apps. I know that some people might have synesthesia with conflicting colors. And that those who have music in their hands already wouldn't appreciate another door to the room they're already inside of. But yeah, no matter what language you use to get into music, finally we can always close our eyes and just listen to it. The instrument stickers I make for Chromatone get smaller with the growing skill of musicians using them.
So the Chromatone web-site itself is my gift to those who would like to go the same path from wondering what are all these notes about to having a variety of instruments at hand that I can teach, explore and perform music with. And many of them are those web-apps in the Practice section.
https://chromatone.center/practice/pitch/spectrogram/ Colorful spectrogram of incoming signal. It's showing the significance of Chromatone coloring as it's absolute and can give exact color for any given frequency and vice versa. So we can see frequencies and relations between them. You can literally see timbre as lines of harmonics present in the sound. The better the mic - the better the spectrogram resolution and quality.
https://chromatone.center/practice/chord/fifths/ Very useful interactive Circle of Fifths with MIDI support, seventh chords and 4 inversions of each available to play with. Incredibly useful instrument for composers.
https://chromatone.center/practice/chord/array/ Tonnetz diagram colored with Chromatone looks quite appealing. Choose a tonic and a scale at the panel to the left (circle with the tonic note name) it will filter out inactive notes and chords. Multitouch available.
https://chromatone.center/practice/synth/elementary/ Main synth on the web-site is quite powerful now and has saw/square oscillators, noise oscillators, Karplus-Strong string voices, sampler voices in a polyphonic synth with some reverb and ping-pong delay added. All adjustable with the left side panel (with keyboard icon).
https://chromatone.center/practice/jam/random/ a tool for jams - click that one button and get a random BPM and scale to jam in for the next 10 minutes or so. It's like a geolocation for a jam session.
-----
The project is open-source https://github.com/chromatone/chromatone.center and I'm open not only to good advice but to actual contributions to the Theory articles in Markdown and also the Practice apps code written in Vue 3, Vitepress, UnoCSS, pug and other JS ecosystem goodness. Or just give the repo a star! We're approaching v3.0 soon - it will mark the completion of ongoing cleanup of tech debt from years of early development making the site and the NPM lib (https://www.npmjs.com/package/use-chromatone) robust and usable by many new music students, explorers and performers.
This seems kind of like inventing a QWERTY alternative. The best thing about QWERTY is that its ubiquitous and good enough, not that it's optimal.
Although in the case of chromatone, I don't see any arguments made about technical improvements. Instead of spelling note names with letters, we have colors. Why is this better? This some argument about the visible spectrum mapping. But like, how is that useful? I can tell a group of working musicians "1-4-2-5 in E minor", and we'd probably be able to play something moderately coherent based on that. How do I do that in Chromatone? What's the advantage?
Most people (aside from those with perfect pitch) experience pitch relatively. Things like intervals or scale degree given a tonic. Maybe there's something interesting one could do mapping colors to something in this domain, a la solfege, like a minor 9 chord becomes green or something. I'm still not totally sure what the point would be. Maybe you could read a chart quicker.
But like, what's the problem in traditional notation/theory that we're trying to solve here?
that's a great point. i'm making my alternative https://rawl.rocks/ which does exactly that: a relative color-coding, starting from the tonic
aside from that, I make a library of structures used in Western music (in the header). I've started saving structures a week ago, so there isn't much content right now
the main emergent property of my system is visibility of structures. chords, chord progressions, parallel / relative modulation symmetries suddenly make sense and are viscerally perceivable
and I hope my visualizations are directly useful in a context of speaking about music theory to people without sheet music experience (or, dare I say, without 10 years of such experience)
the main problem that i'm solving is that a standard notation mostly obscures structure. it's good for sight reading because people use it (like QWERTY or Chinese characters), but it's a suboptimal way to make underlining structural laws, patterns and symmetries of Western music visible
> the main problem that i'm solving is that a standard notation mostly obscures structure
Can you expand on this? I’m a hobbyist that’s learned how to sight read, and one of the coolest things was when I stopped seeing individual notes and began to see structure, as in chords and progressions. I’m not sure how sheet music would obscure the structure because that’s all I see in it now.
Basically, you can somewhat see chords in sheet music. Like, you can easily see a C major chord in a treble clef.
1) How many milliseconds does it take you to understand that the entire bar you're looking at is just a C major chord arpeggiated in different octaves?
2) What if it's a bass + treble clef? What if it's an orchestral score?
3) How fast can you verify that a treble clef is active now? That it's not a C-sharp major or a C major chord?
4) Do you actually care that it's a C major chord or rather should you care that it's a I chord (a tonic major chord)?
5) If you care about relative chords (Roman numerals), does it mean you should learn 7 to 12 times visual cues of what's going on now?
These are just the beginning questions, where the end questions that I care about are:
101) What are the backbone structures making a list of midi pitches played suddenly a tango? A ragtime? A malaguena? A Bulgarian horo?
102) What are differences between styles (languages) of specific composers? How do I rapidly see what's different between Nobuo Uematsu and Koji Kondo? Between Chopin and Schumann? Between (tonal) Copland and (tonal) Debussy?
103) How do I imitate any of those or any fusion of those? How do I make sure that I don't miss any structural feature when I analyze and decompose their style and their pieces?
Thanks for the response! I think it would be cool to see if a different notation lends itself better to these questions, but I do believe that the classic notation we already use satisfies most of these questions. I feel like reading a natural language has a lot of similarities. When you first learn to read, you often identify individual letters, then syllables, then you begin to read words, and finally one day you can compare the stylistic similarities between two different authors.
Music has a lot of the same steps and it just takes time to get to the different stages of comprehension. At the stage I’m at now, it’s fairly easy to look at sheet music and determine if it’s ragtime or swing or jazz. I’m sure I’ll be able to pick up more nuance as time goes on too.
But, I think it’s cool that you’re exploring different approaches! I don’t want to take away from that, I just wanted to put out a challenge to the presumptions your making that classic notation is insufficient in some of these areas :)
The most compelling use of color in music theory that I've encountered is a color scheme where individual notes are given primary colors (yellow, red, blue) like this:
C is yellow, C#/Db is red, D is blue, D#/Eb is yellow,...etc
First observation: the notes of each of the three diminished tetrads are monochromatic (their notes all have the same color.)
Then, look at the major minor triads and assign them secondary colors (purple, orange, green) depending upon the colors of their constituent notes.
So, for example the C major and C minor triads are both orange chords. F major and F minor triads are green chords. E minor and E major triads are green chords, etc.
This is a scheme that Tom Glazebrook calls "metaharmony", and he uses it in the context of studying the Barry Harris approach to Jazz, but it's actually isomorphic to Erno Lendvai's "Axis Theory" analysis of the music of Bela Bartok. (The secondary colors correspond to the T, D, and S functions.)
I think they're color-coding with the root note (or key?) being red which makes more sense than coloring the note names. Similar to how hearing perfect pitch can be a bit of an annoyance (with unnecessary detail) than useful.
No, they're definitely assigning the colors to the pitch class. It's not relative to the tonic of the key. I remember that being a stumbling block for me, because I like things that are independent of key. But, no, a C major triad is most certainly orange because C is yellow, and E and G are both red.
I ultimately made peace with this because the greater goal is to break you out of the key prison so you can learn to move anywhere. In this light, it makes sense to assign the colors to the pitch class.
Thanks for the clarification. So I suppose this is a different way than key + II/ii/etc notation where one would think of implicit key as a color and be aware of consonant/dissonant colors which are certain distances/hues from that color.
I'm not really buying that we can interpret degrees of hue differences to identify which ones are consonant/dissonant when the base/reference color is changing. I would certainly expect our hue perception and usage to be absolute and not relative--vs pitch perception being mostly relative.
I can't say how a certain green is 'higher' than a red by the same amount a certain blue is higher than a green. It's requiring us to develop the same intuitions we already have for pitch for hues--creating a problem rather than solving one (if I'm understanding this correctly).
> I'm not really buying that we can interpret degrees of hue differences to identify which ones are consonant/dissonant when the base/reference color is changing.
That's definitely not the aim here. There's nothing here related to consonance/dissonance, and there are no variations in hues. There's just one red, one yellow, one blue, one orange, one purple, and a single green: six fixed colors altogether.
So a major/minor triad that has one yellow note and two red notes is the same shade of orange as one that has two yellow notes and one red note.
The utility and beauty of the colors is that the 3 primary colors — and their equal-parts mixing forms secondary colors — makes an astonishing metaphor for how individual notes mix to create base triads that have one of 3 musical functions, which correspond to the secondary colors.
Then, in addition to that, the color of extension notes (which will again be primary colors) seem to make that chord "want to resolve" to chords where the base triad is the complement of that extension note's color.
One can try to take the metaphor too far, but just this much is compels me.
There are other interesting details, though, like all augmented triads and sus2 or sus4 triads are tri-color, which seems to align well with their functional ambiguities.
If you look at the screenshot of the Tonnetz I linked to elsewhere in the thread, it seems that what we feel when we sense that we have moved from one chord-function to another (in some chord progression) actually comes from moving from one of the diagonal secondary-color "lanes" in the tonnetz to another.
Going the other way, using a sound analogy to teach color theory, I played with a {B4:red,C:orange,C#:yellow,D:green,D#:green,E:blue,F:violet} map - frequency scaling with offset. With an equalizer-like keyboard - intensity from touch location, and displayed on the key. So kbd/equalizer to synth to spectrogram to scale-and-offset to pretend-they-are-lasers to a restricted spectra to color space and color. Keyboarding color in a color space via spectra.
Someone sure did put a lot of work into this. I can appreciate that.
That said, as a musician, I’d prefer if someone just told me the key and progression, or just started playing and I could jump in. I’m not that good with colors.
Chromatone is useful on the way there while you're still learning those keys and scales. Just open that panel with a note name on the left, choose click the tonic note and choose a scale and you will immediately see the notes to play on your keyboard and guitar/ukulele without any need to memorize or calculate the interval steps. Then you memorize them and don't need the colors any more. But they help you get there much faster and with less pressure on memory and long hours of practice.
From personal experience, I think having to unlearn the trigger(s) - in this case a specific colour creates more difficulty than its worth. You're intentionally coupling then de-coupling neuronal networks, and the de-coupling is harder than the coupling.
It also makes me wonder how much cognitive dissonance this may cause for those with synaethesia who already have their own thing going on.
I'm super curious about this project because I am currently trying to deeply learn music, but it is very difficult to get to a meaningful point of really "understanding" music and theory if you only have the time of a modern adult to commit to it. However I largely agree with you about this unfortunately. Do you think this person's project, where they use colors for relative notation is better?
I couldn't say. I only know that my personal experience of using Rocksmith to learn guitar meant I couldn't bust out a song perfectly without looking at the screen, even if I could get 100% in expert (no visible notation) mode for some songs.
The 60hz refresh visual input was 'expected' by my brain to be there in order to coordinate my body with correct timing, intonation etc. i.e. it seemed to be mixed in with my so called 'muscle memory'.
One other thing that was most noticeable is the gamification noises (e.g. the noise you get for reaching the 25x multiplier) became part of my mental model, and when I recognised this and turned them off in the options, my inability to play that part of song nearly as well became extremely evident, although persisting with the option set to off allowed me to overcome it.
This really doesn't reflect the actual structure of Western music for those without absolute pitch (the vast majority of people). Instead, it's pretty much just relations that matter between pitches which makes things way more difficult to visualize. Mixing red and blue gives you a different color than red and green, but A-C is pretty much the same as Bb-Db, they're both minor thirds.
If you want to analyze it algorithmically, you probably need to start looking at topology or something so that you can correctly relate musical structures in a way that is resistant to transposition.
> This really doesn't reflect the actual structure of Western music for those without absolute pitch (the vast majority of people).
It’s worth mentioning that this includes the majority of musicians (professional and otherwise). Having perfect pitch is in no way necessary to be an excellent player or composer of music. Most of the greats didn’t have it. It is a very rare skill.
> A few years ago, I had a student who had taken one of these teach-yourself-perfect-pitch courses, and I was fascinated. From time to time I would fire random notes at him in an attempt to catch him out... and I never could! When I asked him how the system worked, he explained that the best analogy was to think in terms of colours. For argument's sake, he said, think of Bb as sounding blue and D as a greenish colour.
> Intrigued, I played him a Cmaj7 chord and asked him to identify that. He shook his head in despair, and gave up almost immediately.
> "Can't you just home in on each note in turn and identify the separate colours?" I suggested. "Then you could look at your list of notes and figure out what the chord is."
> "No, you don't understand," he replied. "All chords sound brown to me!"
- Guthrie Govan, from Creative Guitar 1 (which, incidentally, I had to dig out to find the quote)
I imagine that Guthrie's student might have been able to combine his pitch training with some ear training and have a better shot of hearing something other than mud when he heard a chord, but this always stuck in my brain and I'm reminded of it every time I see discussions of perfect pitch. It seems like perfect pitch is barely even desirable, in this framing.
And that makes sense, as discussed elsewhere in the thread, what you really want as a musician is a great sense of relative pitch, and a good mind-body connection between the fingers and ears that lets you easily turn what you're hearing in your mind - where your ear wants to go - into actual music.
And probably more of a curse than a blessing. Having to listen to Kind of Blue with the awful knowledge that it's 1/3 of a tone flat from concert pitch: that's something I'd rather live without.
Among professional musicians who have perfect pitch, it's considered more of a curse than a blessing.
It's very rare, and also not very correlated with musical skill. Some people just have it, seemingly inherently, even without any formal musical training.
> If you want to analyze it algorithmically, you probably need to start looking at topology or something so that you can correctly relate musical structures in a way that is resistant to transposition.
Here's some alternative keyboard layouts that explore that idea:
Is there an easy-to-digest overview or even examples anywhere?
I see a bunch of pretty deep-dive articles, a long video, a lot of tools, but I can't see a description of how the supposed visual language works yet, or even examples. How does this system represent notes and chords over time?
Yeah, I kept skipping sections of the video over all the theory of hearing parts and found that the "most popular visualization" discussion/demo starts at 27:40 and just before at 24:22 shows the hue coloring by distance from/to root note on x-axis (and dissonance shown on y-axis but unclear how that's utilized).
One common trap(?) they fell into is allocating hues by frequency, where humans are far more sensitive in distinguishing hues between red and green. So many of the blue/greens look pretty much the same. It may have been intentional because those higher intervals matter less but wasn't clear.
The landing page doesn't seem very exciting (on mobile at least) but the "practice" area of the site contains quite a few web apps to demonstrate the concepts. I think the basic idea is that western music uses 12 tones, and chromatone gives each of those tones a color, and uses those 12 color/tone pairs as a basis for teaching music theory in a visual way.
And also here's where I found a lot of additional web apps. I'll look through them more when I'm at my PC. But just thought I'd post these here for anyone who clicked on the hn link but was underwhelmed or confused by the landing page:
https://chromatone.center/practice/
There’s some previous work from the 1800s and earlier that feels relevant, especially Farbige Noten, which mapped notes to colors as a novel notation method.
I built a color to notes tool five years ago and even tried to get a patent on the algorithm. Be warned, there are already multiple patents on this approach and the ability to monetize this project will be limited. I know because I just went through the process myself. In a related topic, ByteDance (TikTok) has a massive portfolio of Chinese patents that are direct ripoffs of lots of foreign IP.
The big question underlying this kind of analogy: are the spectra of visible things (EM) and the spectra of mechanically vibrating things similar? Naively, I'd say no, so this is yet another fun but ultimately arbitrary mapping which people endlessly invent to make music. Is it deeper than I think at first glance?
Check out this page https://chromatone.center/theory/interplay/spectrum/ - there's this exact question answered with diagrams and an interactive tool down in the bottom of the page. It shows that just by going up in octaves you get to THz territory on the 44th octave step and the frequency of note A44 matches red color. And other notes fall on the spectrum quite spectacularly.
I get it why this analogy is so tempting. If we consider the visible wavelengths being from 380nm to 780nm, that’s almost precisely one octave. If we could see the “ultraviolet octave”, and/or the “infrared octave”, would it resemble a rainbow? Would be neat if it did. When I was a kid, I wondered if violet and red were actually the same color, somehow. To me personally it feels like red and violet have much more in common than blue and green, for instance.
Physically, they're pretty analogous. But perceptually, sound and sight are very different. We're much less interested in abstract visual arrangements and there's no visual analog of harmony.
Maybe I'll add that our "detectors" for sight and sound operate on different principles.
Our sight system is a camera, capturing a 2-D image of the world. Color is picked up by 3ish sensors that have broadband frequency responses, meaning that a huge amount of information on the actual spectral content of the light is discarded. Countless spectral combinations get flattened into individual color values.
Our sound system approximates a Fourier-like decomposition of sound into frequency bins at points in time. It preserves much more spectral fidelity, but very little spatial fidelity.
I'm not a huge fan of the color/pitch relationship they seem to be trying to establish.
What I do appreciate is the engineering design in these interactives. The circular metronome in the rhythm apps is very cool, might be good for generating musical ideas once I get past the semi-opaque UX.
I was expecting some sort of programming language to describe music, but this isn't that. I'm not sure what it is exactly though. Navigating the website on mobile doesn't give me a clue
Are there any musical instruments with the notes arranged in a circle like that? Notes are in a repeating cycle after all. Different octaves could be further in/out layers.
I’m not sure how scientifically valid this is, but when playing these notes, I agree with their designated emotion. Though, that might just be my western brain vibing with the western brain of the author.
In any case, when I feel sad, and I press the F minor, I agree.
Actually the colors there are adjustable! You can click the cog icon in the circle of notes on the main page and change colors of each note individually - it will affect colors in most places all over the web-site. You can even make it black and white back again )
I really like the link you provided and have watched it before!
But - I do want to say that C == green is not arbitrary at all. It is consistent with my calculations, which are consistent with Newton's calculations. Usually I see the colours being assigned to notes as wrong.. but this C == green is consistent with mapping light, using octave equivalence, given by the following:
f_prime = f * 2 ** (i / 12)
# Where,
# f' is the derived f, (in this case Green {5.66 × 10^14 Hz})
# f is the reference f (in this case 261.63 Hz)
# i is the interval in semitones
Let's say that C == 261.63 Hz, and that Green == 5.66 × 10^14 Hz. Using the preceding formula we can make a small (python) program to check whether C == Green.
light_range_min = 400 * 10 ** 9 # Hz
light_range_max = 790 * 10 ** 9 # Hz
C = 261.63 # Hz
octave = 0
for octave in range(100): # we are just using a high number here
f_prime = C * 2 ** (12 * octave / 12)
if f_prime >= light_range_min:
octave = octave
break
print(f"C in the range of light has f == {f_prime}, which is {f_prime / 10 ** 9} THz. We had to go {octave} octaves up to arrive there")
# outputs: C in the range of light has f == 561846146826.24, which is 561.84614682624 THz. We had to go 31 octaves up to arrive there
We can look up colour charts like [0] or [1] and find that this frequency is in fact associated with the colour green.
Exactly! It's all made visual and interactive here https://chromatone.center/theory/interplay/spectrum/ - you can even slide the tuning of A4 by dragging left-to-right the last graph - it will show the distribution on 44th octave notes along the visual spectrum
What is it? The web site doesn't work (FF, Windows & macOS). If they really propose replacing pitch by color, how are they going to get people to tell minute differences apart? How are they going to display chords, or polyphony? Octaves? And as if written notation doesn't exclude enough people, they're now also excluding color-blind people, some 5% of the male population where I live.
Website is unusable for me on Firefox as well. Nothing is clickable and "This page is slowing down Firefox. To speed up your browser, stop this page". If I block 3rd party scripts and frames in uBlock then it works better
Yeah, it happens some times when you refresh the page before the wasm audio engine is loaded - then you just need to close the window and wait for 10-15 seconds before the background processes finish and the web-site should open just fine
In contemporary British English “program” is used for the computation-related senses. “Programme” is used for all the other senses, e.g. a concert programme.
Using “reprogramme” in a computation context is very old-fashioned and would be considered nonstandard spelling these days. I suspect this is someone taking BrE localisation too seriously or it’s a non-British person’s idea of what British English is.
I got that too, but had never seen that permission before.
I just went ahead and allowed it.
Current best practice is not to ask permissions like that (location, notifications, or programming midi devices) on landing, but to stick them behind an interaction like a toggle or button press.
Recently chrome started asking for permission to use MIDI, when before it did not. So lots of existing sites won't tell you that they will request MIDI, which is what most sites that request the webcam do for good UX.
It's been a 7+ years solo build research and design project that is based on my own research and experiments made to explore music as an engineer and independent learner. I was a drummer when I started working on Chromatone but now I have released a number of music albums and singles as solo musician, play 2-4 live sessions a week and help others get into music in their own way.
But I'm not fanatic about the colorful notes. On the main page of web-site you can click a cog icon in the "flower" logo and then adjust any of all of 12 note colors to your preference. And this palette will be used throughout the Theory articles and Practice apps. I know that some people might have synesthesia with conflicting colors. And that those who have music in their hands already wouldn't appreciate another door to the room they're already inside of. But yeah, no matter what language you use to get into music, finally we can always close our eyes and just listen to it. The instrument stickers I make for Chromatone get smaller with the growing skill of musicians using them.
So the Chromatone web-site itself is my gift to those who would like to go the same path from wondering what are all these notes about to having a variety of instruments at hand that I can teach, explore and perform music with. And many of them are those web-apps in the Practice section.
Check out these main points of interest there:
https://chromatone.center/practice/rhythm/circle/ Very powerful polyrhythmic metronome
https://chromatone.center/practice/pitch/spectrogram/ Colorful spectrogram of incoming signal. It's showing the significance of Chromatone coloring as it's absolute and can give exact color for any given frequency and vice versa. So we can see frequencies and relations between them. You can literally see timbre as lines of harmonics present in the sound. The better the mic - the better the spectrogram resolution and quality.
https://chromatone.center/practice/chord/fifths/ Very useful interactive Circle of Fifths with MIDI support, seventh chords and 4 inversions of each available to play with. Incredibly useful instrument for composers.
https://chromatone.center/practice/chord/array/ Tonnetz diagram colored with Chromatone looks quite appealing. Choose a tonic and a scale at the panel to the left (circle with the tonic note name) it will filter out inactive notes and chords. Multitouch available.
https://chromatone.center/practice/chroma/palette/ Minimalist and efficient visualization of MIDI and analysed sound notes in a GLSL shader.
https://chromatone.center/practice/midi/monitor/ Shows all MIDI signals received in a handy table view
https://chromatone.center/practice/synth/elementary/ Main synth on the web-site is quite powerful now and has saw/square oscillators, noise oscillators, Karplus-Strong string voices, sampler voices in a polyphonic synth with some reverb and ping-pong delay added. All adjustable with the left side panel (with keyboard icon).
https://chromatone.center/practice/generative/bounce/ Generative melodies with shifted period sine waves.
https://chromatone.center/practice/jam/random/ a tool for jams - click that one button and get a random BPM and scale to jam in for the next 10 minutes or so. It's like a geolocation for a jam session.
-----
The project is open-source https://github.com/chromatone/chromatone.center and I'm open not only to good advice but to actual contributions to the Theory articles in Markdown and also the Practice apps code written in Vue 3, Vitepress, UnoCSS, pug and other JS ecosystem goodness. Or just give the repo a star! We're approaching v3.0 soon - it will mark the completion of ongoing cleanup of tech debt from years of early development making the site and the NPM lib (https://www.npmjs.com/package/use-chromatone) robust and usable by many new music students, explorers and performers.
AMA!