# Palette

> Generate a complete 50-950 shade palette from a single hex color. Outputs 11 perceptually uniform shades with CSS variables, Tailwind config, and design token formats.

- Skill: `dragoon0x/palette` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/palette`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/palette/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/palette

---


# /palette — Full Shade Palette Generator

## Usage
`/palette [hex-color]`

## Algorithm
Given a single brand color:
1. Convert to HSL
2. Generate 11 stops (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950)
3. 500 = the input color
4. Lighter stops: increase lightness, slightly decrease saturation
5. Darker stops: decrease lightness, slightly increase saturation, shift hue toward blue
6. 50 = near white with hue tint, 950 = near black with hue tint

## Output
- CSS custom properties: --color-primary-50 through --color-primary-950
- Tailwind config extension
- Hex values table
- Contrast ratio of each shade against white and black backgrounds

## Quality Checks
- Every shade must be visually distinct from adjacent shades
- 50 must work as a subtle background color
- 500-700 must pass AA contrast against white text
- 800-950 must work as dark mode surface colors