Color
Color decisions in this package are made in OKLCH (perceptual lightness L, chroma
C, hue H), not hex or HSL, because equal numeric steps in OKLCH are equal perceived
steps — which is what makes ramps even, themes coherent, and contrast predictable.
Hex is only an output format.
Workflow
- Read the design philosophy (from
design-direction); the palette's emotional
register comes from there, not from this skill.
- Construct the palette in OKLCH using
references/palette-construction.md — anchor
hue → neutral ramp (tinted, never pure grey) → accent ramp → semantic colors.
- If the work has themes, build dark and light as sibling palettes, not
inversions, per references/themes.md.
- Verify every text/background pair against
references/contrast-and-restraint.md
before shipping; it also covers when glow/saturation is earned vs. noise.
Which reference to load
| Situation |
Load |
| OKLCH mechanics, converting, browser/tool support |
references/oklch-foundations.md |
| Building a palette, ramps, data-viz series colors |
references/palette-construction.md |
| Dark mode, theme families, elevation in dark UIs |
references/themes.md |
| Contrast checking, WCAG/APCA, glow & saturation discipline |
references/contrast-and-restraint.md |
Non-negotiables
- Body text meets WCAG AA (4.5:1) minimum; UI chrome ≥ 3:1. Check, don't eyeball.
- Neutrals carry a trace of the anchor hue (C ≈ 0.005–0.02). Pure grey reads dead.
- One color is the loudest in any view. If two compete, demote one.
- Never ship a palette without rendering it in the real artifact and running the
critique skill on the result.
1---2name: color3description: Color4---56# Color78Color decisions in this package are made in **OKLCH** (perceptual lightness L, chroma9C, hue H), not hex or HSL, because equal numeric steps in OKLCH are equal *perceived*10steps — which is what makes ramps even, themes coherent, and contrast predictable.11Hex is only an output format.1213## Workflow14151. Read the design philosophy (from `design-direction`); the palette's emotional16 register comes from there, not from this skill.172. Construct the palette in OKLCH using18 [references/palette-construction.md](references/palette-construction.md) — anchor19 hue → neutral ramp (tinted, never pure grey) → accent ramp → semantic colors.203. If the work has themes, build dark and light as **sibling palettes, not21 inversions**, per [references/themes.md](references/themes.md).224. Verify every text/background pair against23 [references/contrast-and-restraint.md](references/contrast-and-restraint.md)24 before shipping; it also covers when glow/saturation is earned vs. noise.2526## Which reference to load2728| Situation | Load |29|---|---|30| OKLCH mechanics, converting, browser/tool support | `references/oklch-foundations.md` |31| Building a palette, ramps, data-viz series colors | `references/palette-construction.md` |32| Dark mode, theme families, elevation in dark UIs | `references/themes.md` |33| Contrast checking, WCAG/APCA, glow & saturation discipline | `references/contrast-and-restraint.md` |3435## Non-negotiables3637- Body text meets WCAG AA (4.5:1) minimum; UI chrome ≥ 3:1. Check, don't eyeball.38- Neutrals carry a trace of the anchor hue (C ≈ 0.005–0.02). Pure grey reads dead.39- One color is the loudest in any view. If two compete, demote one.40- Never ship a palette without rendering it in the real artifact and running the41 `critique` skill on the result.
jangles-byte