Color Expert skill
color-expert
A color science skill: OKLCH, APCA and WCAG contrast, design system ramps, palette generation, pigment mixing and color history
- 624 ★ on the repository
- Last commit
- CC-BY-4.0
Minimal access
Why this level
- The skill consists only of instructions and references
Install
- Works in
Manual install
npx skills add meodai/skill.color-expertAccess and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill consists only of instructions and references
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.
Good fit when
- You need an accent color ramp for light and dark themes
- A gradient turns gray in the middle and you want to know why
- You need to check text and background pairs against APCA or WCAG
Not a fit when
- You need a finished brand book rather than color guidance
- The task is photo or video grading in a specific application
Example request
Build a 9-step OKLCH ramp for the #E2561B accent and check text contrast in both themesLimitations
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.
FAQ
Why OKLCH instead of HSL?
HSL lightness does not match perception, so ramps and gradients come out uneven. OKLCH gives nearly uniform steps.
Is skill quality checked?
The evals folder has prompts that should and should not trigger the skill, plus realistic tasks to review answers.
Discussion
No questions or reviews yet.
Related
SkillsA registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
A skill that turns reference UIs into a structured design profile in JSON and generates matching UI from your content
Meta-skill that reads a brand from a URL, name or screenshot and turns it into a full design system as a new skill
Tastemaker
tastemaker
A taste skill for interfaces so the result does not look generated: only Markdown and scripts, contrast is checked by WCAG calculation
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
A skill and CLI that pull colors, type, spacing, radius and shadows from a public site and save them as JSON and CSS tokens
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.
README badge
Original 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 |