Piano Chord Inversion Chart

This interactive chart lets you hear and see how a piano chord inversion works. Use your computer keyboard or mouse to play the sound. It aims to demonstrate how changing the bass note of the same collection of notes produce a different texture.

First, select your root note from the top row of buttons; any note between B and C is fine. Then select one of the chord types listed underneath the root selection. There are choices for major, minor, augmented and diminished triads plus various sixth and seventh chords. Once chosen the chart display in root position by default.

How to Use the Piano Chord Chart

To turn the chord around you have a inversion button. If the root note is in the bass then that’s the root position. If the third of the chord is at the bottom this is called the first inversion. Second inversion then has the fifth at the bottom. There is also a third inversion available for seventh chords where the seventh note is down at the bottom.

The other chord tones are shown in blue and the bass note is highlighted in amber so you know what it is. Tap the Play button and it sounds the complete chord immediately. Tap the Roll button, and it will play the notes one by one from low to high. That way you can hear what’s called the stacking of intervals.

Also available are piano graphic, which you can tap on to hear each note individually. It is handy if you want to check your melody line or isolate just the bass note. The slider controls the master gain of the audio engine.

Some browsers do not play anything until there has been some sort of interaction such as pressing the Play button. That’s a normal precautionary security step taken by browser apps when it comes to playing audio from websites. Click the Fullscreen button if you want to make the widget bigger and have more room (keys become larger and is easier to tap on smaller displays).

The controls are accessible with your keyboard. Tab moves focus around to the buttons and sliders. Hit spacebar or enter to choose whichever control has focus. That way, even without a mouse, you can get in on the chart action. If you forget how they work, there’s a quick reminder in the help panel.

Listen for the voice leading when you try various inversions and root notes. You will also hear that the feeling of harmony is centred on the bass note. A first inversion often sounds smoother than root position. Adding seventh chords increases the movement and colour. The Roll option helps you to understand how chords work internally.

For classical reference, there are figured bass symbols in the chart too. These numbers represents the intervals above the bass note. It connects traditional notation with more familiar chord names. If you find this information unhelpful, you can turn it on and off again.

The emphasis is towards what you hear and see as it happens. Move from inversion to inversion on the same chord. For example, play a major triad in root position, then move it to its first and second inversion. You’ll hear that the lowest note changes the weight of the harmony. This will familiarise you with the sound of chords as well as the shape and movement of the bass line. It is a practical approach to learning about harmony without referring to sheet music.

As a writer, or student of analysis, it’s a good tool to use as a reference point. If you’re composing a piece that has chords in a particular way, you can see what that inversion sounds like on the keyboard. For instance, this could help you make decisions about voicings for piano or any other instrument. What you hear is reinforced by what you see. It connects the dots between theory and action.

The interface is simple and direct, with no menu diving or settings tweaking. Pick a chord, hit play and go. It’s instantly responsive, allowing for quick changes. It is easy to try things out on the fly. You can play in real-time; as mentioned above, there are no presets. Everything plays in real time. The audio engine generates tones in real time.

I encourage you to explore with the volume down to a comfortable listening level. Since this uses an audio engine that creates tones in real time, it doesn’t stress your computer system. You can have the page open while doing something else and use it as a kind of reference tool to practice or check yourself quickly.

As you move along, don’t hesitate to return to other types of chords. There is something special about the symmetry of diminished and augmented chords. Sixth chords can add another color to seventh chords. They each open up their own ways to move between notes. All of this is clearly outlined in the chart.

If you’re a student or a musician, share it with them. It’s a handy teaching tool for demonstrating inversions. You’ll find that the visual difference between the upper voices and bass note is useful. It takes away any guesswork from what you might be describing verbally when trying to explain a chord shape. We all get to hear the same thing simultaneously.

Experiment with rapid switching between inversions and use the Roll function to hear how the notes stack together. Turn the keyboard away from you, cover it up and simply listen. Can you guess what inversion they are playing just by ear? If not, keep trying as it trains your ear to understand how harmonies move around. This is a great exercise for developing the ear.

It is full screen on a tablet or mobile. This shows the keys in a bigger size, which is handy for tapping accurately on your phone/tablet. It also rearranges itself to match your screen width so you get the same experience but with more space around the keyboard. It is perfect if you want to learn while out and about.

As you make your selection, the chart updates automaticaly. There’s no delay, no lag. What you choose gets reflected on screen in an instant. This immediate feedback makes the experience of learning interesting. It allows you to remain in the zone while experimenting.

You don’t need music theory speak either. Chord names are straight-forward and use regular terminology. No degree required here. Just enjoy. The interface is self-explanatory and easy to use. Begin playing immediately. Spend some time with each option. How you engage with the widget is up to you. There’s no wrong or right answer here. All that’s needed is your curiosity. Follow what sounds good to you. Explore new textures and sounds.

You will notice from the piano keyboard picture above that it includes exactly which pitches are sounding. It spans a range of three octaves. That’s enough to include most commonly used chord voicings. There is no confusion between the black and white keys. You get a clear idea of where the notes sit on the instrument. This is what is visually prominent.

The bass note, which attracts attention to the root or foundation of the chord. From this note everything else are constructed. Altering it alters the nature of the harmony. This is the strongest component of any inversion.

If you’ve forgotten what each control does, don’t worry! Use the help toggle. It gives a brief overview of each feature. When you’re finished, hide it and go back to playing. That means the interface is always clean and focused.

If you’d like, try following along with a song you’re familiar with. Can you find the chords? What about their inversions? How did the composer move the bass? This brings all those abstract concepts together with something familiar. In doing so, it helps make the theory seem more relevant and practical.

The widget is compatible with any moddern browser. There’s no need for plugins or installations. It lives right inside your web page. So wherever you have internet access, it has you covered. It works from school, work, or home.

Theory isn’t everything, it’s about feeling and listening too. Use this chart as a place to play with your ideas. So go on and press those keys.