skills.rest
gabesan21
gabesan21COMMUNITY
Explore all skills by this author →
GitHub

color-expert

Provides color science knowledge for naming, spaces, palettes, accessibility, and pigment mixing tasks.

1|1|Updated Jul 6, 2026
Search Tags:#accessibility#design tokens#wcag#color theory#oklch#palette generation#css color
One-click install
npx skills add https://github.com/gabesan21/project-of-projects --skill color-expert-gabesan21
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-expert
Source: https://github.com/gabesan21/project-of-projects/tree/main/.agents/skills/color-expert
Command: npx skills add https://github.com/gabesan21/project-of-projects --skill color-expert-gabesan21

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Color work is full of misconceptions: HSL lightness is not perceptual, hue-first harmony is a weak heuristic, and most palette tools do not actually generate palettes. This Skill gives an AI agent a curated color science knowledge base so it answers color questions with accurate theory, correct tool recommendations, and practical guidance instead of folk design advice. ## Core Features & Use Cases - Color space guidance: Task-based recommendations for OKLCH, OKLAB, HSLuv, CAM16, CIELAB, and Kubelka-Munk mixing, including gamut mapping and CSS Color 4/5 syntax. - Palette generation and analysis: Recommends real algorithmic tools (RampenSau, Poline, pro-color-harmonies, Culori, Spectral.js) and linting tools like Color Buddy, with explicit warnings against non-generative tools like coolors.co. - Accessibility and naming: WCAG vs APCA contrast statistics, plus eight color naming systems (ISCC-NBS, Munsell, XKCD, Ridgway, and more) for different registers. - Use Case: Ask your agent to build a 9-step accessible accent scale for light and dark mode, and it will use OKLCH, verify APCA/WCAG contrast pairs, and emit semantic design tokens rather than hardcoded hex values. ## Quick Start Ask your agent to generate an accessible OKLCH color ramp for your design system or to explain why a gradient turns gray in the middle.

Frequently Asked Questions about color-expert

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

FAQPage Schema
How do I generate a perceptually uniform color palette?▼

Generate palettes in OKLCH using tools like RampenSau, Poline, or pro-color-harmonies rather than HSL-based generators. OKLCH keeps lightness and chroma consistent across hues, avoiding muddy mid-tones and uneven ramps.

What color space should I use for CSS gradients?▼

Use OKLCH or OKLAB for CSS gradients, for example linear-gradient(in oklch, red, blue) or color-mix(in oklab, ...). Interpolating in RGB or HSL causes the gray, darkened midpoint that perceptual spaces avoid.

Is APCA better than WCAG for color contrast?▼

APCA is significantly more restrictive than WCAG at comparable readability levels. Only about 0.08% of hex color pairs pass APCA 90 versus 11.98% passing WCAG 4.5:1, so APCA better predicts real text readability.

Why does my OKLCH color look duller than expected?▼

The chroma you picked likely exceeds the target gamut, so the color silently clips. Reduce chroma toward the gamut boundary with Culori's clampChroma instead of clamping RGB channels, which shifts the hue.

How do I simulate realistic paint mixing in code?▼

Use Kubelka-Munk spectral mixing via Spectral.js or Mixbox instead of RGB averaging. RGB averaging curves inward and produces dull browns, while spectral mixing retains chroma and yields results like blue plus yellow making green.

When is HSL acceptable to use for color work?▼

HSL is fine for quick color pickers and simple CSS tweaks where perceptual accuracy does not matter. Its lightness, hue spacing, and saturation do not match human perception, so use OKLCH, OKHSL, or HSLuv for scales, picking, and normalized saturation.

Related Skills

Explore More Design & Creative Skills→
minhnv0807minhnv0807
569

46-brand-guideline-global

Creates brand guideline documents covering color systems, typography, logo usage, and accessibility rules.

Community
Intermediate
NextSpark-jsNextSpark-js

tailwind-theming

Guide Tailwind CSS v4 theming with CSS variables and next-themes in Next.js.

Official
Intermediate
jaainiljaainil

color-accessibility

Guide designers to create and validate WCAG-compliant accessible color palettes.

Community
Advanced
xiaobuliukunxiaobuliukun

algorithmic-art

Generate reproducible p5.js algorithmic art with seeded randomness and interactive parameters.

Community
Advanced