color-expert

Category: Docs & Knowledge | Uploader: meodai | Downloads: 0 | Version: v1.0（Latest）

Use when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, conversions, accessibility, perception, or historical color terminology

Changelog: Source: GitHub https://github.com/meodai/skill.color-expert

Directory Structure

Current level: Root

📁 .claude/
- 📄 settings.local.json 6.7 KB
📁 references/
- 📁 contemporary/
  - 📁 colorandcontrast/
    
    📄 accessibility.md 7.7 KB
    
    📄 color-effects.md 2.0 KB
    
    📄 color-models.md 2.2 KB
    
    📄 color-properties.md 2.4 KB
    
    📄 color-spaces.md 35.4 KB
    
    📄 color-vision.md 4.8 KB
    
    📄 publications.md 4.0 KB
    
    📄 ui-design.md 4.8 KB
  - 📁 huevaluechroma/
    
    📄 ch01-dimensions-of-colour.md 129.4 KB
    
    📄 ch02-light-and-shade.md 13.9 KB
    
    📄 ch03-colour-vision.md 31.3 KB
    
    📄 ch04-additive-mixing.md 40.9 KB
    
    📄 ch05-subtractive-mixing.md 10.5 KB
    
    📄 ch06-mixing-of-paints.md 52.9 KB
    
    📄 ch07-hue.md 79.4 KB
    
    📄 ch08-lightness-and-chroma.md 4.7 KB
    
    📄 ch09-brightness-and-saturation.md 17.2 KB
    
    📄 ch10-principles-of-colour.md 24.6 KB
    
    📄 ch11-afterthoughts.md 321.6 KB
    
    📄 glossary.md 54.3 KB
    
    📄 links.md 563 B
    
    📄 references.md 11.9 KB
  - 📄 accessible-color-combinations-count.md 2.5 KB
  - 📄 atlas-of-rare-familiar-colour.md 2.3 KB
  - 📄 bird-color-theory-hue-circuits.md 2.5 KB
  - 📄 bird-complementary-colors-tetrachromacy.md 2.8 KB
  - 📄 bjorn-ottosson-oklab-articles.md 5.0 KB
  - 📄 briggs-colours-objects-light.md 38.5 KB
  - 📄 briggs-controlling-colour-history.md 29.0 KB
  - 📄 briggs-dimensions-of-colour-today.md 25.7 KB
  - 📄 briggs-elements-of-colour.md 49.5 KB
  - 📄 briggs-what-is-a-colour.md 28.3 KB
  - 📄 chroma-vs-saturation.md 1.9 KB
  - 📄 color-temperature-spectral-bias.md 2.8 KB
  - 📄 colour-subjectivisms-philosophy.md 41.0 KB
  - 📄 computerphile-colourspaces.md 2.5 KB
  - 📄 computerphile-jpeg-color.md 3.2 KB
  - 📄 designing-programmes-gerstner.md 2.0 KB
  - 📄 everything-about-color-25min.md 3.8 KB
  - 📄 everything-tiktok-taught-color-theory.md 3.9 KB
  - 📄 gao-color-palette-generation-review.md 2.2 KB
  - 📄 gencolor-color-concept-association.md 3.2 KB
  - 📄 gerritsen-color-wheel-spectral-perception.md 3.2 KB
  - 📄 golden-paint-making.md 57.9 KB
  - 📄 green-warm-or-cool-spectral.md 2.3 KB
  - 📄 how-eyes-turn-light-into-color.md 2.3 KB
  - 📄 iridescence-thin-film-interference.md 2.2 KB
  - 📄 iridescent-color-math.md 2.3 KB
  - 📄 iscc-aic-colour-literacy-project.md 16.6 KB
  - 📄 lightness-vs-brightness.md 1.7 KB
  - 📄 magical-color-theory-rgb-shadows.md 1.7 KB
  - 📄 oklab-perceptual-color-space-minecraft.md 3.6 KB
  - 📄 olo-newly-discovered-color.md 3.8 KB
  - 📄 opponent-process-color-blindness.md 1.7 KB
  - 📄 palette-based-photo-recoloring.md 2.1 KB
  - 📄 pixar-color-science-khan-academy.md 18.0 KB
  - 📄 pleasing-colour-palette-sorting.md 2.0 KB
  - 📄 schloss-palmer-color-combinations.md 2.5 KB
  - 📄 warm-cool-color-temperature.md 2.7 KB
  - 📄 web-wheel-web-safe-colors.md 3.4 KB
  - 📄 your-colors-suck-acerola.md 4.6 KB
