Color Palette Generator

beginnercreativeMin 8K context

Creates accessible color palettes for brands and UIs from a brief or a seed color. Produces primary, secondary, and neutral scales with hex values, suggests semantic tokens (success, warning, error, info), and checks foreground/background pairings against WCAG contrast ratios. Outputs ready-to-use CSS variables or design tokens.

colordesignuiaccessibilitybranding

Use Cases

  • Generating a brand palette from a mood or seed color
  • Building accessible semantic color tokens for a UI
  • Checking text/background pairs against WCAG contrast ratios
  • Exporting palettes as CSS variables or design tokens

Example Prompt

Create a color palette for a fintech dashboard.

Brief: trustworthy, calm, modern; seed color #2F6FED

Produce:
1. Primary, secondary, and neutral scales (hex, 5 steps each)
2. Semantic tokens: success, warning, error, info
3. A WCAG contrast check for key text-on-background pairs (AA target)
4. CSS custom properties ready to paste into a stylesheet

Note any pairing that fails AA and suggest an accessible alternative.

Recommended Models

claude-opus-4-6gpt-5gemini-2-5-proclaude-sonnet-4-5

Compatible Tools

claude-codecursorkiroany

Modalities

Input: text
→
Output: text, code

Related Skills

design-system-generatorfrontend-designaccessibility-review

Author

OpenModels Community

@openmodelsrun