Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Calculate, review, and generate web color systems using RGB, HSL, LAB, OKLCH, contrast ratios, luminance, opacity, blend modes, and light/dark mode transformations. Use when auditing accessible colors, converting color models, deriving palettes, checking WCAG contrast, building theme tokens, or debugging opacity and CSS blend math.
| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✓→✗ | ▼ Worse | 18% | 0% |
| case-19 | ✓→✗ | ▼ Worse | 24% | 0% |
| case-22 | ✓→✗ | ▼ Worse | 0% | 0% |
| case-02 | ✓→✓ | ＝ Same ✓ | 4% | 0% |
| case-03 | ✓→✓ | ＝ Same ✓ | 99% | 0% |
Use this skill when colors need to be explainable, accessible, and reproducible. It focuses on color math that affects real UI outcomes: contrast, palette relationships, perceptual lightness, opacity, and blending.
guidelines.md to select the smallest relevant file set.references/color-systems/rules.md for implementation decisions.references/color-systems/examples.md when editing code.workflows/audit-color-system.md for multi-step derivation or debugging.| Resource | Purpose | |----------|---------| | guidelines.md | Routes tasks to the right reference files | | references/source-map.md | Book source and chapter/section traceability | | references/color-systems/knowledge.md | Core concepts and terminology | | references/color-systems/rules.md | Practical rules, guidelines, and exceptions | | references/color-systems/examples.md | Bad/good examples and refactoring approach | | references/color-systems/patterns.md | Reusable formula and implementation patterns | | references/color-systems/checklist.md | Review checklist and red flags | | workflows/audit-color-system.md | Step-by-step workflow |
Derived from Math for Web Design by Paul McFedries, Chapter 7: The mathematics of color. Citations are tracked in references/source-map.md.
Other measured skills in the registry, with their headline benchmark lift.