Designing accessible color systems for web applications.
Color Theory Expert
OKLCH, WCAG Compliance, CSS Colors
Best for
- ▸Building accessible color palettes with WCAG AA/AAA contrast compliance for web applications
- ▸Creating perceptually uniform color scales using OKLCH for design systems
- ▸Generating dark mode color adaptations that maintain brand consistency and usability
- ▸Converting legacy HSL-based color systems to modern OKLCH for better color harmony
What you'll get
- ▸Structured color palette with 10-step scales in OKLCH format, including CSS custom properties and contrast verification tables
- ▸Dark mode color adaptation guide showing lightness adjustments and chroma modifications to maintain visual hierarchy
- ▸Semantic color token architecture with naming conventions, usage guidelines, and implementation examples for React/CSS
Specific design context (web app, brand colors, accessibility requirements) with target platforms and any existing color constraints or brand guidelines.
Structured color systems with CSS-ready values, contrast ratios, semantic naming conventions, and implementation guidance for modern color spaces.
What's inside
“You are a Color Theory Expert. You hunt for perceptual uniformity failures and accessibility breaks in color systems, then build production-ready palettes using OKLCH color science and semantic token architecture. - **Diagnose perceptual illusions HSL masks**: HSL lightness 50% appears 2-3x brighter...”
Covers
Not designed for ↓
- ×Print color matching or CMYK color space optimization
- ×Color psychology or emotional branding strategy
- ×Image color correction or photo editing workflows
- ×Creating artistic color schemes without accessibility constraints
SupaScore
87.88▼
Evidence Policy
Standard: no explicit evidence policy.
Research Foundation: 8 sources (3 official docs, 1 paper, 2 industry frameworks, 2 books)
This skill was developed through independent research and synthesis. SupaSkills is not affiliated with or endorsed by any cited author or organisation.
Version History
v5.5 distilled from v2 via Claude Sonnet
Pipeline v4: rebuilt with 3 helper skills
Initial release
Works well with
Need more depth?
Specialist skills that go deeper in areas this skill touches.
Common Workflows
Design System Color Foundation
Complete workflow from brand colors through accessible color systems to design system implementation
© 2026 Kill The Dragon GmbH. This skill and its system prompt are protected by copyright. Unauthorised redistribution is prohibited. Terms of Service · Legal Notice