| description | Use when generating a full shade ladder (50, 100, 200, ..., 900, 950) from a single brand seed colour, when a design system needs perceptually-even contrast at each step, when an HSL-derived palette looks visually uneven across hues, when a brand colour change needs to ripple through every token without rewriting hex values, when picking which shade pairs satisfy WCAG 1.4.3 (4.5:1 normal text) and 1.4.11 (3:1 UI components) at a glance, when a gradient or shade transition looks muddy or washed out, when wide-gamut display-p3 colours need an sRGB fallback gate, or when a colour custom property must animate or transition smoothly. Prevents the classic HSL shade-ladder anti-pattern (perceptually non-uniform; the same `50%` lightness in HSL means different visible brightness across hues), the constant-L-constant-chroma trap where the same numeric chroma is out-of-gamut for some hues and inside gamut for others (yellow vs blue at high chroma), the single-tier token chain (brand colour = button colour) that makes a brand refresh painful, the untyped custom property that snaps instead of transitioning, the unguarded display-p3 colour that clips on sRGB displays, and the assumption that text-on-shade-500 pairs are always AA-compliant without verifying the ratio. Covers the OKLCH model (perceptual L axis 0-1, chroma 0-0.4, hue 0-360 with hue 0 = magenta NOT red), the relative-colour-function syntax `oklch(from <seed> calc(l + N) c h)` to derive shades from a single brand seed, the 11-step ladder convention (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) with L mapped to each step, contrast pair guarantees aligned to WCAG 2.2 SC 1.4.3 (4.5:1 normal, 3:1 large) and 1.4.11 (3:1 UI/graphical), the three-tier brand-to-system token chain (raw brand -> primitive -> semantic -> component), `@property` registration for animatable colour customs, `color-mix(in oklch, ...)` for perceptually-uniform interpolation, wide-gamut handling via `color()` + `display-p3` + `@supports` gating, and emission as CSS custom properties under `@layer tokens, theme, base, components, utilities;`. Keywords: oklch, OKLCH palette, OKLCH shade ladder, perceptually uniform palette, relative color, relative-color syntax, color-mix, oklab, brand seed, brand color, brand palette, shade ladder, color scale, 50 100 200 300 400 500 600 700 800 900 950, palette generation, hue rotation, chroma, L axis, gamut, gamut clipping, display-p3, wide-gamut, sRGB fallback, design tokens, primitive token, semantic token, component token, three-tier token chain, action-primary, surface, on-surface, @property typed custom property, animatable color, WCAG contrast, 4.5:1, 3:1, 1.4.3, 1.4.11, palette looks washed, colors do not look balanced, gradient muddy, shade ladder uneven, hardcoded hex everywhere, brand-color change painful, colors inconsistent at same L, contrast fails AA, how to generate palette from brand color, what is OKLCH, how to make accessible palette, oklch shade generator, color tokens for a design system, how to derive colors from one brand color.
|