- 📁 historical/
  - 📄 amy-sawyer-forgotten-color-theorist.md 2.4 KB
  - 📄 bardwell-18th-century-portrait-colour.md 50.3 KB
  - 📄 caravaggio-copper-resinate-greens.md 4.2 KB
  - 📄 color-definitions-webster-iscc.md 4.2 KB
  - 📄 colour-librarian-parkinson.md 58.6 KB
  - 📄 elizabeth-lewis-1931-color-wheel.md 3.7 KB
  - 📄 itten-seven-contrasts-critical-review.md 36.1 KB
  - 📄 moses-harris-1769-color-wheel.md 4.1 KB
  - 📄 oldest-color-wheel-with-magenta.md 2.9 KB
  - 📄 ostwald-color-wheel.md 4.2 KB
  - 📄 reilly-controlled-palette.md 54.9 KB
  - 📄 ridgway-color-standards-1912.md 57.0 KB
  - 📄 ryb-vs-cmy-color-wheels.md 2.9 KB
  - 📄 what-happened-to-indigo.md 4.6 KB
- 📁 techniques/
  - 📄 aladdin-color-analysis.md 3.2 KB
  - 📄 apca-myndex-contrast.md 6.2 KB
  - 📄 book-of-shaders-color.md 2.6 KB
  - 📄 brucelindbloom-color-math.md 4.1 KB
  - 📄 censor-palette-analyser.md 3.5 KB
  - 📄 choosing-colors-with-confidence.md 3.5 KB
  - 📄 color-buddy-palette-lint.md 6.6 KB
  - 📄 color-description-library.md 2.1 KB
  - 📄 color-mixing-hexaflexagon-paths.md 2.1 KB
  - 📄 color-name-lists.md 4.6 KB
  - 📄 color-palette-shader.md 3.2 KB
  - 📄 color-router.md 3.6 KB
  - 📄 color-spd-spectral-picker.md 1.9 KB
  - 📄 color-triangle-jinjer-markley.md 3.1 KB
  - 📄 colordisk-trillium.md 1.9 KB
  - 📄 colornerd-paint-manufacturer-swatches.md 2.1 KB
  - 📄 colorsort-js.md 2.6 KB
  - 📄 coolors-co-not-generative.md 2.2 KB
  - 📄 css-color-generation-technique.md 4.1 KB
  - 📄 cubehelix-color-scheme.md 2.6 KB
  - 📄 culori-color-spaces-api.md 6.3 KB
  - 📄 digital-color-fidget.md 2.5 KB
  - 📄 dittotones-palette-from-systems.md 3.4 KB
  - 📄 drawing-codex-color-proportion.md 3.6 KB
  - 📄 erika-mulvenna-color-theory-interview.md 2.7 KB
  - 📄 farbvelo-random-palette-generator.md 3.0 KB
  - 📄 florent-farges-color-harmony-painters.md 4.0 KB
  - 📄 focalpaint-impossible-pigments.md 2.8 KB
  - 📄 fontana-generative-color-approach.md 5.9 KB
  - 📄 futur-academy-color-playlist.md 7.8 KB
  - 📄 glsl-lut-color-grading.md 2.8 KB
  - 📄 goethe-edge-colors-design-hack.md 3.4 KB
  - 📄 hsluv-better-than-hsl.md 3.0 KB
  - 📄 image-color-extraction-tools.md 4.7 KB
  - 📄 imaginary-pigments-mixbox.md 3.3 KB
  - 📄 iq-cosine-palette-formula.md 5.1 KB
  - 📄 mattdesl-generative-color-workshop.md 5.9 KB
  - 📄 paint-mixing-lecture-ufv.md 3.9 KB
  - 📄 pickypalette-interactive-tool.md 2.9 KB
  - 📄 piterpasma-tweaked-rainbow-palette.md 3.8 KB
  - 📄 pixel-art-color-palettes.md 4.7 KB
  - 📄 poline-esoteric-palette-generator.md 4.4 KB
  - 📄 pro-color-harmonies.md 5.0 KB
  - 📄 procreate-color-wheel-critique.md 2.4 KB
  - 📄 rampensau-palette-generation.md 3.6 KB
  - 📄 rybitten-ryb-color-space.md 3.7 KB
  - 📄 screen-to-print-colour-fidelity.md 55.5 KB
  - 📄 skin-tones-color-mixing-youthforia.md 2.3 KB
  - 📄 spectraljs-pigment-mixing.md 3.1 KB
  - 📄 two-color-combinations-toolkit.md 1.8 KB
  - 📄 tyler-hobbs-generative-color.md 3.4 KB
  - 📄 youre-wrong-about-color-harmony.md 3.0 KB
