Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →jpoindexter/color-and-elevation
Build perceptually-uniform color palettes and physically-consistent depth systems with OKLCH ramps, WCAG/APCA contrast, semantic tokens, and elevation-as-lightness dark mode — concrete values and copy-pasteable CSS.
Passed 20 of 22 test cases with the skill, and 16 of 22 without it.
and 4 more in the full report
4 fixed16 passed either way2 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
The instructions your model reads when the skill loads.
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.
| 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.
/* Same hue, even perceptual lightness steps — looks like a real ramp */
--blue-300: oklch(0.78 0.12 250);
--blue-500: oklch(0.62 0.16 250);
--blue-700: oklch(0.46 0.14 250);
--brand: #4f46e5; /* sRGB fallback */
@supports (color: color(display-p3 1 1 1)) {
--brand: oklch(0.52 0.21 274); /* richer on P3 screens */
}
Browsers clamp out-of-gamut OKLCH back into the device gamut automatically, so OKLCH authoring is gamut-safe by default.
Tokens flow primitive → semantic → component. Never let a component reference a primitive directly.
1. Primitive ramps (raw, 50–950). One ramp per hue family + a neutral ramp. 11 steps. Generate by holding C/h roughly constant and stepping L evenly in OKLCH.
test cases passed, vs 16 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.