Is this skill compatible with Tailwind CSS?

Yes, it is specifically designed to output color scales and themes compatible with Tailwind CSS v4 @theme syntax.

Does it handle dark mode automatically?

Yes, it generates a dark mode variant by inverting lightness while preserving your brand's hue and saturation integrity.

How does it ensure my colors are accessible?

The skill performs automated WCAG contrast checks for text and UI elements, ensuring your color pairings meet AA or AAA standards.

Can I generate a full palette from just one color?

Absolutely. Provide one brand hex code, and the skill handles the HSL conversion and shade expansion for you.

Accessible Color Palette Generator

Name: Accessible Color Palette Generator
Author: brendadeeznuts1111

bybrendadeeznuts1111

0•

Design Tools

Generates professional 11-shade color scales and semantic CSS tokens from a single brand hex code with built-in accessibility checking.

The Color Palette skill empowers developers to build cohesive, accessible design systems directly within their workflow. By providing just a single brand hex value, the skill generates a full 11-shade spectrum (50-950), maps semantic tokens for both light and dark modes, and performs rigorous WCAG contrast checks. It is optimized for modern frontend frameworks like Tailwind CSS v4, ensuring that your UI remains accessible, brand-consistent, and production-ready with minimal manual effort.

Key Features

010 GitHub stars

02Automatic 11-shade scale generation (50-950)

03Semantic token mapping for components and themes

04Smart dark mode inversion patterns

05WCAG AA/AAA contrast ratio verification

06Tailwind CSS v4 @theme syntax compatibility

Use Cases

01Building a brand-new design system from a single primary hex color

02Generating accessible dark mode variants for existing web applications

03Converting design mockups into production-ready Tailwind CSS themes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add brendadeeznuts1111/tier-1380-omega color-palette

For use in Claude.ai and ChatGPT

Key Features

010 GitHub stars

02Automatic 11-shade scale generation (50-950)

03Semantic token mapping for components and themes

04Smart dark mode inversion patterns

05WCAG AA/AAA contrast ratio verification

06Tailwind CSS v4 @theme syntax compatibility

Use Cases

01Building a brand-new design system from a single primary hex color

02Generating accessible dark mode variants for existing web applications

03Converting design mockups into production-ready Tailwind CSS themes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add brendadeeznuts1111/tier-1380-omega color-palette

For use in Claude.ai and ChatGPT