Note

This README was generated by SKILL, get the ZH version from here.

skill-palette-generate

A Claude Code Skill that generates complete UI color palettes from a single brand color, using HSB color model arc interpolation for production-ready design system colors.
This project was primarily generated by Claude Code, with minor adjustments by the author.

Table of Contents

• Features
• Installation
• Usage
• API Reference
• License

Features

• Single Color Input: Generate a complete palette from just one brand color in hex format
• HSB Arc Interpolation: Uses visual arc technique ensuring natural shade transitions from light to dark
• Semantic Color Harmony: Automatically generates okay (green), warn (orange), error (red), info (blue) colors inheriting brand S/B values
• Multiple Output Formats: Supports JSON, CSS custom properties, and Tailwind config
• 9-Level Shades: Each color scale includes levels 1-9 covering backgrounds, buttons, text, and more

Installation

Clone this skill to your Claude Code skills directory:

git clone https://github.com/pardnchiu/skill-palette-generate ~/.claude/skills/palette-generate

Usage

Use the /palette-generate command in Claude Code:

# Basic usage (JSON output)
/palette-generate #3B82F6

# CSS custom properties format
/palette-generate #3B82F6 --format css

# Tailwind config format
/palette-generate #3B82F6 --format tailwind

# Output to file
/palette-generate #3B82F6 --output palette.json

Direct Script Execution

# JSON output (default)
python3 scripts/generate_palette.py "#3B82F6"

# CSS custom properties
python3 scripts/generate_palette.py "#3B82F6" --format css

# Tailwind config
python3 scripts/generate_palette.py "#3B82F6" --format tailwind

Output Example

{
  "brand": {
    "1": "#f5f8fe",
    "2": "#e6eefb",
    "3": "#bdd2f5",
    "4": "#8ab2ee",
    "5": "#3b82f6",
    "6": "#2563eb",
    "7": "#1d4ed8",
    "8": "#1e40af",
    "9": "#1e3a8a"
  },
  "okay": { "1": "...", ... },
  "warn": { "1": "...", ... },
  "error": { "1": "...", ... },
  "info": { "1": "...", ... },
  "neutral": { "1": "...", ... },
  "text": { "1": "...", ... }
}

API Reference

Color Scales

Scale	Description	Base Hue Logic
brand	Primary brand color	From user input
okay	Success state (green)	H=140, S/B inherited
warn	Warning state (orange)	H=35, S/B inherited
error	Error state (red)	H=0, S/B inherited
info	Info state (blue)	H=210, S/B inherited
neutral	Backgrounds, borders	Fixed purple-tinted grays
text	Typography colors	Slate-style gradient

Shade Level Usage

Level	Usage
1	Tinted backgrounds
2	Hover backgrounds
3	Borders, dividers
4	Secondary elements
5	Base/primary (buttons)
6	Hover states
7	Active/pressed states
8	Secondary text
9	Primary text

Core Functions

Function	Signature	Description
HSB.from_hex	(hex_color: str) -> HSB	Parse hex color to HSB
HSB.to_hex	() -> str	Convert HSB to hex string
generate_full_palette	(brand_hex: str) -> Dict	Generate complete palette
format_css_variables	(palette: Dict) -> str	Format as CSS variables
format_tailwind_config	(palette: Dict) -> str	Format as Tailwind config

License

This project is licensed under the MIT LICENSE.