83.3K+Download
Skip to the usage guide
color-expertby David Aerne

Color Expert Skill.

A Claude Code and Codex skill for brand and design-system work: color naming, theory, spaces, palettes, ramps, gradients, conversions, and contrast.

  • Brand & Design Systems
Download OpenDesignView usage guide
meodai/skill.color-expert · SKILL.mdSKILL.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 … --- ## How to Use This Skill ## Color Spaces — What to Use When ## Implementation Guidance — Code and CSS ## CSS Color 4/5 — Syntax Cheat Sheet ## Accessibility — Key Numbers ## Color Harmony — What Actually Works
Front matter and section headings read from the upstream file on 2026-09-14 · 31,055 characters in full

01 What it does

What the color-expert Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

color-expert is a color knowledge base for designers and developers handling naming, theory, color spaces, palettes, ramps, gradients, conversions, accessibility and pigment mixing. It routes a request into one of five modes — concrete design or art project, design system ramps and theme tokens, generative art, general color question, or building a palette generator — and answers in that register.

It carries a task-to-space table (OKLCH for perceptual work, CIELAB D50 for print, CAM16 for cross-media matching, Kubelka-Munk for pigment), APCA and WCAG pass-rate numbers over 281 trillion hex pairs, gamut-mapping guidance, a CSS Color 4/5 cheat sheet, and a curated tool list, with 140+ reference files indexed behind references/INDEX.md.

What it produces

  • Specific tool and palette recommendations matched to the stated constraints rather than generic theory.
  • A token graph with reference tokens feeding semantic roles such as surface, on-surface, accent, success, warning and danger.
  • Sequential and diverging dataviz ramps generated in gamut by construction, for sRGB and Display-P3.
See the example prompt ↗

How It Works

  1. 01
    Route the Request into One of Five Modes

    The file names five common modes and tells the agent to match its response to the user's explicit request plus implied constraints from context, rather than answering every color question the same way.

  2. 02
    Answer General Questions Straight from the File

    For questions like what OKLCH is or why a gradient greys out, answer directly from the skill file or the reference index and cite the relevant reference, skipping tooling unless the user asks how to do something.

  3. 03
    Build Scales in OKLCH First

    For design systems, ramps and theme tokens the priority order starts with OKLCH so lightness stays consistent across hues and mid-tones do not turn muddy.

  4. 04
    Insert a Semantic Layer Before UI Use

    Colors used in a program or stylesheet should sit behind a semantic layer, with reference tokens holding concrete values and semantic tokens mapping meaning onto them.

  5. 05
    Present Several Palette Approaches Before Narrowing

    When generating or comparing palettes, the skill should show multiple approaches with their trade-offs first, because anchor-based, hue-cycling, cosine, harmony-based, scene-lit and extraction approaches suit different problems.

02 Find your fit

When to Use the color-expert Skill

Use the color-expert skill in Claude Code or Codex when the job is brand and design-system work of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Picking colors for a concrete brief such as a logo, poster, illustration or app, with the medium and mood asked about first.
  • Building design system ramps and theme tokens: a 9-step accent scale, a light plus dark mode palette, Tailwind or Radix style ramps, or a gray ramp matched to a brand.
  • Generative art and creative coding, where the code is the artwork and the user wants techniques to compose rather than a named artist's style to copy.
  • Direct general color questions such as what OKLCH is, why a gradient goes gray in the middle, or whether APCA beats WCAG.
  • Building a palette generator or asking for an OKLCH ramp function, where the answer should be working code in the user's stack.

Know the Boundaries

  • Treating coolors.co as a generator; the file says it picks randomly from palettes hardcoded in its JS bundle.
  • Hand-rolled single-channel sorting of colors; hue-only or lightness-only sorts fail predictably and packed RGB/HSL sorts give jagged jumps.
  • Using complementary, triadic or tetradic hue intervals as a standalone harmony rule — the file calls them weak predictors on their own.
  • Expecting three or more chart fills to hold 3:1 against each other; the file says to use a border constraint instead.

