skills.rest
cdonohue
cdonohueCOMMUNITY
Explore all skills by this author →
Website𝕏@chaddonohueGitHub

color-tokens

Generates Tailwind-like CSS color tokens and accessibility data from a single hex value.

Updated Sep 28, 2022
Search Tags:#contrast#design-system#css-variables#color-tokens#palette#APCA
One-click install
npx skills add https://github.com/cdonohue/personal-site --skill color-tokens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-tokens
Source: https://github.com/cdonohue/personal-site/tree/main/.claude/skills/color-tokens
Command: npx skills add https://github.com/cdonohue/personal-site --skill color-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the generation of accessible color tokens from a single accent color, helping you build cohesive palettes, ensure contrast compliance, and generate adaptive gray scales.

Core Features & Use Cases

  • Adaptive Gray Scale: Produces 10 gray shades that harmonize with your accent.
  • Accessible Text Color: Determines a high-contrast text color for the accent using APCA.
  • CSS Variables Ready: Outputs CSS custom properties you can paste into your design system.
  • Accessibility Guidance: Includes an accessibility report to highlight contrast considerations.

Quick Start

Run the color-tokens script with an accent color to generate the tokens and then paste the resulting CSS variables into your styles.

Frequently Asked Questions about color-tokens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate accessible color tokens from a single accent color?▼

Color tokens are generated by inputting a hex accent color into the Skill, which produces a complete palette: 10 harmonized gray shades, a high-contrast text color calculated via APCA, and CSS custom properties ready to paste into your design system.

What does APCA contrast mean and why does it matter for accessible colors?▼

APCA (Advanced Perceptual Contrast Algorithm) measures text-to-background contrast based on human perception rather than simple luminosity ratios. The Skill uses APCA to ensure your accent color pairs with readable text that meets accessibility standards.

Can I use CSS variables generated from color tokens in my design system?▼

Yes. The Skill outputs CSS custom properties formatted for immediate use—paste the variables directly into your stylesheets to apply the accent color, grays, and accessible text color across your design system.

How do I validate that my color palette meets contrast requirements?▼

The Skill includes an accessibility report that highlights contrast considerations for your generated palette, showing which color combinations meet standards and where adjustments may be needed.

What input format does the color token generator accept?▼

The Skill accepts hex color values as input and validates them before processing. Provide your accent color in standard hex format to generate the full token set.

Related Skills

Explore More Design & Creative Skills→
OneWave-AIOneWave-AI
245

color-palette-extractor

Extract dominant colors and harmony schemes from images and websites.

Official
Basic
HaslienHaslien

typography

Define scalable UI type systems with CSS variables and mathematical ratios.

Community
Advanced
Marcus-Mok-GHMarcus-Mok-GH

design-tokens

Generate and maintain design tokens across project surfaces with WCAG compliance.

Community
Advanced
brendadeeznuts1111brendadeeznuts1111

color-palette

Generate 11-shade color palettes from a brand hex color with WCAG contrast checks.

Community
Intermediate