skills.rest
flitzrrr
flitzrrrCOMMUNITY
Explore all skills by this author →
𝕏@flitzrrrGitHub

color-theory

Generate accessible color palettes and verify WCAG contrast ratios for web interfaces.

4|1|Updated Apr 4, 2026
Search Tags:#accessibility#design tokens#contrast#color#dark mode#palette#color psychology
One-click install
npx skills add https://github.com/flitzrrr/frontend-design-skills --skill color-theory-flitzrrr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-theory
Source: https://github.com/flitzrrr/frontend-design-skills/tree/main/skills-src/color-theory
Command: npx skills add https://github.com/flitzrrr/frontend-design-skills --skill color-theory-flitzrrr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a systematic approach to selecting, organizing, and validating color for web projects so designs are communicative, consistent, and accessible across light and dark themes.

Core Features & Use Cases

  • Palette Design: Define a minimal chromatic palette (1 primary, 1 accent, 3-5 neutrals) and 9-11 step gradations for each color.
  • Accessibility & Contrast: Apply WCAG contrast rules (4.5:1 normal text, 3:1 large text) and test for color vision deficiencies.
  • Semantic Tokens & Dark Mode: Produce a two-tier token system (primitive + semantic) and independent dark mode tokens with muted primaries and recommended background/text values.
  • Patterns & Rules: Use the 60-30-10 distribution, recommended color harmonies (complementary, analogous, triadic), and avoid anti-patterns like rainbow design or pure inversion for dark mode.
  • Checklist & Audit: Provide a checklist to verify max chromatic colors, semantic mapping, token usage, and contrast compliance.

Quick Start

Ask the color-theory skill to generate an accessible primary and accent palette plus light and dark semantic design tokens for your project.

Frequently Asked Questions about color-theory

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

FAQPage Schema
How do I generate an accessible color palette for web interfaces?▼

Create a systematic color scheme by defining a primary, accent, and neutral palette with 9-11 step gradations, then verifying contrast ratios to ensure the design meets WCAG accessibility standards for web interfaces.

What's the best way to structure design tokens for dark mode?▼

Structure dark mode tokens using a two-tier system with primitive and semantic layers, applying muted primaries and adjusted background values rather than simply inverting light theme colors to maintain perceptual consistency.

How does color psychology apply to UI design systems?▼

Color psychology in UI design systems is applied through strategic 60-30-10 distribution rules and color harmonies like complementary or analogous schemes, ensuring communicative and consistent visual hierarchy across components.

Can I use HSL or OKLCH for perceptual color gradations in component libraries?▼

Yes, HSL or OKLCH are recommended for creating perceptual color gradations in component libraries, as they provide consistent lightness and chroma adjustments across 9-11 step scales for systematic design tokens.

How do I audit a web project for color contrast compliance?▼

Audit a web project for color contrast compliance by applying a checklist to verify maximum chromatic colors, semantic token mapping, consistent token usage, and WCAG contrast ratios across both light and dark themes.

Related Skills

Explore More Design & Creative Skills→
thrillmadethrillmade
1

chroma-harmonization

Cap chroma values across multi-hue palettes at each brightness level.

Official
Intermediate
OpenDCAIOpenDCAI
114

react

Standardize React component development with design tokens and TypeScript.

Official
Advanced
gyalamanch001agyalamanch001a

tailwind-design-system

Build scalable Tailwind CSS v4 design systems with semantic tokens and CVA variants.

Community
Advanced
KyaniteLabsKyaniteLabs
3

color-system

Generate OKLCH color ramps and semantic token systems with WCAG 2.x contrast verification.

Official
Advanced