Hierarchy Color And Tone

Hierarchy through color and tone

Color is the most attention-grabbing visual dimension and the most accessibility-loaded. Used well, it can establish a hierarchy of importance at a glance. Used poorly, it creates noisy, fatiguing, or inaccessible UIs. This skill is about using color and tone deliberately, as a third hierarchy axis on top of size and weight — almost never as the only hierarchy signal.

When this is the decisive sub-aspect

• You're picking the primary color, accent palette, and neutral ramp for a design system.
• You're designing status badges, semantic colors (success/warning/danger), or a chart palette.
• You have a layout where size and weight hierarchy work but the page still feels "flat" or "monochrome."
• You're trying to fix a "noisy" UI — too many colors, all competing.
• You're checking accessibility and need to keep hierarchy intact while satisfying contrast requirements.

Core ideas

Tone (value/contrast) is the universal hierarchy axis

Value is how light or dark a color is; contrast is the value difference between figure and ground. Tone hierarchy works across hue, theme (light/dark), color blindness, and grayscale rendering. It's the most robust hierarchy dimension you have.

A workable tone ladder for foreground text on a light background:

primary text       hsl(0 0% 9%)      contrast 19.9:1   /* near-black */
secondary text     hsl(0 0% 35%)     contrast  9.9:1
tertiary text      hsl(0 0% 50%)     contrast  6.4:1
disabled text      hsl(0 0% 70%)     contrast  3.6:1   /* WCAG AA fails for body */

Use this ladder additively with size and weight: display is large + heavier and highest contrast; caption is small + light and lowest contrast. The three axes compound.

Mirror the ladder for dark themes (light values on a dark ground), tuned for the different perceptual response to light-on-dark.

Color (hue) carries categorical meaning, not rank

Hue is a categorical signal: red, blue, green are different kinds, not different amounts. Using hue to rank items ("red is most important, orange is next, yellow is third") fails for colorblind viewers and contradicts cultural expectations.

Use hue to encode category or state, not rank:

• Status semantics: green = success, yellow = warning, red = danger/destructive.
• Brand emphasis: the primary brand color marks the action the brand wants you to take.
• Categorical data: chart series, tag colors, project labels.

For ranking, use tone (value) and saturation, which behave like amounts.

Saturation distinguishes emphasis from background

Saturated colors call for attention; desaturated colors recede. A useful pattern: full-saturation for emphasis, desaturated/muted for background.

primary action       full saturation, full hue       /* "Save" button */
recommended option   medium saturation               /* hover, selected state */
disabled / inactive  desaturated to grey             /* unavailable items */

When a brand color appears everywhere at full saturation, it loses meaning — the eye dismisses it as decoration. Reserve saturation for the things you want noticed.

One primary color, one or two semantic colors, the rest neutral

A common failure mode: the brand has a primary, secondary, tertiary, and accent color, plus warning, error, success, info. Eight colors in active use means the eye can't tell what means what.

A robust default palette has three roles in active color:

1. Primary — the brand color, used for primary actions and selection states.
2. Destructive — red, used only for destructive actions and errors.
3. Success / muted positive — used sparingly for confirmation states and positive deltas.

Everything else lives in the neutral ramp (5–10 grey values from background to primary text). Neutrals do most of the work; color is reserved for moments.

Build a neutral ramp

A useful neutral ramp at 9 stops:

neutral-50    background, lightest                hsl(0 0% 98%)
neutral-100   subtle background, hover            hsl(0 0% 96%)
neutral-200   borders, dividers                   hsl(0 0% 92%)
neutral-300   strong borders, disabled inputs     hsl(0 0% 85%)
neutral-400   placeholder text, icons             hsl(0 0% 65%)
neutral-500   muted text, captions                hsl(0 0% 50%)
neutral-600   secondary text                      hsl(0 0% 40%)
neutral-700   primary body text                   hsl(0 0% 27%)
neutral-800   strong text, headings               hsl(0 0% 18%)
neutral-900   highest contrast, display text      hsl(0 0% 9%)

For dark themes, invert (but slightly compress, since white-on-black is more glaring than black-on-white).

When you find yourself reaching for a "fourth" colored element on a page, stop. It probably belongs in the neutral ramp.

Color tinted toward the primary

A subtle move that lifts perceived quality: tint your neutral ramp very slightly toward the primary brand color. Pure-grey neutrals can feel sterile; a 2–4% chroma toward the brand makes the whole UI feel cohesive.

/* Pure neutral */
neutral-700: hsl(0 0% 27%);

/* Tinted toward a blue brand */
neutral-700: hsl(220 6% 28%);

The difference is invisible side by side and obvious on the whole UI.

Worked example: a status badge system

Three badges encoding three states. Color carries the category; tone and weight carry the rank.

<style>
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
  }
  .badge-success {
    background: hsl(142 70% 96%);
    color:      hsl(142 70% 22%);   /* dark text on light tint, contrast > 7:1 */
  }
  .badge-warning {
    background: hsl(38 95% 95%);
    color:      hsl(38 90% 25%);
  }
  .badge-destructive {
    background: hsl(0 80% 96%);
    color:      hsl(0 75% 32%);
  }
  .badge-neutral {
    background: hsl(0 0% 96%);
    color:      hsl(0 0% 30%);
  }
</style>

<span class="badge badge-success">●  Paid</span>
<span class="badge badge-warning">●  Pending</span>
<span class="badge badge-destructive">●  Overdue</span>
<span class="badge badge-neutral">●  Draft</span>

Each badge uses both hue (category) and tone (legibility). The dot icon adds a non-color signal so colorblind users can still differentiate at a glance.

Worked example: a primary action among secondary actions

<style>
  .btn { padding: 0.5rem 1rem; border-radius: 0.375rem; font-weight: 500; cursor: pointer; }
  .btn-primary {
    background: hsl(220 90% 50%);
    color: white;
    border: 0;
  }
  .btn-secondary {
    background: white;
    color: hsl(0 0% 27%);
    border: 1px solid hsl(0 0% 85%);
  }
  .btn-tertiary {
    background: transparent;
    color: hsl(0 0% 40%);
    border: 0;
  }
</style>

<button class="btn-tertiary">Cancel</button>
<button class="btn-secondary">Save draft</button>
<button class="btn-primary">Publish</button>

The primary uses full saturation + brand hue + white text. The secondary uses neutral-on-neutral (no color emphasis). The tertiary uses no surface, just dimmer text. The eye picks the primary instantly.