color

name	color
description	Use when defining a color palette, picking shades, fixing washed-out colors, choosing greys, hitting accessibility contrast, or coloring data visualizations. Covers HSL over hex, palette breadth (~10 colors × 5–10 shades), defining shades upfront, hue-rotation tricks for brightness, warm/cool greys, accessible contrast, and not relying on color alone.

Color

When to use this skill

• A palette is being defined for a new product or design system.
• A "5 perfect colors" generator output is being applied to a real interface (and it's not working).
• Lighter or darker shades of a color are looking washed out or muddy.
• Greys feel sterile or off.
• White text on a colored background isn't passing WCAG contrast.
• A chart or status indicator relies entirely on color to communicate.

Core stance

Real interfaces need more colors than people expect: many shades per color, and many semantic colors. Define them up front, work in HSL, and lean on contrast (not just hue) for both accessibility and color-blind users.

Principles

1. Use HSL, not hex/RGB. HSL maps to how humans perceive color (hue, saturation, lightness), so two visually similar colors look similar in code too. Browsers understand hsl()/hsla() natively. Don't confuse HSL with HSB — they're different color models, and HSL is what CSS supports.

2. A real palette has more colors than you think. A "5 hex codes from a generator" palette can't build anything. A working palette has:

• Greys: 8–10 shades. Three or four sound like enough until the moment you need a value between two of them.
• Primary color(s): 1–2 colors with 5–10 shades each. The palest shades make tinted backgrounds; the darkest shades work as text.
• Accent / state colors: distinct hues for success, warning, danger, info, plus possibly more for category coloring (chart series, calendar events, tags).

For a complex UI, ~10 distinct colors with 5–10 shades each is normal.

3. Define shades up front; never lighten/darken on the fly. Don't use SCSS lighten()/darken() or runtime adjustments — you'll end up with 30 nearly-identical blues. Set a fixed scale and stick to it. Process:

1. Pick the base ("would this work as a button background?") — usually the middle of the scale.
2. Pick the darkest ("would this work as text on a tinted bg?").
3. Pick the lightest ("would this work as a subtle alert background?").
4. Fill in the midpoints (700, 300), then their midpoints (800, 600, 400, 200) — typically 9 stops total (100–900).

For greys, start at the edges (darkest text color, lightest off-white) and fill the middle.

4. Lightness alone kills saturation; rotate hue to keep brightness. As lightness moves away from 50%, the same saturation feels weaker. Two ways to keep colors looking lively at the extremes:

• Bump saturation as you go darker or lighter.
• Or rotate hue toward perceptually-bright hues (60° yellow, 180° cyan, 300° magenta) when lightening, and toward dark hues (0° red, 120° green, 240° blue) when darkening. Yellow's dark shades work much better as warm browns than as olive — that's hue rotation in action.

Don't rotate more than ~20–30° or it reads as a different color.

5. Greys don't have to be neutral. A touch of saturation gives greys temperature:

• Cool greys: a few percent saturation pulled toward blue (~210°).
• Warm greys: a few percent saturation pulled toward yellow/orange (~40°).

To keep the temperature consistent at the extremes, increase saturation slightly on the lightest and darkest shades.

6. Accessible contrast doesn't require ugliness. WCAG: 4.5:1 contrast for normal text, 3:1 for large (≥18px). Two recoveries when colored backgrounds fail:

• Flip the contrast. White-on-color often fails; dark-on-light-tint of the same hue (a pale mint with dark green text) usually passes AAA. Bonus: it stops grabbing the eye away from primary content.
• Rotate the hue. When neither lightening nor darkening hits ratio without going pure white, rotate the text color toward a brighter hue (cyan, yellow, magenta). You can hit AAA without losing chromaticity.

7. Never rely on color alone. Add an icon, a label, position, or shape. For categorical data (chart series, status badges):

• Pair color with a glyph or label.
• Prefer contrast within a hue (light vs. dark blue) over distinct hues (blue vs. orange) — color-blind users distinguish lightness more reliably than hue.

Quick reference

• Color values: HSL.
• Shade count: 8–10 per color, including greys.
• WCAG contrast: 4.5:1 normal text, 3:1 large text.
• Lightening a saturated color: bump saturation, or hue-rotate toward 60/180/300.
• Darkening: bump saturation, or hue-rotate toward 0/120/240.
• Cool greys: hue ~210°, saturation 8–15%.
• Warm greys: hue ~40°, saturation 8–15%.
• Status colors typically needed: red (danger), yellow (warning), green (success), blue (info).
• Charts: prefer light-vs-dark of one hue over rainbow palettes for color-blind safety.

Attribution

Heuristics distilled from Refactoring UI by Adam Wathan & Steve Schoger (https://refactoringui.com). Independent skill package; not affiliated with or endorsed by the authors.