🎯

color-palette

🎯Skill

from jezweb/claude-skills

What it does

Skill for generating complete, accessible color palettes from a single brand hex, creating 11-shade scales, semantic tokens, dark mode variants, and WCAG contrast checking for Tailwind v4

Overview

color-palette is a Claude Code skill that generates complete, accessible color palettes from a single brand hex color. It creates an 11-shade scale (50-950), semantic design tokens (background, foreground, card, muted), and dark mode variants. The skill includes built-in WCAG contrast checking to ensure text accessibility across all generated colors.

Key Features

Full shade scale generation: Creates an 11-shade scale (50 through 950) from a single brand hex color, providing a complete color ramp for design systems.
Semantic design tokens: Generates meaningful tokens like background, foreground, card, and muted that map directly to UI component needs.
Dark mode variants: Automatically produces dark mode color variants alongside light mode, enabling seamless theme switching.
WCAG contrast checking: Built-in accessibility verification ensures text remains readable against generated background colors.
Tailwind CSS integration: Output is designed to work directly with Tailwind CSS theme configuration, making it easy to apply generated palettes to Tailwind projects.

Who is this for?

This skill is ideal for frontend developers and designers setting up design systems or creating Tailwind themes who need a complete, accessible color palette from a single brand color. It is especially useful for teams converting design mockups to code who want to ensure their color choices meet accessibility standards without manual contrast calculations.

📦

Same repository

jezweb/claude-skills(170 items)

color-palette

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add jezweb/claude-skills --skill color-palette

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add jezweb/claude-skills --skill color-palette

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/color-palette/SKILL.md

SKILL.md

906Installs

253

Last UpdatedJan 27, 2026

View on GitHub Back to Skills

More from this repository10

🎯

tailwind-v4-shadcn🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

tanstack-query🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

fastapi🎯Skill

Provides FastAPI development patterns including async endpoints, dependency injection, Pydantic models, authentication, and API documentation best practices

🎯

zustand-state-management🎯Skill

Provides Zustand state management patterns for React including store creation, selectors, middleware, and best practices for scalable client-side state

🎯

tailwind-theme-builder🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

react-hook-form-zod🎯Skill

Provides React Hook Form integration patterns with Zod schema validation for type-safe, performant form handling

🎯

tailwind-patterns🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

nextjs🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

shadcn-ui🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

favicon-gen🎯Skill

Generates favicon files in multiple sizes and formats for web projects, from a collection of 87 production-ready skills for Cloudflare, React, and AI integrations.