What Is the Circle of Fifths?
The Circle of Fifths is the interactive music theory wheel that maps how all 12 major and minor keys relate to one another through intervals of a perfect fifth. It is a go-to reference for students, songwriters, and producers who want to read key signatures and build chords at a glance.
Click any key on the wheel to instantly see its scale notes, diatonic chords, and key signature. Hear individual notes, single chords, or whole chord progressions played back live — every sound is generated right in your browser.
How to Use the Circle of Fifths
Read the three rings
The outer ring holds the 12 major keys, the middle ring shows their relative minor keys, and the inner ring lists the number of sharps or flats in each key signature.
Select a key
Click a segment on the outer ring for a major key or the middle ring for a minor key. The selected key and its relative are highlighted on the wheel, and the info panel updates immediately.
Explore scale notes and chords
The Scale Notes panel lists all 7 notes with the root highlighted — click any note to hear it. The Diatonic Chords panel shows the 7 chords in the key; toggle Triads and Sevenths, and click a chord to play it.
Play a chord progression
The Chord Progressions panel lists 6 common progressions with their Roman numeral formula and real chord names for the current key. Press the play button to hear the whole progression in sequence.
Features
Interactive 3-Ring Wheel
A clickable SVG circle with concentric rings for the 12 major keys, their relative minors, and each key's accidental count.
Key Signature Display
Instantly see how many sharps or flats belong to any key, updated the moment you select a new segment.
Scale Notes
View all 7 notes of the chosen major or natural minor scale with the root highlighted, and click any note to hear its pitch.
Diatonic Chords
See the 7 chords built from the scale, each with its Roman numeral, and click any chord to play it.
Triads & Sevenths Toggle
Switch between basic 3-note triads and richer 4-note seventh chords to compare the harmonies side by side.
Chord Progressions
Hear 6 widely used progressions — Classic, Pop, Jazz, 50s, Axis, and Country — with real chord names for the selected key.
Relative Key Highlighting
Selecting a major key highlights its relative minor on the wheel — and vice versa — so related keys are easy to spot.
Live Audio Playback
Every note, chord, and progression is synthesized in real time with the Web Audio API — no samples or plugins needed.
Responsive Layout
The wheel and info panels adapt to desktop, tablet, and mobile so you can explore keys on any screen.
Frequently Asked Questions
What is the circle of fifths used for?
It helps musicians read key signatures, find related keys, build the chords that belong to a key, and write chord progressions that sound harmonically correct. It is one of the most useful reference tools in music theory.
How do you read key signatures from it?
Moving clockwise from C adds one sharp per step (G has 1, D has 2, and so on); moving counter-clockwise adds one flat per step (F has 1, B♭ has 2). The inner ring of this tool shows that exact count for whatever key you select.
How do you find the relative minor?
Every major key has a relative minor that shares the same key signature — for example C Major and A Minor both have no sharps or flats. On the wheel, the relative minor sits in the middle ring directly inside each major key and is highlighted whenever you pick a major key.
What are diatonic chords?
Diatonic chords are built only from the notes of a single scale. In a major key the triads follow the pattern I, ii, iii, IV, V, vi, vii° — major, minor, minor, major, major, minor, diminished. The tool lists all seven for whichever key you choose.
What is the difference between triads and seventh chords?
Triads are 3-note chords (root, third, fifth). Seventh chords add a fourth note, the seventh, for a fuller sound. Use the Triads / Sevenths toggle to switch between the two and click a chord to compare how each one sounds.
How does it help with chord progressions?
The Chord Progressions panel turns Roman numeral formulas like I-IV-V-I or the pop I-V-vi-IV into the actual chord names for your selected key, and plays them back in sequence. It is a fast way to find chords that fit together when you are writing a song.
Why is it called the circle of fifths?
Going clockwise, each key sits a perfect fifth (7 semitones) above the previous one; going counter-clockwise, each is a perfect fourth above. That interval pattern wraps all 12 keys neatly into a circle.
Do I need speakers or headphones?
You need a sound output device to hear playback. All audio is generated directly in your browser with the Web Audio API, so there is nothing to download or install — just open the page and start clicking.
No comments yet. Be the first to comment!