Chord ColorsInteractive encyclopedia of music theory using color instead of sheet music

Why Chord Colors?

Traditional music theory education relies heavily on special notation, making it overwhelming and boring for many musicians. It's also inaccessible for a lot of non-English speakers and kids.

A huge number of famous musicians never learned to read sheet music, and many consider traditional music theory education to be creatively stifling.

I created Chord Colors so that anyone can explore what sounds good to them in a way that they can immediately translate to their instrument, without needing to learn a whole new language first.

By connecting the visual and auditory aspects of music directly, without going through the abstract route of notation, Chord Colors makes it easier for anyone to explore music theory and discover new musical ideas.

Color

I assigned a unique color to each note by overlaying a color wheel on top of the "Circle of Fifths", one of the foundational organizing systems in music theory. Each note gets a hue according to its position in the circle, so notes that look related sound related.

The result is a color-coded system that matches how we hear music, not how we write it.

Piano and guitar

Chord Colors uses the same color system for both piano and guitar.

On a piano, notes are arranged by pitch. This makes chords relatively easy to figure out once you know the "scale degrees" that make up that chord. In Chord Colors, those scale degrees are the numbers that you see on the chords page, such as 1, 3, and 5.

On a guitar, chords can be difficult to figure out on your own because notes are spread out across 6 strings, with each string having its own tuning. To make things more complicated, each guitar chord can be played in many different ways on a guitar, each with a slightly different sound.

Chord Colors lets you explore all of these different guitar chord positions. In addition, you can easily see what note and "scale degree" each string in a chord represents.

Try switching the instrument via the sidebar menu, or via the dropdown above the demo.

Progressions

I compiled 470 progressions browsable by genre or length.

Tap any one to hear what it sounds like. Tap the arrow on the right to see how to play it.

470 progressions browsable by genre and length.

Color wheel

On the wheel page you can find all of the basic three note chords that sound good in a particular key.

This is a great place to just experiment and hear how different chords interact, there's no wrong answer!

Tap on the gear icon at the top right of wheel page to explore an advanced music theory technique called "modal mixture" or "borrowed chords". This is a very powerful feature for discovering your own striking chord progressions!

Pin scales

Writing or practicing in a specific key? You can tap and hold on any scale name to pin it to the bottom so it's easy to refer back to while deciding on which chords to play. In the app below, we've already pinned a C major scale.

C major is pinned here.

Find matching chords

Once a scale is pinned, a new "matching" section appears on the chords page. All of the chords that sound good with that scale will appear in the "matching" section, and the names of the chords will appear "filled in", meaning they have a solid background color.

A chord is considered "matching" if every note in that chord is also found in the pinned scale.

C major is pinned while browsing chords in G. The chords that fit are filled in on the left.

Find matching scales

You can tap and hold on any chord to add it to your saved chords. Similar to a pinned scale, they will appear on the bottom of the screen.

Let's say you've saved a couple of chords and you want to solo or write a vocal melody over them. Typically it's hard to know what scales you can use.

With Chord Colors, all the scales that match your pinned chords will appear in a new "matching" section on the scales page, so it's easy to know which scales you can use. Matching scales will also be filled in. A scale is considered "matching" if it contains every note of the chords you've saved.

C and Gsus4 are saved below. Above you can see all of the scales in the key of C that match both those chords.

Saved chords

Save chords as you write. The saved screen holds the progression you're building.

With Chord Colors you can easily transpose to a different key. Tap the header where it says "Saved Chords in C", then tap a different note, such as F or A, and you'll see the whole chord progression change to the new key.

A saved funk progression: Cm9, E♭9, A♭9, G7♭5♯9.

Holding the system

To make Chord Colors work I had to build out a comprehensive design system and style guide that worked in both dark and light mode, where any color could be the primary color.

For each primary color I needed different shades depending on the context where it was used, all while preserving high contrast ratios and accessibility at every point.

I also carefully solved for the app needing to work on various screen sizes and orientations, as well as various accessibility font sizes and settings.

Reflections

Chord Colors is a labor of love. It took extreme focus on performance optimization, user experience, user testing, user research, a sophisticated design system, and a driving vision.

I'm most proud of the fact that the same product can be used by nearly anybody, regardless of language, age, or skill level.

Chord Colors is on the App Store and on the web. It also has a nice marketing website.