Generate accessible color tokens from a single accent color. Use when user wants to create or update color palettes, check accessibility contrast, or generate warm/cool adaptive gray scales.
Installs into .claude/skills of the current project.
Are you the author of Color Tokens?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/majiayu000-color-tokens)
---
name: color-tokens
description: Generate accessible color tokens from a single accent color. Use when user wants to create or update color palettes, check accessibility contrast, or generate warm/cool adaptive gray scales.
allowed-tools: Read, Write, Edit, Bash
---
# Generate Color Tokens
Generate accessible color tokens from a single accent color following Dieter Rams' "Less, but better" philosophy.
## Usage
1. Ask user for the accent color (hex format, e.g., `#ed8008`)
2. Run: `node .claude/skills/color-tokens/generate.js "#hexcolor"`
3. Review output with user
4. Update `src/styles/tokens.css` with new values
## What It Generates
- 10 adaptive grays that harmonize with the accent (warm/cool/neutral)
- Accessible text color for the accent (light or dark based on APCA contrast)
- CSS custom properties ready to paste
- Accessibility contrast checks
## Example
```bash
node .claude/skills/color-tokens/generate.js "#ed8008"
```
