Use when reviewing or designing a color palette for a UI, website, or app — seven principles for premium, calm, accessible color (palette size, muted tones, contrast, accent restraint, near-black/white, consistency, whitespace).
Installs into .claude/skills of the current project.
Are you the author of Color Principles?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/aka-kika-color-principles)
---
name: color-principles
description: Use when reviewing or designing a color palette for a UI, website, or app — seven principles for premium, calm, accessible color (palette size, muted tones, contrast, accent restraint, near-black/white, consistency, whitespace).
---
# Premium Color Principles
Seven principles for color that feels calm, premium, and accessible. Use them to review or design any digital interface — and reference them by number when giving feedback.
**Triggers:** color, palette, UI design, visual hierarchy, contrast, muted tones, accent color, design feedback, color theory.
## The 7 principles
### 1. Reduce your palette
The fewer colors you use, the more each one matters.
- 3 colors maximum
- Neutral grays as the base
- One accent color — for CTAs only
### 2. Use muted tones more often
If everything shouts, nothing stands out.
- Avoid saturated colors for large areas
- Muted tones read as premium and calm
### 3. Create intentional contrast
Contrast tells users where to look first.
- Minimum **4.5:1** for text (WCAG AA)
- Target **7:1+** for premium (WCAG AAA)
### 4. Use accent colors sparingly
Accent colors only work when they're rare.
- One accent per view/screen
- Reserve it for the primary action
### 5. Avoid pure black and pure white
Tiny shifts create different feelings.
- Use `#1a1a1a` or `#121212` instead of `#000`
- Use `#FAFAF7` or `#F5F5F0` instead of `#FFF`
### 6. Keep color behavior consistent
Users shouldn't have to relearn your colors.
- One action = one color, always
### 7. Let whitespace support color
Whitespace makes color intentional.
- Don't crowd colors together
## Feedback format
When reviewing a design, structure the response as:
1. **Assessment** — which principles it follows or violates
2. **Analysis** — specific feedback per principle
3. **Suggestions** — concrete hex recommendations
4. **Priority** — what to fix first
> Pairs well with [kika-design-system](../kika-design-system) — these are the general review lens; that skill is one opinionated system built on them.
