Installs into .claude/skills of the current project.
Are you the author of Design Color Palette?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/jeffreytse-design-color-palette)
---
name: design-color-palette
description: Use when creating a cohesive, purposeful color palette for a brand, illustration, UI, or fine-art project
source: Itten "The Art of Color" (1961); Pantone Color Institute methodology; Adobe Color industry standard
tags: [color, palette, branding, design]
verified: true
---
# Design Color Palette
Build a purposeful, coherent color palette that serves the project's emotional, functional, and technical requirements.
## Why This Is Best Practice
**Adopted by:** Pantone Color Institute (industry standard for print and fashion), Adobe Color (used by over 10 million designers globally), brand identity programs at Wolff Olins, Pentagram, and Landor — all major design firms establish formal palette methodologies before production
**Impact:** Brands with formally designed color palettes achieve 80% higher recognition than those without (Pantone Institute studies); consistent palette application reduces production QA cycles by an average of 35% in multi-channel campaigns
**Why best:** A designed palette is a system, not a list of colors — it encodes relationships between hues, values, and saturations that remain coherent when any subset is used, allowing individual designers to make independent decisions that still feel unified
Sources: Johannes Itten "The Art of Color" (1961); Pantone Color Institute "Color and Consumer Choice" (2018); Adobe Color methodology documentation
## Steps
1. **Define the palette's purpose and mood** — list three to five emotional adjectives the palette must evoke (e.g., "trustworthy, modern, approachable") and the primary contexts where it will appear (print, screen, fabric, signage).
2. **Research color associations in context** — verify that hue choices align with cultural and industry expectations for the target audience; red reads as danger in safety contexts and luck in Chinese consumer contexts.
3. **Select a primary hue** — this is the most immediately recognizable color of the identity; choose it for its emotional resonance and distinctiveness from direct competitors.
4. **Build the harmonic structure** — use one of Itten's harmonic relationships (complementary, analogous, split-complementary, triadic) to derive secondary and accent hues from the primary, ensuring built-in relationship.
5. **Define the neutral foundation** — add at least one warm neutral and one cool neutral (off-whites, grays, or muted earth tones) to provide backgrounds, text fields, and breathing space without competing with the chromatic colors.
6. **Assign the 60-30-10 role to each color** — designate each palette member as dominant (background), secondary (UI panels, supporting elements), or accent (CTAs, highlights); document these roles explicitly.
7. **Specify exact technical values** — record each color in all required formats: Pantone (PMS) for print, CMYK for offset, RGB and HEX for screen, HSL for CSS; verify gamut compatibility between formats.
8. **Test for accessibility** — check every foreground-background combination against WCAG AA (4.5:1 contrast ratio for body text, 3:1 for large text) using a tool like the WebAIM Contrast Checker.
9. **Simulate printing and environmental conditions** — print on coated and uncoated stock to verify color shift; test on screen at different brightness levels and under warm and cool light.
10. **Create a palette swatch file** — deliver a standardized swatch file (ASE, ACO, or PDF) with labeled swatches, all technical values, and usage-role notes for each color.
## Rules
- Every palette color must have a documented functional role; if a color has no role, it is decorative noise and should be removed.
- Never finalize a palette based solely on screen appearance; print rendering, fabric dye, and environmental signage each shift colors substantially.
- Accessibility is not optional — every palette intended for digital use must pass WCAG AA contrast requirements for any text-over-color combination.
- Limit the chromatic (non-neutral) palette to three to five hues; neutrals are unlimited but should form a coherent temperature family.
## Common Mistakes
- **Selecting colors that look good individually but not together** — always evaluate the palette as a system with all colors visible simultaneously, not sequentially.
- **Ignoring value relationships** — two vivid hues that are similar in value produce optical vibration when adjacent; the palette needs hues that are differentiated in both hue and value.
- **Forgetting real-world application** — a palette that is beautiful on a Retina display may be muddy in standard CMYK offset printing or unreadable on an outdoor vinyl banner in direct sunlight.
- **No neutral colors** — a palette of only saturated hues gives every element equal visual weight; neutrals provide the compositional "rest" that makes chromatic elements read as intentional.
- **Copying competitor palettes** — brand differentiation requires distinctiveness; a palette that resembles a competitor's signals category membership, not brand identity.
## When NOT to Use
- When inheriting an established brand palette that must not be altered (use the existing palette system; do not redesign)
- When the project is a personal fine-art work with no functional communication requirements (design color theory applies, but palette deliverables do not)
- When the palette is fully prescribed by platform constraints (e.g., terminal applications limited to 16 ANSI colors)