Color - one base color, varied by recipe

Digested from Erik D. Kennedy, Color in UI Design: A (Practical) Framework, The HSB Color System: A Practitioner's Primer, and rule 2 of 7 Rules for Creating Gorgeous UI. Paraphrased in our vocabulary.

1. The core skill is variation, not palette theory

The fundamental color skill for interfaces is turning ONE base color into many usable variants - hover states, borders, tinted backgrounds, dark headers. Complementary-wheel palette theory does not produce interfaces; a base color plus a variation recipe does. (Facebook-blue in all its shades is one hue, systematically varied.)

2. The variation recipe (in HSB)

Darker variant: brightness ↓ AND saturation ↑, hue may drift toward the nearest luminosity minimum (red 0°, green 120°, blue 240°). Darken by removing white, never by overlaying black - black overlay only drops brightness and gives dead, muddy darks.
Lighter variant: brightness ↑ AND saturation ↓, hue may drift toward the nearest luminosity maximum (yellow 60°, cyan 180°, magenta 300°). Push far enough and you reach white - that's the path tinted backgrounds live on.
Luminosity is unequal across hues: at identical S/B, yellow and cyan read brighter than red, green, blue. Contrast judgments must be made by eye (or checker), not by matching numbers.
Too loud? Drop saturation before changing anything else.

3. Black and white first

Design the page in grayscale until spacing, sizing, and hierarchy carry it alone; add color last and purposefully. One accent color over grayscale is already a complete system; a second color or a single-hue ramp is the ceiling for most pages. Too many colors in too many places is the fastest way to lose clean/simple.

4. Work in HSB, ship in hex

HSB matches how a painter thinks (what color, how rich, how bright); HSL's symmetric lightness axis does not. CSS speaks HSL/hex, so convert at the end.

Delta vs our system

CONFIRMS - Painter's palette. "One base color, varied" is exactly our painter's-palette discipline; Kennedy supplies the missing mechanics. - Black and white first = beauty-is-free / appetite. Restraint first, color as deliberate seasoning - same instinct as our scarce-emphasis and appetite rules. - Rejects palette-wheel theory - as do we; we never pick decorative palettes, we use project hex values.

ADDS - The darker/lighter recipe with directions. Our "painter's palette" names the goal but not the method. Concrete, adoptable: darker = B↓ S↑ (hue toward 0/120/240); lighter = B↑ S↓ (hue toward 60/180/300); never overlay black. - Luminosity inequality across hues - explains why token-equal colors don't look equal; contrast must be verified per pair, which his Accessible Color Generator does mechanically. - Grayscale-first as a working ORDER - our rules check the finished page; this dictates the sequence of making it.

TENSION - HSB vs our OKLch habit (feedback_html_output_rules.md uses OKLch). Not a real conflict - OKLch's perceptual lightness solves the same luminosity problem more rigorously than HSB eyeballing. Keep OKLch as the instrument; keep Kennedy's recipe as the intent (darker = richer, lighter = paler).