Building a Scalable Color System for Modern Digital Products

Lock your base color as stop 500 — express it in HSL

Start with your chosen primary. This is stop 500. Convert to HSL immediately — it gives you direct control over hue, saturation, and lightness separately. The hue angle (H) stays constant across all 11 stops; only L and optionally S change. Starting in hex or RGB means guessing at relationships between stops.

Set the lightness anchors at both extremes

Before filling the middle, define your two poles. Stop 50 ≈ L 95–97% (almost white, still perceptibly tinted). Stop 950 ≈ L 4–7% (almost black, still carrying the hue). These anchors define the full range. Without them, the middle stops will drift.

Distribute the 9 intermediate stops on a perceptual curve

A linear lightness distribution doesn't look linear to human eyes — the mid-range appears compressed and the extremes too spread. Use an eased curve: smaller gaps between 300–600, larger gaps at the extremes. Adjust after visually checking the rendered scale.

Tune saturation at the extremes to avoid muddiness

At very high lightness (50–200), full saturation looks washed out or aggressively vivid — pull it to 60–80%. At very low lightness (800–950), full saturation looks artificial — reduce to 70–85%. The middle (300–700) stays near full saturation to keep identity. Render and adjust by eye.

Verify contrast at each stop — in both light and dark mode

Every stop needs to work in context. Run each through a contrast checker against white, your dark background, and your primary text color. Targets: 50–200 ≥ 4.5:1 with darkest text; 400–600 ≥ 4.5:1 with white; 700–800 ≥ 4.5:1 with white for text. Adjust failing stops by shifting L a few points.

Name with a prefix and number — never the visual value

Name with a consistent prefix and the stop number: blue-50, blue-100 … blue-950. Never name by visual description (light-blue, sky, navy) — those become wrong the moment you adjust the shade. The number is semantic-neutral and survives any future palette revision.

Map scale stops to semantic tokens — never reference raw stops in components

Once the scale exists, create a semantic token layer on top of it. Components should only ever consume semantic tokens, not raw scale stops. This lets you swap the entire scale (or individual stops) later without touching any component. Semantic tokens describe function, not value.

Primary scale (required)

Your brand hue, 11 stops. The one described above. Every interactive state, accent fill, and focus ring derives from this scale.

Neutral / gray scale (required)

11 stops from near-white to near-black. Slightly warm or cool to harmonize with your primary. Used for everything that isn't accented: backgrounds, text, borders, dividers, subtle surfaces. Design it with as much care as the primary — it's used far more.

Error / danger scale (required)

A red hue, 11 stops. Used exclusively for error states, destructive action fills, validation failures. Because red is semantically loaded, this scale should never bleed into decorative use. Keep it disciplined.

Success scale (required)

A green hue, 11 stops. Confirmation states, completion indicators, positive metric highlights. If green is your primary, shift success to a teal or emerald hue to maintain semantic separation.

Warning scale (required)

An amber/yellow hue, 11 stops. Non-blocking cautions, rate-limit notices, “review before continuing” states. Yellow is notoriously hard to get contrast right at mid-stops — test stop 500 especially carefully against white.

Secondary accent scale (optional)

Only build this if your product has a clear second interaction color — a secondary CTA, a separate product line, or data viz needing a second category. Use an analogous or split-complementary hue. Don't add it just to avoid looking plain.