A skill dedicated solely to color. Implements palettes by medium, sharing color theory and accessibility across media. Layout/components/interaction are in the sibling skill design-uiux。
Applicable / Not Applicable
Applicable: Web page / prototype color schemes, App platform color schemes (iOS/Android/desktop), CLI colored output, TUI themes, brand color system design, dark mode adaptation, data visualization color schemes, contrast/color blindness fixes.
Not applicable: layout structure adjustments, component selection, interaction flows — go to design-uiux. Dynamic systems requiring a backend go to code implementation.
🔴 Core Hard Gate · Three-Direction Drafts (100% mandatory · skipping invalidates)
For any task that will produce new visual colors,regardless of whether there is a style reference or a brand name, the first step must be to producecolor drafts in three differentiated directions(each direction with a complete palette: primary + secondary + neutral scale + semantic colors + background), and only after the user selects, execute the final version.
- "Just use Material colors" is not exempt — produce 3 differentiated palettes within the Material context
- The three directions must be genuinely differentiated (different hues / saturation / character), not the same design with changed lightness
🛑 Failure Modes and Remedies (when the hard gate is violated)
| Trigger | First-line fix | Fallback |
|---|---|---|
| Weak runtime cannot produce three versions in parallel | Output versions serially one by one, delivering each to the user as soon as it is saved | Single version + note "only 1 version due to runtime limitation" |
| User cannot decide among the three directions | Recommend by context (trust→blue family / energy→warm orange family / innovation→purple family / nature→green family) | List the typical applicable brand characters of the three directions so the user can match themselves |
| Color decision lacks contextual signals | Ask about the four elements: audience / scenario / emotion / brand tone | Default to a neutral blue-gray professional style, noting "default value, adjustable" |
| Contrast verification tool unavailable | Use WCAG known-safe combinations (dark background with light text / avoid yellow on white) | Note "contrast pending actual measurement" and give conservative recommended values |
| WebSearch fact verification fails | Note "unverified" and continue with conservative values | Use platform official known color values (e.g., iOS systemBlue #0A84FF) |
Fact verification first
For assertions involving specific products / platforms / specifications (e.g., iOS systemBlue color value, WCAG version requirements), before starting, first WebSearch verify, and do not assert based on training corpus.
Medium Routing Table
Upon receiving a task, first determine the medium (when multiple signals overlap, follow row order), then go to the corresponding style file to implement colors:
| Artifact form | Medium | Secondary index (selection guidance) |
|---|---|---|
| Web page / prototype / visualization / slide color schemes | HTML | html/INDEX |
| Native App (iOS / Android / desktop) color schemes | App | app/INDEX |
| Command-line tool color output / style | CLI | cli/INDEX |
| Terminal full-screen TUI theme / color gamut degradation | TUI | tui/INDEX |
Each medium's INDEX points to that medium's style.md(ready-made theme templates + color tokens, copy and use).
Platform-agnostic shared layer · Color methodology
Cross-medium color discipline, all mediums reference color/INDEX：
| Theme | File | Override |
|---|---|---|
| Color theory | color/theory | Hue / lightness / saturation / color wheel / color schemes |
| Theme master list | color/themes-catalog | 20 built-in themes + 13 cross-platform popular presets (Nord/Dracula/Catppuccin/OneDark/RoséPine/GitHub/Monokai...) full tokens |
| Color palette master list | color/palettes-catalog | Brand color scales ×6 + neutral scales ×3 + semantic colors + Okabe-Ito + 4 named palettes |
| Palette templates | color/palette-templates | Color scale generation / dark mode derivation / custom scale extension |
| Accessibility | color/accessibility | Contrast / color blindness safety / dark mode hard metrics |
| UI style master list | color/styles-catalog | 67 styles (49 general + 8 landing page + 10 BI) with full attributes for primary color/light-dark mode/performance/a11y/mobile/conversion |
Color decision path (single source of truth shared by the four medium branches; each medium's style.md does not repeat this section)
- Define context: audience / scenario / emotion (trust→blue, energy→orange, innovation→purple, see theory.md semantics). Completion criteria: all three elements of audience/scenario/emotion are written down, not vague descriptions.
- Three-direction draft gate: produce three palettes from the style spectrum → user selects. Completion criteria: three directions have been produced and are genuinely differentiated (see hard gate definition), and the user has selected one or has explicitly requested the default.
- Build complete palette: primary (1) + secondary (1-2) + neutral scales (5-7) + semantic colors (4) + background (2-3). Completion criteria: all five color slot categories have values filled in, with no missing items.
- Accessibility hard metrics: contrast meets standards (body text ≥ 4.5:1 / large text ≥ 3:1), icon/text redundancy added where color conveys information, neutral scales retuned for dark mode (reduce saturation, increase contrast). Completion criteria: all three items of contrast/redundant encoding/dark mode have been checked (see color/accessibility.md checklist).
- Solidify tokens: implement per medium (CSS variables / App tokens / ANSI / true color hex). Completion criteria: color values are written in the corresponding medium's token form, not scattered hardcoding.
- Scenario adaptation: light/dark switching, color gamut degradation (TUI), TTY color off (CLI). Completion criteria: the target medium's adaptive branch (if applicable) has been verified not to break.
Color implementation per medium
- HTML → CSS variables paste
:root（html/style 7 theme templates) - App → platform tokens (app/style 5 sets including platform override quick reference iOS/iPadOS/watchOS/tvOS/Android/WearOS)
- CLI → ANSI color codes + semantic prefixes (cli/style including shell compatibility quick reference)
- TUI → true color hex, degrade to 256/16 (tui/style including terminal compatibility quick reference + 4 theme templates)
Sister skill
Structural issues of layout / components / interaction / information architecture / scenario adaptation → design-uiux. This skill only handles "color"; structural issues are not here.
Self-check
- Palette includes primary + secondary + neutral scale + semantic colors
- Contrast meets standards (light / dark, body text ≥ 4.5:1)
- Never convey information by color alone (add icons / text redundancy)
- Colorblind-safe (use Okabe-Ito for data visualization)
- Tokenized, theme change takes effect in one place
- Dark mode neutral scale retuned (lower saturation, raise contrast, deep blue-gray background not pure black)