Does it support dark mode?

Absolutely. It generates specific dark mode overrides by inverting lightness while preserving brand hue and saturation to maintain identity.

What formula does it use for contrast checking?

It uses the standard relative luminance formula to calculate precise contrast ratios between foreground and background color pairs.

Can I use this with Tailwind CSS v4?

Yes, it is specifically optimized to output the new @theme syntax used in Tailwind CSS v4 for seamless integration.

Do I need multiple hex codes to start?

No, you only need one primary brand hex code; the skill automatically generates the full 11-shade spectrum and semantic mappings from that single input.

How does this skill handle accessibility?

It includes built-in WCAG contrast checking to ensure text and UI elements meet AA/AAA standards across both light and dark modes.

Color Palette Generator

Name: Color Palette Generator
Author: evolv3ai

byevolv3ai

0•

デザインツール

Generates accessible 11-shade color scales and semantic design tokens from a single brand hex code.

The Color Palette skill streamlines the creation of production-ready design systems by transforming a single brand color into a comprehensive 11-shade scale ranging from 50 to 950. It automatically generates semantic tokens for light and dark modes, maps variables for Tailwind CSS v4 @theme syntax, and performs real-time WCAG contrast checking to ensure accessibility compliance. This skill is ideal for developers building new projects or migrating existing designs to code while maintaining visual consistency and rigorous accessibility standards.

主な機能

01Creates semantic tokens for backgrounds, cards, and UI elements

02Outputs production-ready Tailwind CSS v4 @theme syntax

030 GitHub stars

04Performs WCAG 2.1 contrast checking for AA/AAA compliance

05Generates 11-shade scales (50-950) from a single hex value

06Automates dark mode variant generation with lightness inversion

ユースケース

01Audit and fix accessibility issues in existing web color schemes

02Bootstrap a new design system or brand identity from a single logo color

03Convert manual design mockups into accessible, themeable CSS variables

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add evolv3ai/claude-skills-archive color-palette

For use in Claude.ai and ChatGPT

Download Skill