Color Palette Generation

Generate harmonious, accessible, and production-ready color systems from any starting point.

Prerequisites

Before generating colors, check for existing design context:

• Read .agents/design-context.md (see the design-context skill). If it has a Color System, treat those hex values as the source of truth and extend them rather than replacing them.
• If a design system already exists in the codebase (CSS variables, Tailwind theme, tokens.json), extend it rather than replacing it.

Naming convention (shared with design-system, layout-composition, etc.): primitive scales are --brand-50 … --brand-950, --gray-50 … --gray-950, --success-*, --warning-*, --error-*, --info-*; semantic tokens are --bg-*, --text-*, --border-*, --interactive-*, plus the brand aliases --color-primary, --color-secondary, --color-accent.

Step 1: Understand Color Theory Fundamentals

Generate palettes in OKLCH. Its lightness channel is perceptually even, so a fixed L step looks like the same visual step at every hue (in HSL, hsl(60 100% 50%) yellow is far lighter than hsl(240 100% 50%) blue at the "same" lightness). Use HSL only when a legacy tool forces it. Note that high-chroma OKLCH values can fall outside sRGB; reduce chroma (keep L and H) when converting to hex.

Color Wheel Relationships