color-system
Color system
A color system is a few ramps, each step doing one job, named by role and measured as rendered. Sources: Jakub Krehel's better-colors and oklch-skill, each fact tagged, checked against W3C, APCA, Radix, culori, MDN and Tailwind's docs and source; where a source was wrong (white text on 600, v3 hex sold as Tailwind's palette, @theme without inline, APCA's sign, Lc 60 for body text, 9 steps, five out-of-gamut example values, a hex fallback that is another color, cyan always lowest, the opacity modifier's output), the file gives the official form and says what the source said. Numbers marked "computed" were checked with an OKLab, Display P3, WCAG 2 and APCA implementation. The CSS features themselves (oklch(), color-mix(), relative color, light-dark(), contrast-color(), P3 declarations) and Adam Argyle's recipes are in modern-css COLOR.md. The owner's own token design in app-ui TOKENS.md and landing-page-ui SYSTEM.md wins wherever it differs; each difference is a one-line note in the topic file.
Apply only the routes and checks for the selected job. Read a linked skill's named file from its installed folder when available, or from the linked source. Report an unavailable required reference instead of inventing it. [skill-authoring, DISTRIBUTION.md#composing-skills]
| The job | Read |
|---|---|
Choosing a notation, why OKLCH, channels and formatting, HSL hue drift, converting and bulk conversion, color-mix() and relative color in tokens, gradient interpolation spaces |
FORMATS-AND-OKLCH.md |
| Which ramps a system needs, the role of every step (Tailwind and Radix), white text on the solid fill, neutrals, status hues, the brand color, a correct ramp, culori, the chroma-percentage algorithm, scale labels, several hues at once | PALETTES.md |
| Measuring the rendered pair, WCAG 2 and APCA thresholds, Lc's sign, fixing a pair through lightness, the lightness gap, text polarity, translucent and computed colors | CONTRAST.md |
| Compute WCAG 2 contrast between hex colors with unrounded pass/fail checks | scripts/contrast.py |
| Primitive and semantic tiers, the role inventory, naming grammar and anti-patterns, tokens only in their role, one color one meaning, one filled action, culture | TOKENS-AND-NAMING.md |
| The dark palette, the switching mechanism, increased contrast per appearance, gamut, max chroma by L and H, the clamp, P3 as an enhancement, hex fallbacks | DARK-MODE-AND-GAMUT.md |
Tailwind v4's OKLCH palette and 11 steps, a scale in @theme, semantic tokens and the doubled utility, .dark and @theme inline, the opacity modifier, migrating a hex theme |
TAILWIND.md |
| Audit stance, palette inventory, the before-you-finish scan, P0 to P3 severity, verification tiers, the report table and verdict | AUDIT.md |