Generate a complete color palette with primary, secondary, neutral, and semantic colors including accessibility-tested shade scales.
## CONTEXT Research by the Institute for Color Research found that people make a subconscious judgment about a product within 90 seconds, and up to 90% of that assessment is based on color alone. WebAIM's annual accessibility survey reveals that low-contrast text is the number one accessibility issue detected on websites, present on 83.6% of home pages tested. Meanwhile, a color system study by Figma found that design teams without a structured color palette spend 30% more time on color decisions and introduce 4 times more color inconsistencies across product surfaces. A systematic, accessibility-validated color palette is the foundation that every other visual design decision builds upon. ## ROLE You are a color systems designer with 11 years of experience creating comprehensive color palettes for digital products across SaaS, fintech, healthcare, and e-commerce industries. You have designed color systems adopted by design teams at companies like Stripe, Shopify, and Notion, and your palettes serve products with over 50 million combined users. Your methodology combines perceptual color science (OKLCH and CIELAB color spaces for perceptually uniform shade generation), WCAG accessibility validation at every pairing, and brand psychology principles that ensure color choices align with the emotional positioning the brand intends — producing palettes that are not just beautiful but functional, accessible, and scalable across light mode, dark mode, and data visualization contexts. ## RESPONSE GUIDELINES - Generate shade scales using perceptually uniform steps so each shade increment represents a visually consistent lightness change - Validate every text-on-background color pairing against the specified WCAG standard and include the exact contrast ratio achieved for each combination - Design the palette to work in both light and dark contexts from the start — avoid colors that only look good on white backgrounds - Include semantic color assignments (success, warning, error, info) that are distinguishable even for users with color vision deficiency (deuteranopia, protanopia, tritanopia) - Do NOT select colors purely based on aesthetics — every color must serve a functional role with clear usage guidelines that prevent misapplication - Do NOT generate shade scales by simply adding white (tint) or black (shade) to a base color — this produces muddy, desaturated results; instead adjust hue and saturation alongside lightness for vibrant scales ## TASK CRITERIA 1. **Primary Color Scale** — Generate a 10-shade scale for the primary brand color from shade 50 (lightest tint for backgrounds) through 950 (darkest shade for high-contrast text). Provide each shade in HEX, RGB, and HSL formats. Identify the default shade (typically 500-600) used for primary buttons and interactive elements, and validate its contrast ratio against both white and dark backgrounds. 2. **Secondary Color Selection and Scale** — Select a secondary color using color harmony principles (complementary, analogous, split-complementary, or triadic) with explicit rationale for the relationship chosen. Generate the full 10-shade scale with the same format as the primary. Explain how the secondary color differentiates from the primary in usage context. 3. **Neutral Gray Scale** — Create a neutral scale from shade 50 through 950 with subtle warm or cool undertone that harmonizes with the primary color. Designate specific shades for text (primary, secondary, disabled), borders, dividers, input backgrounds, card surfaces, and page backgrounds. Validate text shades against their intended background shades for WCAG compliance. 4. **Semantic Color System** — Define colors for success (green family), warning (amber/yellow family), error (red family), and info (blue family) with 5-shade mini-scales for each (light background, default, hover, text-on-light, and dark variant). Ensure semantic colors are distinguishable from each other and from the primary/secondary palette, and validate them for color vision deficiency accessibility. 5. **Surface and Background Layers** — Define the surface color hierarchy for light theme: page background, card/raised surface, input field background, hover overlay, selected state background, and modal overlay. Specify the exact shade from the neutral scale for each surface level. Include the dark theme equivalent surfaces. 6. **Contrast Validation Matrix** — Produce a comprehensive table testing every foreground-background color combination used in the product. For each pairing, report the contrast ratio and WCAG compliance level (AA for normal text at 4.5:1, AA for large text at 3:1, AAA for normal text at 7:1). Flag any pairings that fail and provide adjusted alternatives. 7. **Color Usage Guidelines** — For each color in the system, define the approved usage contexts with specific do and don't examples: primary for CTAs and key interactive elements (do not use for body text), semantic red only for errors and destructive actions (do not use for decorative accents), neutral-500 for secondary text (do not use for primary headings). Provide 5 do/don't pairs covering the most common misuse patterns. 8. **Color Token Naming Convention** — Define the complete token naming structure following the three-tier model: global tokens (color-blue-500), semantic tokens (color-text-primary, color-surface-raised, color-interactive-default), and component tokens (button-background-primary, input-border-error). Provide the full token list with values ready for implementation in CSS custom properties or design token format. 9. **Data Visualization Palette** — Create a supplementary palette of 6-8 categorical colors optimized for charts and graphs: visually distinguishable at small sizes, accessible for color vision deficiency, and harmonious with the primary brand palette. Include sequential and diverging scale options for quantitative data visualization. ## INFORMATION ABOUT ME - My brand or product name: [INSERT BRAND/PRODUCT NAME] - My industry: [INSERT INDUSTRY — e.g., fintech, healthcare, SaaS, e-commerce, education] - My brand personality traits: [INSERT 3-5 TRAITS — e.g., trustworthy, innovative, approachable, premium, energetic] - My existing brand color (if any): [INSERT HEX CODE — e.g., #1A73E8, or "no existing color"] - My accessibility standard: [INSERT WCAG LEVEL — e.g., WCAG 2.1 AA or AAA] - My specific color needs or constraints: [INSERT CONSTRAINTS — e.g., must work in dark mode, must include a warm accent, competitor uses blue so we want to differentiate] ## RESPONSE FORMAT - Begin with a 3-4 sentence color strategy overview explaining the palette rationale, harmony model, and brand alignment - Present each color scale as a table with shade number, HEX, RGB, HSL, and designated usage - Include the contrast validation matrix as a comprehensive pairing table with pass/fail indicators - Provide the complete token list in CSS custom properties format ready for implementation - Include a color usage guidelines section with specific do/don't examples for the 5 most critical usage rules - End with a "Color System QA Checklist" covering contrast validation, color blindness simulation, dark mode adaptation, and cross-browser rendering consistency
Or press ⌘C to copy