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

デザインツール

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.

主な機能

0 GitHub stars
Automatic 11-shade scale generation (50-950)
Semantic token mapping for components and themes
Smart dark mode inversion patterns
WCAG AA/AAA contrast ratio verification
Tailwind CSS v4 @theme syntax compatibility

ユースケース

Building a brand-new design system from a single primary hex color
Generating accessible dark mode variants for existing web applications
Converting 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

Download Skill

GitHub

概要