Skip to content

Color Palette Generator

Verified

Generates harmonious color schemes with WCAG accessibility checks, contrast ratio validation, and export to CSS custom properties or design tokens.

By Anthropic 3,400 v1.1.0 Updated 2026-03-10

Install

Claude Code

Copy the SKILL.md file to your project's .claude/skills/ directory

About This Skill

Color Palette Generator creates harmonious, accessible color systems for web and mobile applications. Starting from a primary brand color or a mood description, it produces complete palettes with proper contrast ratios and semantic naming.

How It Works

  1. Input analysis — Accepts a hex color, brand description, or mood keywords
  2. Harmony generation — Produces complementary, analogous, triadic, or split-complementary schemes using color theory
  3. Scale creation — Generates 50-950 shade scales for each base color
  4. Contrast validation — Checks every text/background combination against WCAG 2.1 AA and AAA thresholds
  5. Export — Outputs CSS custom properties, Tailwind config, or JSON design tokens

Best For

  • Designers starting a new brand identity
  • Developers implementing dark/light mode switching
  • Teams needing to audit existing color systems for accessibility
  • Rapid exploration of color directions during early design phases

Accessibility First

Every generated palette includes a contrast matrix showing which color pairs meet WCAG AA (4.5:1 for normal text) and AAA (7:1) requirements. Colors that fail contrast checks are flagged with suggested alternatives.

Use Cases

  • Creating brand color systems from a single primary color
  • Validating color combinations for WCAG AA/AAA compliance
  • Generating dark mode palettes from existing light themes
  • Producing semantic color scales (success, warning, error)

Pros & Cons

Pros

  • + Automatic WCAG contrast validation
  • + Generates complete shade scales from single colors
  • + Multiple export formats for different toolchains
  • + Dark mode palette derivation built-in

Cons

  • - Color harmony is subjective — results need designer review
  • - Does not handle gradient or complex multi-stop color systems

Related AI Tools

Canva

Canva

Freemium

All-in-one visual design platform with AI-powered creative tools

  • Drag-and-drop visual editor with 250,000+ templates
  • Magic Studio AI suite (text-to-image, Magic Eraser, Magic Expand)
  • Background Remover for instant subject isolation
Get Started →

Related Skills

Design System Builder

Caution
CC Cu WS Cx

Sets up design token systems, component libraries, and style guides with consistent theming, spacing scales, and typography hierarchies.

5,100 design
View

Accessibility Auditor

Caution
CC Cu Cx

Audits web pages and components for WCAG 2.1/2.2 compliance, identifies accessibility violations, and generates fix recommendations with code examples.

3,700 design
View

Stay Updated on Agent Skills

Get weekly curated skills + safety alerts

每周精选 Skills + 安全预警