skills.rest
ilanf23
ilanf23COMMUNITY
Explore all skills by this author →
GitHub

color-system

Generate accessible color palettes with semantic mapping and WCAG contrast compliance.

1|Updated Feb 3, 2026
Search Tags:#design#accessibility#contrast#color#semantic#palette
One-click install
npx skills add https://github.com/ilanf23/trusted-deal-navigator --skill color-system-ilanf23
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-system
Source: https://github.com/ilanf23/trusted-deal-navigator/tree/main/.claude/skills/ui-design/skills/color-system
Command: npx skills add https://github.com/ilanf23/trusted-deal-navigator --skill color-system-ilanf23

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of designing systematic, accessible color palettes tailored for digital products, ensuring visual consistency and compliance with accessibility standards.

Core Features & Use Cases

  • Palette Generation: Develop raw color palettes, including tonal scales and extended visualization colors.
  • Semantic Mapping: Assign meaning to colors for status indicators like success or error.
  • Accessibility Compliance: Ensure contrast ratios meet WCAG standards and support colorblind users with testing tools.
  • Use Case: Design a brand color palette with contrast-optimized foreground and background pairs for a website, ensuring accessibility for all users.

Quick Start

Use the color system skill to generate a complete, accessible color palette for a new web project.

Frequently Asked Questions about color-system

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

FAQPage Schema
How do I create an accessible color palette for digital interface design?▼

To create an accessible color palette, generate structured tonal scales and map semantic status colors like success or error. Ensure visual consistency by testing contrast ratios against WCAG standards to support colorblind users across platforms.

What is semantic color mapping for UI components?▼

Semantic color mapping assigns specific meanings to colors within a palette, such as using red for error states or green for success. This ensures systematic color planning and consistent visual feedback across UI components and branding materials.

How do I test color contrast for WCAG compliance in a web project?▼

Test color contrast for WCAG compliance by pairing foreground and background colors from your palette. This process ensures contrast ratios meet accessibility standards, optimizing readability for all users, including those with visual impairments.

Does this color palette generator support colorblind accessibility testing?▼

Yes, this color palette generation process includes accessibility testing tools designed to support colorblind users. It evaluates color harmony and contrast to guarantee that semantic mappings remain distinguishable across different visual perceptions.

What's the best way to plan tonal scales for a brand color palette?▼

The best way to plan tonal scales for a brand color palette is to generate a structured set of raw colors. This enables systematic color planning and extended visualization while maintaining visual consistency across digital platforms.

Related Skills

Explore More Design & Creative Skills→
davepoondavepoon
3.3k

brand-guidelines

Apply Anthropic brand colors and typography to documents and presentations.

Community
Intermediate
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
curiositechcuriositech
181

color-contrast-auditor

Audit color contrast against WCAG 2.1 and suggest accessible hex alternatives.

Official
Intermediate
dylantarredylantarre
38

color-contrast

Validate color combinations against WCAG 2.1 contrast requirements and generate accessible pairings.

Community
Basic