Color Palette is a skill that converts natural-language prompts — such as a mood, brand concept, or descriptive phrase — into a structured 5-7 color design system. Given a prompt, the skill derives a cohesive set of colors and assigns each one a specific UI role: primary, secondary, background, surface, and typography. This role-based assignment means the output maps directly to how colors are actually used in an interface rather than producing a generic swatch collection.
For each color in the palette, the skill produces exact technical values in HEX, RGB, and HSL formats along with ready-to-use CSS custom properties. WCAG 2.1 contrast ratios are calculated for every text and background pair, so accessibility compliance is validated automatically rather than left to the developer to check manually.
The skill generates two output assets: a machine-readable palette.json file and a visual palette.html preview intended for stakeholder review. The JSON output allows downstream tooling or agents to consume the palette programmatically, while the HTML preview provides a rendered reference without requiring additional tooling.
This skill is appropriate when a project needs a complete, accessible color system derived from a concept or brand brief. It is not a tool for manipulating existing color values, generating image assets, or handling non-color aspects of a design system such as typography scales or spacing tokens.