- 📄 INDEX.md 72.5 KB
📄 .gitignore 185 B
📄 CLAUDE.md 1.6 KB
📄 LICENSE 1014 B
📄 README.md 10.1 KB
📄 SKILL.md 11.7 KB
📄 THIRD_PARTY_NOTICES.md 1.5 KB

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, conversions, accessibility, perception, or historical color terminology
---

# Color Expert

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

## 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                                                     |
| HDR                             | **Jzazbz / ICtCp**                     | Designed for extended dynamic range                                       |
| Pigment/paint mixing simulation | **Kubelka-Munk** (Spectral.js, Mixbox) | Spectral reflectance mixing, not RGB averaging                            |
| Color difference (precision)    | **CIEDE2000**                          | Gold standard perceptual distance                                         |
| Color difference (fast)         | **Euclidean in OKLAB**                 | Good enough for most applications                                         |
| Video/image compression         | **YCbCr**                              | Luma+chroma separation enables chroma subsampling                         |

### Understanding HSL's Limitations

HSL isn't "bad" — it's a simple, fast geometric rearrangement of RGB into a cylinder. It's fine for quick color picking and basic UI work. But its three channels don't correspond to human perception:

- **Lightness (L):** fully saturated yellow (`hsl(60,100%,50%)`) and fully saturated blue (`hsl(240,100%,50%)`) have the same L=50% but vastly different perceived brightness. L is a mathematical average, not a perceptual measurement.
- **Hue (H):** non-uniform spacing. A 20° shift near red produces a dramatic change; the same 20° near green is barely visible. The green region is compressed, reds are stretched.
- **Saturation (S):** doesn't correlate with perceived saturation. A color can have S=100% and still look muted (e.g., dark saturated blue).

**When HSL is fine:** simple color pickers, quick CSS tweaks, situations where perceptual accuracy doesn't matter.

**When to use something better:**

