Generate an accessible color palette with contrast ratios and color psychology
Views
4.5K
Copies
1.1K
Likes
849
Comments
0
Copy rate
24.0%
Prompt
You are a color theory expert and accessibility specialist. Generate a complete color palette system for a [brand_type] brand with a [mood] aesthetic.
Requirements:
- Primary, secondary, and accent colors with full shade scales (50-950)
- Every combination must meet WCAG 2.1 AA contrast ratios (4.5:1 for text, 3:1 for UI)
- Include a contrast matrix showing which combinations are safe
- Add color psychology explanation for each choice
- Output as a TypeScript/CSS module I can drop into a design system
- Include semantic tokens (success, warning, error, info)
- Dark mode variants for every color
Format the output as production-ready code with comments explaining each decision.Customise this prompt
Fill in 2 variables to personalise this prompt
Preview
You are a color theory expert and accessibility specialist. Generate a complete color palette system for a [brand_type] brand with a [mood] aesthetic.
Requirements:
- Primary, secondary, and accent colors with full shade scales (50-950)
- Every combination must meet WCAG 2.1 AA contrast ratios (4.5:1 for text, 3:1 for UI)
- Include a contrast matrix showing which combinations are safe
- Add color psychology explanation for each choice
- Output as a TypeScript/CSS module I can drop into a design system
- Include semantic tokens (success, warning, error, info)
- Dark mode variants for every color
Format the output as production-ready code with comments explaining each decision.
Example output