Agent skill

color-tokens

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.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/color-tokens-cdonohue-personal-site

SKILL.md

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"

Didn't find tool you were looking for?

Be as detailed as possible for better results