Interactive Circle of Fifths

Runs entirely in your browser — no audio or data ever leaves your device (see methodology).

How It Works

The circle of fifths is normally printed as a diagram to be memorised. That is the least useful form it can take, because the diagram itself contains no answers — it is an index, and an index is only worth having if you can look something up in it. This version is built to be asked questions: click any position and it returns that key's signature drawn on a stave, its relative minor, the seven chords you can build in it, and the two neighbouring keys that sit one accidental away on either side. The arrangement is worth explaining before the tool is worth using. Each step clockwise moves the tonic up a perfect fifth and adds exactly one sharp, or removes one flat. C major has nothing; a fifth above is G major with one sharp; a fifth above that is D major with two. Going anticlockwise moves down a fifth and adds a flat instead. That is the entire mechanism, and it produces the striking property that adjacent keys share six of their seven notes — which is precisely why a piece can move to the key next door almost imperceptibly and why a move across the circle sounds like a genuine event. Three positions on the wheel carry two names, and this tool draws them as two names rather than quietly picking one. At five sharps the key is B major, which is also C flat major with seven flats. At seven sharps it is C sharp major, which is also D flat major with five flats. In both cases one spelling is clearly the practical choice and the tool says which and why. At six the two spellings tie exactly — F sharp major needs six sharps, G flat major needs six flats — and there is no arithmetic winner, so both are shown and the choice is described as what it is: a decision made by the surrounding music rather than by a rule. The chord panel is the part that turns the diagram into a working tool. Harmonising any major scale in thirds gives a fixed pattern of qualities — major on the first, fourth and fifth degrees, minor on the second, third and sixth, diminished on the seventh — and that pattern is the same in every key. What changes is the actual chord names, and those are what you need when you sit down to play. Every chord shown links straight into the chord builder set to that chord, so working out that a song in A major will probably use D and E major and F sharp minor takes one click rather than a scale calculation. Two further links from each position handle the questions the circle exists to answer. One step clockwise is the key's dominant, the chord and key it most naturally moves toward; one step anticlockwise is its subdominant. Clicking either moves the wheel there, so you can walk a modulation around the circle and watch the signature change by one accidental at each step. That is a far better way to internalise why the circle is a circle of fifths, specifically, than any amount of looking at a static picture. The wheel is drawn as scalable vector graphics, so it stays sharp at any size and adapts to a phone screen, and it is paired with an ordinary row of buttons underneath. That pairing is deliberate rather than redundant: a clickable shape inside an SVG cannot be reached with a keyboard, and a tool that only works with a mouse or a fingertip excludes anyone navigating by keyboard or screen reader. The buttons do everything the wheel does. The key signature at each position is drawn on a real stave rather than described in words, because where the accidentals sit is part of what the signature is. Sharps and flats each go in a fixed order that never changes — F, C, G, D, A, E, B for sharps and the exact reverse for flats — and each has an assigned line or space that differs between the treble and bass clefs. Reading a signature at sight means recognising that shape, and the only way to learn a shape is to look at it. No server is involved at any point: the whole twelve-position table is part of the page, so the wheel responds instantly and keeps working offline. Whichever position you land on becomes part of the URL, which makes a specific key something you can bookmark or cite rather than a state you have to set up again. From there, each signature has a page of its own going considerably deeper than this panel does — into which instruments are pitched there, and which of them find that key easy for reasons that have nothing to do with how many accidentals it prints.

FAQ

Why is it a circle of fifths rather than a circle of anything else?

Because moving up a perfect fifth changes the key signature by exactly one accidental. Twelve such steps return you to where you started, so the fifth is the interval that generates all twelve keys in one loop with the smallest possible change at each step.

What is the relative minor and where is it on the circle?

The relative minor shares a key's signature and sits three semitones below its tonic. On this wheel it is shown on the inner ring at the same position as its major, because they are the same seven notes with a different centre.

Why do some positions on the circle have two names?

Because at the bottom of the circle the sharp side and the flat side meet, and the same pitches can be spelled either way. B and C flat, F sharp and G flat, and C sharp and D flat are the three pairs, and all six spellings appear in real notation.

How does the circle help me work out which chords fit a song?

Find the key, then read the seven diatonic chords it produces. Most songs draw the large majority of their chords from that set, and the chords immediately clockwise and anticlockwise on the wheel are where the common borrowings come from.