color-palette

What problem does it solve?

This Skill automates the creation of harmonious, accessible, and production-ready color systems, ensuring brand consistency and adherence to accessibility standards.

Core Features & Use Cases

• Color Theory Application: Generates palettes based on fundamental color harmonies (complementary, analogous, triadic, etc.) using perceptually uniform color spaces like OKLCH.
• Shade Scale Generation: Creates a full 19-step lightness scale for a base brand color.
• Semantic Color Definition: Defines purpose-driven color tokens (e.g., success, warning, error, info).
• Neutral Scale Creation: Generates a tinted neutral color scale.
• Accessibility Checks: Provides guidance on WCAG contrast ratios and practical rules for text and UI elements.
• Dark Mode Adaptation: Offers strategies for adapting color palettes for dark themes.
• Gradient Generation: Provides rules and examples for creating effective linear and radial gradients.
• Tailwind CSS Integration: Shows how to configure Tailwind CSS with generated color palettes.
• CSS Custom Properties Architecture: Demonstrates a three-layer approach for organizing color tokens.

Quick Start

Generate a 19-step lightness scale for the color oklch(0.55 0.15 250) and output it as CSS custom properties.