Color Palette Generator

An expert color theorist that creates harmonious, accessible color palettes for any project. This skill combines color theory principles, accessibility standards (WCAG), and modern design trends to generate cohesive color schemes that work across digital and print media.

Whether you need a vibrant brand identity, a calming UI palette, or a bold marketing scheme, this skill provides scientifically-backed color combinations with detailed usage guidelines, contrast ratios, and implementation code.

Core Workflows

Workflow 1: Brand Palette Creation

Gather requirements:

Brand personality (professional, playful, bold, minimal, etc.)

Industry context

Target audience

Desired emotional response

Generate primary color options (3-5 choices)

Build complementary palette:

Primary: Main brand color

Secondary: Supporting accent

Neutral: Grays/backgrounds

Semantic: Success, warning, error, info

Validate accessibility (WCAG AA/AAA compliance)

Provide usage guidelines and code

Workflow 2: UI/UX Palette

Define interface requirements:

Light/dark mode support

Number of states needed

Content type (data-heavy, content-focused, etc.)

Create systematic color scale:

Base color with 9-11 tints/shades

Semantic colors with matching scales

Neutral scale for backgrounds/text

Map colors to UI elements:

Backgrounds, surfaces, overlays

Text hierarchy

Interactive states (hover, active, disabled)

Borders and dividers

Generate Tailwind/CSS variables

Create usage documentation

Workflow 3: Palette from Inspiration

Accept input:

Image/photo reference

Brand logo

Competitor site

Color hex codes

Extract dominant colors using color theory

Refine and harmonize:

Apply color harmony rules (complementary, triadic, analogous)

Adjust saturation/lightness for consistency

Ensure sufficient contrast

Build complete palette with variations

Provide comparison with original

Workflow 4: Accessibility Audit

Receive existing color palette

Test all color combinations:

Text on backgrounds

Button states

Interactive elements

Calculate contrast ratios (WCAG 2.1)

Identify failures and provide fixes:

Suggest darker/lighter alternatives

Show minimum adjustments needed

Generate accessibility report

Quick Reference

Action

Command/Trigger

Create brand palette

"Generate a [mood] color palette for [industry]"

UI color system

"Create a UI palette for [project type]"

Extract from image

"Build palette from this [image/logo]"

Check accessibility

"Audit these colors for WCAG compliance"

Expand single color

"Create a full palette from #HEX"

Export formats

"Give me Tailwind/CSS/Figma variables"

Color Harmony Systems

Monochromatic

Single hue with varying lightness/saturation

Use for: Minimal, sophisticated designs

Best for: Photography sites, portfolios

Analogous

Adjacent colors on color wheel (30° apart)

Use for: Harmonious, natural feel

Best for: Wellness, nature, eco brands

Complementary

Opposite colors on wheel (180° apart)

Use for: High contrast, energetic

Best for: Sports, entertainment, retail

Triadic

Three colors equally spaced (120° apart)

Use for: Balanced, vibrant

Best for: Creative, playful brands

Split-Complementary

Base + two adjacent to complement

Use for: Softer than complementary

Best for: Professional services, SaaS

Tetradic

Four colors in two complementary pairs

Use for: Rich, complex palettes

Best for: Content-heavy, editorial

Best Practices

Start with purpose

Understand the emotional response and brand personality before choosing colors

Mind the ratios

Use 60-30-10 rule (60% primary, 30% secondary, 10% accent)

Accessibility first

Always check WCAG contrast ratios before finalizing

Test in context

Colors look different on screens vs. print, light vs. dark backgrounds

Provide variations

Include tints, shades, and tones for flexibility

Consider color blindness

Test with simulators, ensure critical info isn't color-only

Document usage

Specify which colors for what purpose (buttons, text, backgrounds)

Think systems

Create scalable palettes that grow with the product

Cultural awareness

Colors have different meanings in different cultures

Neutral foundation

Every palette needs a solid gray scale

Semantic clarity

Success, warning, error, info should be immediately recognizable

Dark mode ready

Ensure colors work in both light and dark themes

Deliverables Format

PALETTE NAME

Mood: [Adjectives describing the feel]

PRIMARY COLORS

Main Brand: #HEX - [Name] - RGB(r,g,b) - HSL(h,s,l)

Usage: Primary buttons, headers, brand moments

Accessible on: White, Light Gray

Secondary: #HEX - [Name]

Usage: Accents, highlights, links

Accessible on: White, Dark Gray

NEUTRAL SCALE

Gray-900: #HEX (Darkest - primary text)

Gray-800: #HEX (Secondary text)

...

Gray-100: #HEX (Lightest - subtle backgrounds)

SEMANTIC COLORS

Success: #HEX (Green family)

Warning: #HEX (Yellow/Orange family)

Error: #HEX (Red family)

Info: #HEX (Blue family)

CONTRAST RATIOS

✓ Primary on White: 4.8:1 (AA compliant)

✓ Secondary on Light Gray: 7.2:1 (AAA compliant)

✗ Warning on White: 2.1:1 (FAIL - suggest #HEX instead)

CODE EXPORT

[Tailwind config / CSS variables / Figma styles]

USAGE GUIDELINES

- When to use each color

- Do's and don'ts

- Common combinations

Tools Integration

Use

Midjourney

for generating color mood boards

Use

WebSearch

to research industry color trends

Use

Firecrawl

to analyze competitor color schemes

Use

Playwright

to test colors in live browser context

Common Requests

Startup/Tech

Blues, grays, vibrant accents

Finance

Navy, gold, conservative palette

Healthcare

Blues, greens, calming tones

Food/Restaurant

Reds, oranges, warm palette

Eco/Sustainability

Greens, earth tones, natural

Luxury

Black, gold, deep jewel tones

Children/Education

Primary colors, bright, playful

Creative/Agency

Bold, unconventional, statement colors