color-palette

Generate an accessible color palette from a single brand hex code by producing an 11-shade scale (50-950), semantic tokens for light and dark modes, and Tailwind v4 CSS output with built-in WCAG contrast checking.

WCAG contrast checking verifies that design system colors meet accessibility standards for readability. This Skill includes built-in checks and reference files to ensure semantic tokens pass contrast verification for both light and dark modes.

Yes, you can use the generated color palette with Tailwind CSS v4. The Skill outputs ready-to-integrate CSS that includes the 11-shade scale and semantic tokens mapped directly for Tailwind v4 projects.

Create semantic color tokens for dark mode inversion using the Skill's semantic mapping feature, which defines tokens like --background and --primary for light and dark modes, guided by reference files for proper inversion.

The best way to build a complete color scale for a brand identity is generating an 11-shade range (50-950) from a base hex code. This ensures design consistency while providing reference files for shade generation and adjustments.

Generated color palettes may fail WCAG contrast requirements if the base hex code lacks sufficient luminance contrast. The Skill provides guidance on common adjustments and reference files for contrast verification to help resolve these issues.