Piano Key Chord Chart
Which keys to press for every chord · 12 roots × 9 chord types · tap to light the keyboard & hear it
How to play
- Pick a root and a chord type and the keyboard lights up the exact keys to press. Everything is shown in root position — the root at the bottom, then the chord stacked upwards.
- The pattern is what to take away, because it is the same in every key. A major chord is always root, then 4 semitones up, then 3 more. A minor chord flips them: 3 then 4. Count the keys between the lit ones — black and white both count — and you can build any chord anywhere without a chart.
- The other types follow the same logic. Diminished is 3 + 3, augmented is 4 + 4, sus4 replaces the middle note with the 4th, and the four-note chords add one more interval on top.
- Tip — if a chord feels like a stretch, play it as an inversion: move the bottom note up an octave so the notes sit closer together. It is the same chord and usually sounds smoother when you change between chords.
- Tap a chord to highlight the keys you press and hear the chord.
- The key with the white ring is the root (the note the chord is named after). The other highlighted keys are the rest of the chord.
- A major chord is root + 4 + 7 semitones; a minor chord flattens the middle note; a 7 chord adds one more note on top.
- Tap any key to hear that single note. Play repeats the current chord. Vol sets volume.
- Keyboard — Tab to a chord, key or control, Enter/Space to activate. Scroll the keys sideways on small screens.
Visualize chords. This widget has a lot of useful features.
Firstly, it’s a chart where you’ll be able to see clearly what keys to play on the piano for more than 100 types of chord. Just click around on the interface with your mouse (or use your computer keyboard) to try it out. This will help you in visualizing chord shapes as well as hearing them played in real-time.
How to Use the Piano Chord Widget
At its core it’s a grid of chord names that correspond to the button you press. These range from simple major and minor through to sus4, augmented, diminished and seventh chords. You then just tap on one of them and the virtual piano keyboard beneath will illuminate notes for that particular chord. This is always in root position as the root note are always at the bottom of the shape. If you examine the piano, you’ll see where the highlighted keys are. If you notice a white ring around one of those keys, that key is the root note of the chord and gives the chord its name. The rest of the lit keys is the extra notes that make it the type of chord it is. Above the keyboard you will find a text display telling you exactly what notes are used in that particular chord. This provides a visual clue as to how each chord work without having to refer to another book.
Direct interaction is possible with the keyboard keys too. Simply click on whichever key (black or white) you wish to play. It will sound out that individual note. So if you don’t feel like practicing chords right now you can try some different pitches or even practice your melody this way too. The keys are immediate and you can hear how they relates in terms of time and pitch.
Above the chord grid is several controls that allow you to control how you listen to this app. The play chord button will play the chosen chord again. If you have selected a chord but wish to move your hands to a real instrument, then this is helpful so you can hold the chord in your mind’s ear. You can repeat playing the same chord over and over again until you are comfortabley with the tone and shape of it. A volume slider also allows you to control the master output level. Perhaps the initial volume is too high/loud for you; perhaps you’re working somewhere where the volume needs to be turned down. Dragging the slider to the right increase the sound, while dragging it towards the left decreases the volume. It will affect any sound produced by the widget, from a single note to a complete chord.
Clicking on the fullscreen button (top right) will expand the widget so it fills your screen. The keyboard buttons is bigger and easy to read at that size. On smaller screens, this can be a handy way of getting more space different than you’d have with the regular view. Pressing the escape key or the same button will return you back to normal.
If you need some pointers quickly, hit the how to play button. This opens a help panel that briefly explains the core concepts, such as what the visual indicators refer to. How does the keyboard map work etc. It’s a handy reminder that sits on screen as you learn and if you’re feeling confident enough, you can hide it away again and concentrate only on the instrument.
To start with, try choosing a major chord such as C major and have a look at the ‘normal’ triad shape. Next, select C minor and notice that it has shifted the middle note a semitone lower. Although the outer notes remain unchanged, the subtle alteration brings a very different mood to the chord. Comparing the above chords in this way will help you learn what makes each chord quality (major/minor etc.) distinctive. This is where this tool can close the theory and practice gap.
So if you find that a particular chord shape is just too large for you to reach across on the piano itself then play the same chord as an inversion on the widget and notice how notes change. The widget shows the notes in root position for clarity. But knowing the intervals lets you move these shapes around freely up and down the keyboard of your real piano.
Play around with the various chord types on offer in the grid. Listen for the difference between a major seventh chord that sounds smooth or a dominant seventh chord that adds tension. Make use of the volume control so you can play at a comfortable level, and also switch into fullscreen mode when you need a little extra breathing room.
You should of begun with some chords you are familiar with and expand outwards to try new combinations.