skills.rest
andronics
andronicsCOMMUNITY
Explore all skills by this author →
GitHub

color-tools

Generate accessible color palettes and validate WCAG contrast for UI designs.

1|Updated Oct 24, 2025
Search Tags:#hsl#wcag#contrast#tokens#color#palette
One-click install
npx skills add https://github.com/andronics/claude-plugin-css-pro --skill color-tools
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-tools
Source: https://github.com/andronics/claude-plugin-css-pro/tree/main/skills/color-tools
Command: npx skills add https://github.com/andronics/claude-plugin-css-pro --skill color-tools

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps you generate accessible color palettes, validate WCAG contrast, and convert colors across formats to support robust, accessible design systems.

Core Features & Use Cases

  • Contrast checking & WCAG: ensure readable text and UI elements.
  • Palette generation: tint/shade scales, harmonies, theme variations.
  • Conversions: HEX, RGB, HSL, opacity variants, and color tokens.

Quick Start

Create an accessible blue palette and test contrast against white background.

Frequently Asked Questions about color-tools

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

FAQPage Schema
How do I validate WCAG contrast compliance for my UI colors?▼

WCAG contrast validation checks the ratio between text and background colors to ensure readability. This Skill computes contrast ratios and flags whether color pairs meet WCAG AA or AAA standards, helping you catch accessibility issues before deployment across web and mobile interfaces.

Can I generate a color palette with tints, shades, and harmonies?▼

Yes. Palette generation creates tint and shade scales, color harmonies, and theme variations from a base color. The Skill applies color space conversions and systematic scaling to produce cohesive palettes suitable for design systems and component theming.

What color formats does this Skill convert between?▼

The Skill converts across HEX, RGB, and HSL formats, including opacity variants. These conversions support flexible color token generation and enable seamless integration with CSS design-token workflows and cross-platform design systems.

How do I generate CSS design tokens from my color palette?▼

After building and validating your palette, the Skill outputs color tokens formatted for CSS consumption. This enables automated token generation for design systems, reducing manual color documentation and ensuring consistency across components.

Do I need design system experience to use palette generation?▼

No prior design system experience is required. The Skill automates palette creation and WCAG validation, making accessible color decisions accessible to developers and designers at any scale, from single components to enterprise theming.

What's the difference between using this for web versus mobile color schemes?▼

Contrast requirements and color rendering remain consistent across platforms; WCAG standards apply to both. The Skill generates palettes and validates accessibility uniformly, though mobile-specific color constraints like reduced gamut may require additional manual refinement.

Related Skills

Explore More Design & Creative Skills→
eykdeykd

daisyui-design-system-generator

Generate WCAG AAA-compliant OKLCH color themes for DaisyUI 5 with contrast validation.

Community
Intermediate
hongmaple0820hongmaple0820
9

ui-design-system

Generate design-system tokens and handoff documentation for React, Tailwind, and CSS.

Community
Advanced
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced
CrazyDubyaCrazyDubya

accessibility-auditor

Audit web applications for WCAG 2.1 Level AA accessibility compliance.

Community
Intermediate