Color Hierarchy Analyzer

The color hierarchy analyzer is a live preview of how a primary, secondary and muted color behave together on real controls, so you can see the ordering before you build it.

What is Color Hierarchy Analyzer?

The color hierarchy analyzer is a live preview of how three coordinated colors behave together. You set a primary, a secondary and a muted supporting color, and the tool renders a sample panel with a primary call to action, a secondary button and muted body text, so the relationship between the three tiers is visible immediately rather than something you have to imagine. It answers a question that palette strips cannot: given these three colors and a real interface, does the eye land on the right one first?

• Color hierarchy is created by relative weight, not by hue alone.
• The primary color is the one the eye reaches first, usually because it is the most saturated or the most contrasting against the surrounding surface.
• The secondary sits behind it, close enough in family to feel related but deliberately quieter.
• The muted tone carries supporting copy, where legibility matters but attention does not.
• Because those judgements depend on comparison, seeing all three applied at realistic size is the only reliable test; a secondary that looks restrained in isolation can compete with the primary once the two share a screen.

The preview uses real buttons and paragraphs rather than flat swatches, and that is deliberate. A swatch tells you what a color is; a button tells you what it does. Once the colors are applied to controls at their real size, problems that were invisible in a palette become obvious: a muted tone that is too dark and pulls the eye, a secondary that disappears into the surface behind it, or a primary that looks handsome in isolation but sits too close in luminance to its own background to be readable at all.

Treat it as a color hierarchy tool for the early, fluid stage of a build. Tune the three roles against the preview until the ordering reads correctly, then lock them in and derive interactive states from the same values using the lighten and darken tools. Because only three values drive the whole panel, changing direction is cheap, which makes it an unusually fast primary secondary muted color preview to iterate against: swap the primary and the entire hierarchy re-tests in a second.

Two limits are worth stating plainly.

• The tool is a preview rather than a measurement, so it will not tell you the contrast ratio of any pairing; run the colors through a contrast checker for that.
• And a three-level hierarchy is a simplification, since real design systems usually add surfaces, borders and states on top of it.
• Use it whenever you want to preview color hierarchy quickly, and confirm the extended palette still reads in the intended order once those extra roles exist.

One more habit makes the tool more useful: change the primary first, then the secondary, then the muted tone, and judge each move against the other two rather than in isolation. Reordering them in that sequence keeps the comparison honest, because a muted tone chosen while the primary is still undecided often turns out too strong once the primary finally lands. It is a small workflow detail, but it is the difference between a hierarchy that survives review and one that has to be rebuilt later.

How to use Color Hierarchy Analyzer

1. Set the primary colour first, then the secondary, then the muted tone.
2. Read the preview, which applies the three roles to real controls rather than flat swatches.
3. Change the primary first when tuning, since the other two are read relative to it.
4. Confirm the ordering still holds once surfaces, borders and states are added.

When to use Color Hierarchy Analyzer vs related tools

Use this analyzer to judge the relative weight of a three-color hierarchy on real controls. Use a contrast checker when you need the numeric ratio of a pairing, and the palette balance analyzer when you want aggregate lightness and chroma figures. When you need the numeric ratio of a pairing a contrast checker supplies it, and the palette balance analyzer measures lightness and chroma across a whole set.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Color Hierarchy Analyzer