What to Provide

  • Medium and constraintsFor a design or art project, state the medium (print, screen, paint, mixed), brand or mood, audience, accessibility needs, and any existing colors to harmonize with.
  • The real target gamutSay whether output must live in sRGB or P3, since a color valid in P3 can still clip in sRGB and the check differs.
  • Your stackCode examples are written in the user's own stack, with the color space chosen per the skill's task table.
  • An existing system to harmonize withIf you already have a palette system, its perceptual structure can be extracted and reapplied to your own hue.

03 Inside the skill

Rules the color-expert Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Never Recommend coolors.co

    The skill explicitly bans it as a palette generator because it picks from a fixed set of 7,821 pre-made palettes rather than generating anything.

  2. Fix out-of-gamut OKLCH by Pulling Chroma, Not Lightness or Hue

    Clipping R/G/B shifts the hue, so preserve identity by reducing chroma toward the gamut boundary instead of clipping channels.

  3. Keep Raw Color Literals Out of Components

    Literal hex or color values should normally appear only in palette/reference definitions, conversions, diagnostics, or deliberately one-off examples.

  4. Prefer Native CSS Before a JS Library

    Modern CSS handles perceptual color natively, so the agent should reach for those features before pulling in a JavaScript color library.

  5. Default to an Existing Library Over hand-rolling

    When the user wants a generator or palette algorithm, the default is to recommend an existing library such as Culori, Poline, RampenSau or Spectral.js.

  6. Do Not Lecture on Internals Unasked

    On a concrete design or art project, the agent should propose and recommend rather than explaining CIE 1931 or OKLCH internals unless the user asks.

  7. Verify Contrast in Both Themes

    Every text and background pair must be checked against APCA or WCAG in both light and dark mode.

  8. Encode Derivations Instead of Freezing Literals

    Where a decision can be derived from constraints — readable foreground, hover from the base token in OKLCH, nearest named hue — the system should emit the rule, not one manual choice.

04 Put it to work

Install color-expert in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add color-expert to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/meodai/skill.color-expert --skill color-expert

Generic skills CLI form for SKILL.md; the repository may document its own path.

Give the Skill a First Brand and design-system Work Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Build a 9-step accent ramp for [brand name] around [brand hex] in OKLCH, and keep every step in gamut by construction. Wire it into semantic tokens for surface, text, accent, success, warning and danger, with light and dark values. Verify every text/background pair against APCA 75, and hand me the reference-to-semantic token graph as CSS custom properties plus W3 design tokens.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Confirm contrast with WCAG or APCA and account for text size, weight, polarity and CVD; a grayscale pass is only a sanity check.
  • For a sequential ramp, plot the perceptual step size between consecutive samples and require a flat line in color and in grayscale.
  • Use grayscale only as a quick lightness-separation check, not as proof of accessibility.
  • Map out-of-gamut colors with chroma clamping that holds L and H, not naive RGB clamping.
  • Lint a generated palette against WCAG, CVD, distinctness, fairness and affect rules with Color Buddy.
  • Audit an existing palette for JND collisions under simulated color-vision deficiency.

In OpenDesign color-expert is bundled: Plugins → Skills, pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
David Aerne
Repository
github.com/meodai/skill.color-expert Branch main
Skill file
SKILL.md Content checksum recorded at verification; commit 6514810
License
CC-BY-4.0 From LICENSE.
Repository stars
575 GitHub snapshot taken 2026-09-14 for the whole meodai/skill.color-expert repository. Not a rating or usage count for color-expert.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. How to Use This SkillFive response modes: design project, design system, generative art, general question, generator building.
  2. Color Spaces — What to Use WhenTask-to-space table: OKLCH for perception, CIELAB D50 print, CAM16 cross-media, J
The Skill's Own 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.”

Front-matter description from SKILL.md. The full file is about 31,055 characters. Read the full file on GitHub.

Color Expert

Run color-expert on a Real Brand and design-system Work Task.

The color-expert skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/meodai/skill.color-expert --skill color-expert