color-palette-generator

name

color-palette-generator

description

Generates accessible, harmonious color palettes with contrast-checked values, semantic roles (primary, surface, error, etc.), and CSS/Tailwind token outputs. Use this skill whenever a user says "generate a color palette", "create a color scheme for my app", "pick colors for my design system", "make accessible colors", "generate color tokens", "what colors should I use for this brand?", "check if these colors pass WCAG", or "create a dark mode color palette". Also activate when someone describes a brand or visual mood and wants a concrete color set. Do NOT use for choosing fonts (typography skill) or icon/illustration color matching (art direction skill).

Color Palette Generator

Design accessible, harmonious color palettes with WCAG-compliant contrast ratios, semantic roles, and ready-to-use CSS custom property outputs.

When to Use

• Starting a new design system and needing a foundational palette
• Creating a brand color system with primary, secondary, and semantic variants
• Adding a dark mode palette to an existing light mode design
• Checking whether existing colors meet WCAG contrast requirements

When NOT to Use

• Choosing illustration or photography color direction
• Typography and font pairing (separate concern)
• Image color palette extraction from photos

---

Workflow

Step 1 — Understand the Palette Requirements

Ask for:

1. Brand / mood: Is there a brand color to start from, or a mood description?
2. Use case: Marketing site / app UI / data visualization / dark mode
3. Number of colors: Minimal (2–3 base) or comprehensive (full scale)?
4. Output format: CSS variables / Tailwind config / Figma tokens / plain hex list

Step 2 — Design the Semantic Color Roles

A complete UI palette covers these semantic roles:

Role	Purpose
Primary	Main brand color — CTAs, links, active states
Secondary	Accent color — supporting actions, highlights
Success	Positive outcomes — confirmation, complete
Warning	Caution — degraded state, pending
Error / Danger	Destructive / failed — errors, delete actions
Neutral	Surfaces, borders, text — the workhorse
Surface	Background layers (page, card, modal)

Step 3 — Generate the Color Scale

For each base hue, generate a 10-step scale (50–900) following the OKLCH / HSL lightness curve:

Example: Blue primary

blue-50:  #EFF6FF  (near white tint — hover backgrounds)
blue-100: #DBEAFE  (light tint — selected backgrounds)
blue-200: #BFDBFE
blue-300: #93C5FD
blue-400: #60A5FA  (accessible on dark backgrounds)
blue-500: #3B82F6  (base / brand color)
blue-600: #2563EB  (primary buttons — passes 4.5:1 on white)
blue-700: #1D4ED8  (hover state for primary)
blue-800: #1E40AF
blue-900: #1E3A8A  (dark text on light backgrounds)

Step 4 — Check Contrast Ratios

For key text/background combinations:

Combination	Ratio	WCAG
blue-600 (#2563EB) on white	5.9:1	✅ AA
blue-500 (#3B82F6) on white	3.9:1	❌ AA (use for large text only)
blue-700 (#1D4ED8) on white	7.2:1	✅ AAA
White on blue-600	5.9:1	✅ AA

Step 5 — Generate CSS Custom Properties

/* ===================================
   Color Tokens
   Generated by color-palette-generator
   =================================== */

:root {
  /* Primary — Blue */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;

  /* Semantic roles — Light mode */
  --color-brand: var(--color-primary-600); /* use on white bg */
  --color-brand-hover: var(--color-primary-700);
  --color-success: #16a34a; /* 5.1:1 on white */
  --color-warning: #d97706; /* 3.1:1 on white — large text only */
  --color-error: #dc2626; /* 5.8:1 on white */
  --color-text-primary: #111827; /* 16.7:1 on white */
  --color-text-muted: #6b7280; /* 4.6:1 on white */
  --color-surface: #ffffff;
  --color-surface-alt: #f9fafb;
  --color-border: #e5e7eb;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --color-brand: var(--color-primary-400); /* lighter for dark bg */
    --color-brand-hover: var(--color-primary-300);
    --color-text-primary: #f9fafb;
    --color-text-muted: #9ca3af;
    --color-surface: #111827;
    --color-surface-alt: #1f2937;
    --color-border: #374151;
  }
}

Step 6 — Tailwind Config Extension

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#EFF6FF",
          100: "#DBEAFE",
          500: "#3B82F6",
          600: "#2563EB",
          700: "#1D4ED8",
          // ...etc
        },
        brand: "var(--color-brand)",
      },
    },
  },
};

---

Contrast Verification Table (output for each palette)

Text Color         | Background | Ratio  | WCAG AA | WCAG AAA
primary-600 text   | white      | 5.9:1  | ✅       | ❌
white text         | primary-600| 5.9:1  | ✅       | ❌
gray-700 text      | white      | 7.4:1  | ✅       | ✅
gray-500 text      | white      | 4.6:1  | ✅       | ❌

---

Output Format

1. 10-step color scale — hex values for each base hue
2. Semantic tokens table — role → token → hex → contrast ratio
3. CSS custom properties — light + dark mode :root block
4. Tailwind config extension — if applicable
5. Contrast verification table — key text/bg combinations

---

Safety & Confirmation

• Always flag colors that fail 4.5:1 AA contrast for normal text.
• Note that yellow and orange are notoriously difficult to make accessible — always check.
• Suggest a darker shade of warning yellow for text (#92400E on white = 7.4:1) vs. background use.
• For data visualization palettes, note that roughly 8% of men have color vision deficiency — recommend testing with a color blindness simulator.