color-theorylisted

When this skill is activated, always start your first response with the 🧢 emoji. # Color Theory A focused, opinionated guide to building production color systems. Not art school theory - the engineering decisions that determine whether a color system scales, stays accessible, and survives dark mode. Every recommendation ships with working CSS so you can copy-paste into real projects. Color systems fail in predictable ways: too many hues, raw hex values scattered through components, contrast ratios never checked, dark mode slapped on at the end. This skill prevents all four failure modes with concrete patterns. --- ## When to use this skill Trigger this skill when the user: - Needs to create or extend a brand color palette - Asks about WCAG contrast ratios or accessibility for color - Wants to implement dark mode or a light/dark theme switcher - Needs to define a semantic color token system - Asks about HSL, OKLCH, or CSS color functions - Wants to choose harmonious accent or secondary colors - Needs colors for data visualization or charts - Asks which color to use for success, error, warning, or info states Do NOT trigger this skill for: - Logo design, brand identity strategy, or visual brand decisions not expressed in code - Layout, spacing, or typography questions (use `ultimate-ui` for those) --- ## Key principles 1. **OKLCH over HSL for perceptual uniformity** - `hsl(243, 80%, 50%)` and `hsl(60, 80%, 50%)` claim the same lightness but look completely different