color-palette

# Color Palette Generator ## Quick Start Provide at least one base color (hex), brand personality keywords, or industry context. Optionally specify the color harmony type (complementary, analogous, triadic, split-complementary, monochromatic), whether you need dark mode, and any existing design system constraints. All generated colors include hex, RGB, and HSL values with WCAG contrast verification. ## Workflow 1. Determine the goal: new palette, modification, dark/light mode variation, or contrast audit 2. Gather context: brand personality, target audience, industry, existing brand colors 3. Select color harmony model based on the goal 4. Generate the palette: Primary, Secondary, Accent, Semantic colors (Success/Warning/Error/Info), Neutral scale (50-900) 5. Verify every foreground/background combination against WCAG AA (4.5:1 normal text, 3:1 large text) 6. Generate dark mode equivalents if requested (adjusted lightness/saturation, not simple inversion) 7. Compile the structured output with usage guidelines and contrast table ## Examples **Example 1: New brand palette** Input: "Create a color palette for a fintech startup. Primary color is #2563EB. Modern, trustworthy feel." Output: ``` Color Palette: Fintech Brand ## Brand Colors | Name | Hex | RGB | HSL | Usage | |-----------|---------|---------------|------------------|--------------------------| | Primary | #2563EB | rgb(37,99,235)| hsl(217,84%,53%) | CTAs, links, key actions | | Secondary | #0F172A | rgb(15,23,42) | hsl(222,47%,11%) | Headers, dark backgrounds| | Accent | #F59E0B | rgb(245,158,11)| hsl(38,92%,50%) | Highlights, badges | ## Semantic Colors | Name | Hex | Usage | |---------|---------|-----------------------------| | Success | #16A34A | Confirmations, positive | | Warning | #EAB308 | Caution, non-critical alerts | | Error | #DC2626 | Errors, destructive actions | | Info | #0EA5E9 | Informational messages | ## Contrast Check (WCAG AA) | Foreground | Background | Ratio | Result | |------------|------------|--------|--------| | #FFFFFF | #2563EB | 4.56:1 | AA | | #0F172A | #FFFFFF | 15.4:1 | AAA | | #FFFFFF | #DC2626 | 4.63:1 | AA | ``` **Example 2: Dark mode generation** Input: "Generate dark mode colors from our existing light palette. Primary is #3B82F6." Output: ``` Color Palette: Dark Mode Variant ## Dark Mode Equivalents | Token | Light Mode | Dark Mode | Notes | |----------------|------------|------------|------------------------------| | Background | #FFFFFF | #0F172A | Deep slate, not pure black | | Surface | #F8FAFC | #1E293B | Elevated surfaces | | Primary | #3B82F6 | #60A5FA | Lightened for dark bg contrast| | Primary Text | #0F172A | #F1F5F9 | High contrast on dark bg | | Secondary Text | #64748B | #94A3B8 | Readable at 4.5:1 on dark | ``` ## Tools - Use `Read` to load existing design system files, CSS custom properties, or theme configs - Use `Grep` to search for existing color tokens or hex values in the codebase - Use `Glob` to locate theme files, style tokens, or color configuration files ## Error Handling - If no base color or brand direction is provided -> Ask for at least one primary color, personality keywords, or industry context - If a user-provided color fails WCAG contrast -> Flag it, explain the failure, and suggest the closest accessible alternative - If more than 7 main colors are requested -> Warn about consistency risks, recommend consolidation, but proceed if confirmed - If dark mode is requested without a light palette -> Generate both together from provided base colors ## Connectors (Optional) This skill works standalone. When connected to external tools, it unlocks additional capabilities: | Connector | What it enables | |-----------|----------------| | ~~design tool | Sync generated palettes directly into Figma, Sketch, or Adobe XD color styles | | ~~asset management | Register new color tokens in the shared asset library for team-wide use | | ~~project tracker | Log color decisions and palette changes as tracked design tasks | | ~~brand guidelines | Auto-validate generated palettes against existing brand color specs | ## Rules - WCAG AA minimum: 4.5:1 for normal text, 3:1 for large text and icons - Never rely on color alone to convey information -- pair with icons, labels, or patterns - Dark mode must adjust saturation and brightness, not simply invert colors - Limit main palette to 5-7 colors for design consistency - Always provide exact values (hex, RGB, HSL) -- no vague color names without values - Semantic colors (success, warning, error, info) should be universally recognizable ## Output Template ``` Color Palette: [Project/Brand Name] ## Brand Colors | Name | Hex | RGB | HSL | Usage | |------|-----|-----|-----|-------| | Primary | #XXXXXX | rgb(X,X,X) | hsl(X,X%,X%) | [Usage] | | Secondary | #XXXXXX | rgb(X,X,X) | hsl(X,X%,X%) | [Usage] | | Accent | #XXXXXX | rgb(X,X,X) | hsl(X,X%,X%) | [Usage] | ## Semantic Colors | Name | Hex | Usage | |------|-----|-------| | Success | #XXXXXX | Positive actions, confirmations | | Warning | #XXXXXX | Caution, non-critical alerts | | Error | #XXXXXX | Errors, destructive actions | | Info | #XXXXXX | Informational messages | ## Neutral Scale | Weight | Hex | Usage | |--------|---------|------------------| | 50 | #XXXXXX | Background | | 100 | #XXXXXX | Subtle background| | 200 | #XXXXXX | Borders | | 300 | #XXXXXX | Disabled states | | 500 | #XXXXXX | Secondary text | | 700 | #XXXXXX | Primary text | | 900 | #XXXXXX | Headings | ## Contrast Check (WCAG AA) | Foreground | Background | Ratio | Result | |------------|------------|-------|---------------| | [Color] | [Color] | [X]:1 | [AA/AAA/Fail] | ## Dark Mode Equivalents (if applicable) | Token | Light Mode | Dark Mode | |--------------|------------|-----------| | Background | #XXXXXX | #XXXXXX | | Surface | #XXXXXX | #XXXXXX | | Primary Text | #XXXXXX | #XXXXXX | ``` ## Related Skills - **brand-checker** -- verify that generated palettes align with brand guidelines - **design-reviewer** -- use palette colors during design reviews to check contrast and consistency - **wireframe-helper** -- apply palette colors to wireframes for higher-fidelity mockups