Color Expert

Install

npx skills add meodai/skill.color-expert

This is third-party code. Review the repository files before installing.

What it does

The skill has three layers. SKILL.md holds the essentials: which color space to use for which task, how to build perceptually even ramps and tokens, how to check contrast, and which libraries and tools to use. INDEX.md helps the agent find the right reference file, and the references folder holds well over a hundred sources: notes on Ottosson's OKLAB articles, Briggs lectures, video transcripts and docs for Culori, Spectral.js, Poline and others. Answers adapt to the mode: a concrete design project, a design system, generative art, a general question or building a palette generator.

Who it is for. For designers, frontend developers and generative artists who take color seriously.

Example request

Build a 9-step OKLCH ramp for the #E2561B accent and check text contrast in both themes

Limitations

References are large and the agent reads them selectively, so answer depth depends on which files it opens. Material is in English. The skill carries the author's opinions, such as avoiding coolors.co; they are backed by references but are a stance rather than a standard. CC BY 4.0 licensed.

How to disable. Remove the color-expert folder or symlink from the agent's skills directory.

Security check

• The skill consists only of instructions and references

README in short

The README tells how the skill grew from notes into a knowledge base and how the author adds sources: video transcripts, converted PDFs and repository docs. It describes the reference structure by section: historical, contemporary science, techniques and tools. It lists the key positions baked into the skill and gives installation via npx skills or a symlink.

SKILL.md

---
name: color-expert
description: Use when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the user is choosing, comparing, generating, naming, converting, or explaining colors, even if they do not explicitly ask for "color theory."
---

# Color Expert

A comprehensive knowledge base for color-related work. See `references/INDEX.md` for 140+ detailed reference files; this skill file contains the essential knowledge to answer most questions directly.

## How to Use This Skill

Match the response to the user's explicit request and clearly implied constraints from context. Five common modes:

**Concrete design or art project** — "help me pick colors for my logo / poster / illustration / app." Ask about medium (print, screen, paint, mixed), brand or mood, audience, accessibility needs, and any existing colors to harmonize with. Then propose. Don't lecture about CIE 1931 or OKLCH internals unless asked. Recommend specific tools and palettes that fit the constraints, not generic theory.

**Design system, ramps, or theme tokens** — "build me a 9-step accent scale", "palette for light + dark mode", "Tailwind/Radix-style ramps", "what's the right gray ramp for our brand?" Prioritize in this order:

- Use OKLCH to build perceptually uniform scales (consistent lightness across hues, no muddy mid-tones).
- Build a token graph: reference tokens (palette) → semantic tokens (surface, on-surface, accent, success, warning, danger) → component usage; see *Implementation Guidance* below.
- Verify every text/background pair against APCA or WCAG in both light and dark.

The test for a sequential ramp is **flat perceptual derivative** — plot the perceptual step size between consecutive samples; it should be a horizontal line, in color *and* in grayscale. Bumps are regions where the ramp exaggerates change that isn't in the data (this is jet's core failure, not its ugliness).

## Color Spaces — What to Use When

| Task                            | Use                                    | Why                                                                       |
| ------------------------------- | -------------------------------------- | ------------------------------------------------------------------------- |
| Perceptual color manipulation   | **OKLCH**                              | Best uniformity for lightness, chroma, hue. Fixes CIELAB's blue problem.  |
| CSS gradients & palettes        | **OKLCH** or `color-mix(in oklab)`     | No mid-gradient darkening like RGB/HSL                                    |
| Gamut-aware color picking       | **OKHSL / OKHSV**                      | Ottosson's picker spaces — cylindrical like HSL but perceptually grounded |
| Normalized saturation (0-100%)  | **HSLuv**                              | CIELUV chroma normalized per hue/lightness. HPLuv for pastels.            |
| Print workflows                 | **CIELAB D50**                         | ICC standard illuminant                                                   |
| Screen workflows                | **CIELAB D65** or OKLAB                | D65 = screen standard                                                     |
| Cross-media appearance matching | **CAM16 / CIECAM02**                   | Accounts for surround, adaptation, luminance, and viewing conditions      |
| HDR                             | **Jzazbz / ICtCp**                     | Designed for extended dynamic range                                       |

Related