color-and-elevation
Installation
SKILL.md
Color & Elevation Systems
A design system's color and depth layers must be perceptually engineered, not hand-picked. This skill gives the math, the tokens, and the CSS to ship palettes that stay accessible across light/dark, sRGB/P3, and every screen.
1. Color models — what each is for
| Model | Axes | Strength | Fatal flaw | Use for |
|---|---|---|---|---|
| HEX / RGB | r,g,b | Universal, gamut-true | Not human-legible; no perceptual ops | Storage, final output |
| HSL / HSV | h,s,l/v | Easy mental model | L is not perceptual — hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) both "50%" but yellow is ~6× brighter |
Quick tweaks only — never for ramps |
| LCH / Lab (CIE) | L,C,h | Perceptually uniform | Hue shifts (blue→purple) on lightness change | Print, legacy perceptual work |
| OKLCH / OKLab | L,C,h | Perceptually uniform, no hue shift, predictable | Newer; needs fallback for old browsers | Palette generation, the default |
Why OKLCH wins for palettes: equal steps in L look equally spaced to the eye, and changing L or C does not drift the hue. HSL's lightness lies — that is the #1 cause of muddy, uneven ramps. Author in OKLCH, ship HEX/RGB fallbacks.