What Is the Circle of Fifths?
The Circle of Fifths is one of the most important concepts in music theory. It visually maps the relationships between all 12 major and minor keys, showing how they connect through intervals of a perfect fifth.
Why Is It Important?
Key Signatures
Related Keys
Chord Building
Songwriting
How to Use This Tool
Exploring Keys
The circle has three rings. The outer ring displays the 12 major keys, the middle ring shows their relative minor keys, and the inner ring indicates the number of sharps or flats in each key signature.
Click any segment on the outer ring to select a major key, or click the middle ring to select a minor key. The info panel on the right updates immediately with all relevant details.
Viewing Scale Notes
Once a key is selected, the Scale Notes section shows all 7 notes in that scale. The root note is highlighted. Click any note to hear it played.
Working with Chords
The Diatonic Chords section shows the 7 chords that naturally belong to the selected key. Use the Triads and Sevenths toggle to switch between basic 3-note chords and more complex 4-note seventh chords. Click any chord to hear it.
Playing Chord Progressions
The Chord Progressions section lists 6 common progressions used in popular music. Each shows the Roman numeral formula alongside the actual chord names for the selected key. Click the play button to hear the entire progression played in sequence.
Features
Interactive Circle
A fully interactive SVG circle with three concentric rings for major keys, minor keys, and accidental counts.
- Click any segment to explore that key
- Visual highlighting of selected and relative keys
- Distinct colors for easy identification
Key Signature Display
Instantly see the number of sharps or flats for any selected key.
- Automatic updates when selecting new keys
- Clear visual representation
- Immediate feedback
Scale Notes
View all 7 notes in the selected major or natural minor scale.
- Root note highlighted for easy identification
- Clickable notes with audio playback
- Complete scale visualization
Diatonic Chords
See the 7 chords built from the scale degrees with flexible viewing options.
- Toggle between triads and seventh chords
- Roman numeral and chord name display
- Click to hear each chord via Web Audio
Chord Progressions
Explore 6 widely-used chord progressions including classic and modern patterns.
- I-IV-V-I (Classic progression)
- I-V-vi-IV (Pop progression)
- ii-V-I (Jazz progression)
- One-click playback for entire progressions
Audio Playback
All audio is generated in real-time using the Web Audio API.
- No external files or plugins needed
- Play individual notes or chords
- Complete progressions in your browser
Frequently Asked Questions
What is the Circle of Fifths used for?
The Circle of Fifths helps musicians understand key signatures, find related keys, build chords within a key, and compose chord progressions. It is a fundamental reference tool in music theory.
What is a relative minor key?
Every major key has a relative minor that shares the same key signature (same sharps and flats). For example, C Major and A Minor are relatives — both have no sharps or flats. The relative minor is always highlighted on the circle when you select a major key.
What are diatonic chords?
Diatonic chords are built using only the notes from a particular scale. In a major key, the diatonic triads follow the pattern:
- I - Major
- ii - Minor
- iii - Minor
- IV - Major
- V - Major
- vi - Minor
- vii° - Diminished
What is the difference between triads and seventh chords?
3-Note Chords
- Root note
- Third
- Fifth
Basic harmonic structure
4-Note Chords
- Root note
- Third
- Fifth
- Seventh
Richer harmonies
Use the toggle in the tool to switch between the two views and hear the difference.
Why is it called the Circle of Fifths?
Moving clockwise around the circle, each key is a perfect fifth (7 semitones) above the previous one. Moving counter-clockwise, each key is a perfect fourth above. This interval pattern creates the circular arrangement of all 12 keys.
Do I need speakers or headphones?
Yes, audio playback requires a sound output device. All sounds are generated directly in your browser using the Web Audio API — no downloads or plugins needed.
- Works with built-in speakers
- Compatible with headphones
- No installation required
- Real-time audio generation
No comments yet. Be the first to comment!