# Color Principles

> 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).

- Skill: `aka-kika/color-principles` (Agent Skill)
- Install (CLI): `npx skillmds@latest add aka-kika/color-principles`
- Raw SKILL.md: https://api.skillmd.com/api/skills/aka-kika/color-principles/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: aka-kika (https://skillmd.com/u/aka-kika)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/aka-kika/color-principles

---


# 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.