color-tokens
CommunityTurn one accent color into accessible tokens.
Authorcdonohue
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: color-tokens Download link: https://github.com/cdonohue/personal-site/archive/main.zip#color-tokens Please download this .zip file, extract it, and install it in the .claude/skills/ directory.