What problem does it solve? Building a complete, accessible color system from a single brand color is tedious and error-prone: shades must progress smoothly, semantic tokens must pair correctly, dark mode must invert properly, and every text/background combination must pass WCAG contrast ratios. This Skill automates that entire workflow. ## Core Features & Use Cases - 11-Shade Scale Generation: Converts a brand hex to HSL and generates shades 50-950 with tuned lightness and saturation curves. - Semantic Token Mapping: Produces paired background/foreground tokens (primary, secondary, muted, accent, destructive, border, ring) for both light and dark modes. - WCAG Contrast Verification: Includes luminance and contrast-ratio formulas plus quick-check tables to validate AA/AAA compliance and fix common failures. - Tailwind v4 Output: Emits ready-to-paste @theme CSS with dark mode overrides, plus a starter template in assets/tailwind-colors.css. - Use Case: A designer hands you a brand color #0D9488; use this Skill to produce a full design-system palette with dark mode variants and verified contrast in one pass. ## Quick Start Ask the agent to generate a complete accessible Tailwind color palette with dark mode from your brand hex, for example #0D9488.
