Color Palette & System Skill
How this skill behaves (read first)
This is a generative skill. Color has two opposite default failure modes: arbitrary (pick a nice blue, no system, fails contrast) and garish (apply every emotional/cultural association and standout trick → the over-colored "Willy Wonka" palette aesthetics warns about). So this skill gates:
- Establish brand, audience, and market — these drive the one set of hue/emotion/culture choices worth making.
- Apply the always-true core — a restrained, role-based, tokenized, accessible palette holds for any product.
- Make the expressive choices deliberately — surface base-hue/emotion/saturation/dark-mode as gated decisions, not defaults.
Then hand off to the audits: accessibility owns contrast ratios and color-blindness; aesthetics owns harmony and balance.
Step 0 — Establish context before choosing colors
- Brand & industry — existing brand colors/guidelines? Industry conventions (finance → trust/navy; kids → playful)? Check competitors for the field's visual language.
- Audience & market — who, and where — color meaning is culture-dependent (see the emotion reference caveat).
- Personality — premium/refined vs. playful/energetic? This drives saturation and neutrals more than hue.
- Modes — light only, or dark mode too?
State assumptions if proceeding without answers.
The always-apply core (true for any palette/system)
- Build on a harmony scheme, then refine. Start from a base color and a scheme — monochromatic/analogous (safe, low-contrast) or complementary (high-contrast, soften with tints/transitional tones) — then adjust saturation/brightness for interest.
- Neutral-dominant, accent-sparing — the 60-30-10 rule. ~60% primary/neutral surface, ~30% secondary, ~10% accent reserved for elements that must stand out (CTAs). Primary/secondary stay relatively neutral for readability.
- Define color by role, not just hue. A system needs: primary / secondary / tertiary accents (with on-color pairs), neutral/surface tones, and functional/semantic colors (success, warning, error, info).
- Keep functional colors distinct from brand. If the brand color is a bright red near the error red, define a separate error family so users don't confuse branding with feedback.
- Build tonal scales + tokens. Generate consistent tints/shades from each base; expose them as named variables/tokens (functional or numeric naming) so one change propagates and the system stays consistent.
- Never rely on color alone, and check every text/icon/surface pair for contrast — defer the actual ratios and color-blindness checks to the
accessibility audit, but the palette must be built to pass them.
The context-dependent decisions (surface, don't auto-apply)
Present each with its trade-off and a recommendation tied to Step 0. Stacking many saturated hues/associations is the failure mode.
| Decision |
Apply when |
Avoid / adapt when |
Default recommendation |
| Base hue / emotional tone |
Match hue to the feeling the brand wants (see reference) |
Picking a hue for taste alone, or chasing every association |
One intentional base aligned to brand + industry |
| Harmony scheme |
Complementary for vivid/high-energy; analogous/mono for calm/refined |
Complementary at full chroma (too intense) |
Analogous/mono as the safe default; complementary softened with neutrals |
| Saturation / vibrancy |
High saturation for playful/energetic brands |
Premium/enterprise (use restrained, desaturated tones) |
Match to personality; neutral anchor for any bold accent |
| Cultural adaptation |
Global product / specific markets (color meaning differs) |
Single-market where convention is settled |
Validate key hues against target markets |
| Number of accents |
One clear accent; a second only if it earns a role |
Many competing accent colors (garish, no focal point) |
One accent + functional colors; everything else neutral |
| Dark mode |
Product needs/expects it |
Bolting it on by simple inversion |
Design semantic colors for both modes (below) |
Color → emotion (the gated menu — use sparingly, context decides)
Yellow: happy/warm · Orange: energetic/enthusiastic · Red: stimulating/urgent/passionate (also alarm) · Blue: calming + trustworthy (navy → finance/tech trust) · Green: grounded/natural/success · Purple: creative/spiritual/premium · Pink: soft/nurturing (mind shifting gender connotations) · Brown/earth tones: stable/grounded. Caveat: these are Western-leaning and context-dependent — the same hue means different things by culture and surrounding colors. Pick one intentional association; don't paint with all of them.
Dark mode notes
Define semantic colors (purpose, not literal hue) so they adapt across modes; don't just invert light mode. Maintain contrast in both modes, signal elevation with lighter surfaces (not just shadow) in dark mode, and test in real lighting conditions.
Validate the result (orchestration)
Hand-offs name each lens by its installable skill name. Invoke one only if that skill is installed; if it isn't, this skill's own core already carries these rules — proceed without it rather than blocking.
After defining or revising the palette, hand the result to the audit lenses rather than declaring it done. These are candidate lenses — posture is set by docs/orchestration-policy.md, or route the whole thing through ux-design-review. Here, none are Tier A; accessibility and aesthetics are Tier B (offered) — under an existing design system aesthetics is suppressed and accessibility narrows to usage. If the user invoked this skill for one specific thing, respect that scope.
ux-accessibility-audit (Tier B — offer; narrow under a design system) — contrast ratios for every text/icon/surface pair (light and dark mode), and color-blindness safety (don't encode status by red/green alone). The palette must be built to pass this.ux-aesthetics-audit (Tier B — offer; suppress under a design system) — harmony and balance: is it neutral-dominant with a clear accent, or has it tipped into the over-colored, no-focal-point "Willy Wonka" zone?
If accessibility fails a pair or aesthetics flags garishness, return to the 60-30-10 / one-accent core.
Common do/don't patterns
| ❌ Don't |
✅ Do |
| Pick a nice color with no system |
Define roles: primary/secondary/tertiary + neutrals + functional |
| Equal amounts of several bright colors |
60-30-10: neutral-dominant, one ~10% accent |
| Apply every color-emotion association |
One intentional association tied to brand + market |
| Full-chroma complementary clash |
Soften with tints/neutrals; analogous/mono as the safe base |
| Brand red ≈ error red |
Separate functional color families from brand |
| Hardcode hex everywhere |
Tonal scales exposed as named tokens/variables |
| Encode status by color alone |
Color + icon/label (→ accessibility) |
| Invert light mode for "dark mode" |
Semantic colors designed for both modes; elevation via lighter surfaces |
| Ship without contrast checks |
Hand off to accessibility (ratios + color-blindness) and aesthetics |
Source lessons (Uxcel)
1---2name: ux-color3description: Design or critique a product's color palette and system — base hue, harmony, neutrals, semantic colors, tonal scales, and tokens. Applies the always-true core and gates context-dependent decisions (dark mode, brand expressiveness, accessibility trade-offs). Trigger when creating a color palette, choosing UI colors, building a color system, setting up color tokens, or reviewing a palette for issues.4license: MIT5---67# Color Palette & System Skill8910## How this skill behaves (read first)1112This is a **generative** skill. Color has two opposite default failure modes: **arbitrary** (pick a nice blue, no system, fails contrast) and **garish** (apply every emotional/cultural association and standout trick → the over-colored "Willy Wonka" palette `aesthetics` warns about). So this skill gates:13141. **Establish brand, audience, and market** — these drive the *one* set of hue/emotion/culture choices worth making.152. **Apply the always-true core** — a restrained, role-based, tokenized, accessible palette holds for any product.163. **Make the expressive choices deliberately** — surface base-hue/emotion/saturation/dark-mode as gated decisions, not defaults.1718Then **hand off to the audits**: `accessibility` owns contrast ratios and color-blindness; `aesthetics` owns harmony and balance.1920---2122## Step 0 — Establish context before choosing colors2324- **Brand & industry** — existing brand colors/guidelines? Industry conventions (finance → trust/navy; kids → playful)? Check competitors for the field's visual language.25- **Audience & market** — who, and **where** — color meaning is culture-dependent (see the emotion reference caveat).26- **Personality** — premium/refined vs. playful/energetic? This drives saturation and neutrals more than hue.27- **Modes** — light only, or dark mode too?2829State assumptions if proceeding without answers.3031---3233## The always-apply core (true for any palette/system)3435- **Build on a harmony scheme, then refine.** Start from a base color and a scheme — **monochromatic/analogous** (safe, low-contrast) or **complementary** (high-contrast, soften with tints/transitional tones) — then adjust saturation/brightness for interest.36- **Neutral-dominant, accent-sparing — the 60-30-10 rule.** ~60% primary/neutral surface, ~30% secondary, ~10% accent reserved for elements that must stand out (CTAs). Primary/secondary stay relatively neutral for readability.37- **Define color by role, not just hue.** A system needs: **primary / secondary / tertiary** accents (with on-color pairs), **neutral/surface** tones, and **functional/semantic** colors (success, warning, error, info).38- **Keep functional colors distinct from brand.** If the brand color is a bright red near the error red, define a separate error family so users don't confuse branding with feedback.39- **Build tonal scales + tokens.** Generate consistent tints/shades from each base; expose them as named **variables/tokens** (functional or numeric naming) so one change propagates and the system stays consistent.40- **Never rely on color alone**, and **check every text/icon/surface pair for contrast** — defer the actual ratios and color-blindness checks to the `accessibility` audit, but the palette must be built to pass them.4142---4344## The context-dependent decisions (surface, don't auto-apply)4546Present each with its trade-off and a recommendation tied to Step 0. **Stacking many saturated hues/associations is the failure mode.**4748| Decision | Apply when | Avoid / adapt when | Default recommendation |49|---|---|---|---|50| **Base hue / emotional tone** | Match hue to the feeling the brand wants (see reference) | Picking a hue for taste alone, or chasing every association | One intentional base aligned to brand + industry |51| **Harmony scheme** | Complementary for vivid/high-energy; analogous/mono for calm/refined | Complementary at full chroma (too intense) | Analogous/mono as the safe default; complementary softened with neutrals |52| **Saturation / vibrancy** | High saturation for playful/energetic brands | Premium/enterprise (use restrained, desaturated tones) | Match to personality; neutral anchor for any bold accent |53| **Cultural adaptation** | Global product / specific markets (color meaning differs) | Single-market where convention is settled | Validate key hues against target markets |54| **Number of accents** | One clear accent; a second only if it earns a role | Many competing accent colors (garish, no focal point) | One accent + functional colors; everything else neutral |55| **Dark mode** | Product needs/expects it | Bolting it on by simple inversion | Design semantic colors for both modes (below) |5657### Color → emotion (the gated menu — use sparingly, context decides)58Yellow: happy/warm · Orange: energetic/enthusiastic · Red: stimulating/urgent/passionate (also alarm) · Blue: calming + trustworthy (navy → finance/tech trust) · Green: grounded/natural/success · Purple: creative/spiritual/premium · Pink: soft/nurturing (mind shifting gender connotations) · Brown/earth tones: stable/grounded. **Caveat:** these are Western-leaning and context-dependent — the *same* hue means different things by culture and surrounding colors. Pick one intentional association; don't paint with all of them.5960### Dark mode notes61Define **semantic** colors (purpose, not literal hue) so they adapt across modes; don't just invert light mode. Maintain contrast in **both** modes, signal elevation with **lighter surfaces** (not just shadow) in dark mode, and test in real lighting conditions.6263---6465## Validate the result (orchestration)6667> Hand-offs name each lens by its installable skill `name`. Invoke one only if that skill is installed; if it isn't, this skill's own core already carries these rules — proceed without it rather than blocking.6869After defining or revising the palette, hand the result to the audit lenses rather than declaring it done. These are **candidate** lenses — posture is set by `docs/orchestration-policy.md`, or route the whole thing through `ux-design-review`. Here, **none are Tier A; `accessibility` and `aesthetics` are Tier B (offered)** — under an existing design system `aesthetics` is suppressed and `accessibility` narrows to usage. If the user invoked this skill for one specific thing, respect that scope.7071- **`ux-accessibility-audit`** *(Tier B — offer; narrow under a design system)* — contrast ratios for every text/icon/surface pair (light **and** dark mode), and color-blindness safety (don't encode status by red/green alone). The palette must be built to pass this.72- **`ux-aesthetics-audit`** *(Tier B — offer; suppress under a design system)* — harmony and balance: is it neutral-dominant with a clear accent, or has it tipped into the over-colored, no-focal-point "Willy Wonka" zone?7374If accessibility fails a pair or aesthetics flags garishness, return to the 60-30-10 / one-accent core.7576---7778## Common do/don't patterns7980| ❌ Don't | ✅ Do |81|---|---|82| Pick a nice color with no system | Define roles: primary/secondary/tertiary + neutrals + functional |83| Equal amounts of several bright colors | 60-30-10: neutral-dominant, one ~10% accent |84| Apply every color-emotion association | One intentional association tied to brand + market |85| Full-chroma complementary clash | Soften with tints/neutrals; analogous/mono as the safe base |86| Brand red ≈ error red | Separate functional color families from brand |87| Hardcode hex everywhere | Tonal scales exposed as named tokens/variables |88| Encode status by color alone | Color + icon/label (→ accessibility) |89| Invert light mode for "dark mode" | Semantic colors designed for both modes; elevation via lighter surfaces |90| Ship without contrast checks | Hand off to accessibility (ratios + color-blindness) and aesthetics |9192---9394## Source lessons (Uxcel)9596- [How to Create a Color Palette](https://uxcel.com/lessons/creating-a-color-palette-208)97- [Intro to Color Theory](https://uxcel.com/lessons/color-wheel-i-156)98- [Color in Design Systems](https://uxcel.com/lessons/color-systems-439)99- [How Color Affects Mood & Emotion](https://uxcel.com/lessons/how-does-color-affect-emotion-926)100- [Color Systems & Dark Mode](https://uxcel.com/lessons/color-systems-dark-mode-518)
Uxcel-Lab