- Generating palettes or scales → **OKLCH** (uniform lightness across hues)
- Creating gradients → **OKLAB** or `color-mix(in oklab)` (no mid-gradient darkening)
- Gamut-aware picking with HSL-like UX → **OKHSL** (Ottosson's perceptual HSL)
- Normalized saturation 0–100% → **HSLuv** (CIELUV-based, no out-of-bounds)

### Key Distinctions

- **Chroma** = colorfulness relative to a same-lightness neutral reference
- **Saturation** = perceived colorfulness relative to the color's own brightness
- **Lightness** = perceived reflectance relative to a similarly lit white
- **Brightness** = perceived intensity of light coming from a stimulus
- Same chroma ≠ same saturation. These are different dimensions.

## Accessibility — Key Numbers

Of ~281 trillion hex color pairs (research by @mrmrs\_, computed via a Rust brute-force run):

| Threshold                 | % passing | Odds            |
| ------------------------- | --------- | --------------- |
| WCAG 3:1 (large text)     | 26.49%    | ~1 in 4         |
| WCAG 4.5:1 (AA body text) | 11.98%    | ~1 in 8         |
| WCAG 7:1 (AAA)            | 3.64%     | ~1 in 27        |
| APCA 60                   | 7.33%     | ~1 in 14        |
| APCA 75 (fluent reading)  | 1.57%     | ~1 in 64        |
| APCA 90 (preferred body)  | **0.08%** | **~1 in 1,250** |

APCA is far more restrictive than WCAG at comparable readability. At APCA 90, only 239 billion of 281 trillion pairs work. JPEG compression exploits the same biology: chroma subsampling (4× less color data) is invisible because human vision resolves brightness at higher resolution than color.

## Color Harmony — What Actually Works

### Hue-first harmony is a weak standalone heuristic

Complementary, triadic, tetradic intervals are weak predictors of mood, legibility, or accessibility on their own. Every hue plane has a different shape in perceptual space, so geometric hue intervals do not guarantee perceptual balance.

### Character-first harmony works (Ellen Divers' research)

Organize by character (pale/muted/deep/vivid/dark), not hue. Finding: **hue is usually a weaker predictor of emotional response than chroma and lightness** — a muted palette often reads as calm across many hues. Relaxed vs intense is driven more by chroma + lightness than hue alone.

### Legibility = lightness variation

Grayscale is a quick sanity check for lightness separation, not an accessibility proof. You still need to verify contrast with WCAG/APCA and consider text size, weight, polarity, and CVD. Same character + varied lightness is often more readable. Same lightness regardless of hue is usually illegible.

### The 60-30-10 rule

60% dominant color, 30% secondary, 10% accent. One color dominates to prevent "three equally-sized gorillas fighting."

## Pigment Mixing — Not What You Think

- **Pigment mixing is not well described by the simple subtractive model alone** — "integrated mixing" (Küppers/Briggs) is a better practical description. It behaves like a compromise between subtractive and additive averaging.
- **CMY mixing paths curve outward** (retain chroma = vivid secondaries) — "extroverted octopus"
- **RGB mixing paths curve inward** (lose chroma = dull browns) — "introverted octopus"
- **Mixing is non-linear**: proportion of paint ≠ proportional hue change. You "turn a corner" at certain ratios.
- **Blue→yellow is a LONG road**, red→yellow is SHORT. Traditional wheel massively misrepresents distances.
- **Tinting strength varies**: blues are concentrated/strong, yellows are weak.
- **White doesn't just lighten** — it shifts hue AND kills chroma.
- **For spectral/K-M mixing in code**: use Spectral.js (open source) or Mixbox (commercial).

## Color Temperature

- **Temperature ≠ hue** — it's a systematic shift of BOTH hue AND saturation, dependent on starting hue
- **Spectral bias**: which end of the spectrum a light favors (short λ = cool, long λ = warm)
- **Cool daylight**: blue atmospheric scatter fills shadows; paint neutral highlights, blue shadows
- **Warm incandescent**: favors long wavelengths including infrared (literally felt as heat)
- **Green and purple** do not map cleanly to warm/cool in the same way as red-orange or blue-cyan; perceived temperature depends strongly on context

## Color Naming — Multiple Systems for Different Registers

| System                | Register                   | Example                            |
| --------------------- | -------------------------- | ---------------------------------- |
| ISCC-NBS              | Scientific precision       | "vivid yellowish green"            |
| Munsell               | Systematic notation        | "5GY 7/10"                         |
| XKCD                  | Common perception          | "ugly yellow", "hospital green"    |
| Traditional Japanese  | Cultural/poetic            | "wasurenagusa-iro" (forget-me-not) |
| RAL                   | Industrial reproducibility | RAL 5002                           |
| Ridgway (1912)        | Ornithological             | 1,115 named colors, public domain  |
| CSS Named Colors      | Web standard               | 147 named colors                   |
| color-description lib | Emotional adjectives       | "pale, delicate, glistening"       |

Use `color-name-lists` npm package for 18 naming systems in one import.

## Historical Corrections

- **Moses Harris (1769)** was first to place RYB at equal 120° — Newton, Boutet, Schiffermüller didn't. His own wheel needed a 4th pigment. The origin of bad color theory.
- **Von Bezold (1874)** killed "indigo" as a spectral color — Newton's "blue" ≈ modern cyan, Newton's "indigo" ≈ modern blue.
- **The word "magenta"** wasn't used for the subtractive primary until 1907 (Carl Gustav Zander). Before: "pink" (Benson 1868), "crimson," "purpur."
- **Amy Sawyer (1911)** patented a CMY wheel (primrose/rose/turquoise) decades before it became mainstream.
- **Elizabeth Lewis (1931)** married trichromatic + opponent process on one wheel, anticipating CIE Lab by 30 years.

## Recommended Tools

### Palette Generation (actual algorithms, not pre-made swatches)

Note: coolors.co does not generate palettes — it picks randomly from 7,821 pre-made palettes hardcoded in its JS bundle.

- **RampenSau** — hue cycling + easing, color space agnostic
- **Poline** — anchor points + per-axis position functions (1.2K stars)
- **pro-color-harmonies** — adaptive OKLCH harmony, muddy-zone avoidance, 4 styles × 4 modifiers
- **dittoTones** — extract Tailwind/Radix "perceptual DNA", apply to your hue
- **FarbVelo** — random palettes with dark→light structure
- **IQ Cosine Formula** — `color(t) = a + b*cos(2π(c*t+d))`, 12 floats = infinite palette

### Palette Analysis & Linting

- **Color Buddy** — 38 lint rules (WCAG, CVD, distinctness, fairness, affect)
- **Censor** — Rust CLI, CAM16UCS analysis, 20+ viz widgets
- **Color Palette Shader** — WebGL2 Voronoi, 30+ color models, 11 distance metrics
- **PickyPalette** — interactive sculpting on color space canvas

### Color Libraries (code)

- **Culori** — 30 spaces, 10 distance metrics, gamut mapping, CVD sim
- **@texel/color** — 5–125× faster than Color.js, minimal, for real-time
- **Spectral.js** — open-source K-M pigment mixing (blue+yellow=green)
- **RYBitten** — RGB↔RYB with 26 historical color cubes

### Key Online Tools

- **oklch.com** — OKLCH picker
- **Huetone** — accessible color system builder (LCH/OKLCH)
- **View Color** — real-time analysis, WCAG + APCA, CVD preview
- **APCA Calculator** — myndex.com/APCA

## Deep References

See `references/INDEX.md` for 100+ detailed files organized as:

- **`historical/`** (14 files + 14 PDFs) — Ostwald, Helmholtz, Bezold, Ridgway 1912, ISCC-NBS, Caravaggio's pigments, Moses Harris, Lewis/Ladd-Franklin
- **`contemporary/`** (31 files) — Ottosson's OKLAB articles, Briggs lectures (5), CSA webinars (13), Pixar Color Science, Acerola, Juxtopposed, Computerphile, bird tetrachromacy, OLO, GenColor paper. Full scrapes: huevaluechroma.com (11 chapters + glossary), colorandcontrast.com (8 files)
- **`techniques/`** (40 files) — All tools above documented in detail, plus: Tyler Hobbs generative color, Harvey Rayner Fontana approach, Goethe edge colors as design hack, mattdesl workshop + K-M simplex, CSS-native generation, IQ cosine presets, Erika Mulvenna interview, Color Nerd harmony lecture, Bruce Lindbloom math reference, image extraction tools, Aladdin color analysis

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

color-expert

Directory Structure

SKILL.md

Report

Notice