Ux Color

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:

1. Establish brand, audience, and market — these drive the one set of hue/emotion/culture choices worth making.
2. Apply the always-true core — a restrained, role-based, tokenized, accessible palette holds for any product.
3. 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)

• How to Create a Color Palette
• Intro to Color Theory
• Color in Design Systems
• How Color Affects Mood & Emotion
• Color Systems & Dark Mode

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Uxcel-Lab
• Source: Uxcel-Lab/product-skills
• License: MIT
• Homepage: https://uxcel.com

Install and usage instructions live in the source repository linked above.