Does this skill support Tailwind CSS v4?

Yes, it is specifically optimized for Tailwind v4 @theme syntax, generating the necessary CSS variables for modern frontend workflows.

How does this improve token efficiency?

By using standardized reference patterns, it reduces the need for trial-and-error generation, saving approximately 65% in token usage compared to manual prompting.

How does it handle color accessibility?

The skill includes WCAG contrast ratio formulas to automatically verify that text and UI elements meet AA and AAA standards against their backgrounds.

What input is required to start?

You only need to provide a single brand hex code (e.g., #0D9488). The skill then calculates the HSL values to generate the full 11-shade scale.

Can it generate dark mode variants?

Yes, it uses a hue-preserving lightness inversion pattern to create consistent dark mode tokens that maintain your brand identity while ensuring readability.

Accessible Color Palette Generator

Name: Accessible Color Palette Generator
Author: jezweb

byjezweb

•

169

•

디자인 도구

Generates complete, WCAG-compliant 11-shade color scales and semantic design tokens from a single brand hex code.

The Color Palette skill empowers developers and designers to build cohesive design systems directly within Claude Code. By providing a single brand hex value, the skill automatically calculates a mathematically consistent 11-shade scale (50-950), maps colors to semantic tokens like background and foreground, and generates optimized dark mode variants. It includes built-in WCAG contrast checking to ensure accessibility compliance and outputs ready-to-use CSS for Tailwind v4 @theme configurations, significantly reducing the manual trial-and-error typically associated with frontend styling.

주요 기능

01169 GitHub stars

02Tailwind v4 @theme syntax generation for seamless integration

0311-shade color scale generation (50-950) from any brand hex code

04Built-in WCAG contrast checking for accessibility compliance

05Automatic semantic token mapping for consistent UI component styling

06Hue-preserving lightness inversion for professional dark mode patterns

사용 사례

01Migrating hardcoded hex values to a semantic Tailwind v4 theme

02Building a comprehensive design system from a single brand color

03Validating and fixing AA/AAA contrast ratios for text and UI elements

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jezweb/claude-skills color-palette

For use in Claude.ai and ChatGPT

Download Skill