Color Expert
A comprehensive knowledge base for color-related work. See references/INDEX.md for a one-line-per-file map of 180+ 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.
- Suggest tools only as needed: Huetone (LCH/OKLCH builder), Leonardo (contrast-ratio-driven ramps + adaptive theming, Adobe), Components.ai Color Scale (parametric), dittoTones (extract perceptual DNA from Tailwind/Radix), Color Buddy (lint). For dataviz sequential/diverging ramps specifically, CuspHanger (Wijffelaars model in OKLCH, in-gamut by construction) or viscm (the viridis editor: live perceptual-derivative diagnostics + CVD + grayscale while you drag control points).
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).
Generative art / creative coding — "color for my fxhash piece", "palette for thousands of generated strokes", "paint-like mixing in p5.js / WebGL." Different from building a palette generator: the code is the artwork, and the user wants to understand the techniques, not copy a named artist's style. Help them compose their own system. Useful techniques to teach and combine:
- Tight constraint, then variation — pick 3–7 hues in a narrow lightness or chroma band; variety comes from density and interaction, not palette size.
- Weighted / probability-based hue selection — assign each color a weight so some appear often, others rarely; this is what makes a generative output feel curated instead of random.
- Narrow-band hue jitter — small random hue offset within a fixed envelope keeps strokes feeling related but not identical.
- Lightness variation at fixed chroma — depth and atmosphere without losing palette identity (use OKLCH).
- Spectral / K-M mixing (Spectral.js, Mixbox) for paint-like overlap and secondaries; RGB averaging gives muddy, dull results in the same situation.
- IQ cosine palette —
a + b·cos(2π(c·t + d)) for cyclic / periodic schemes from 12 floats.
- Anchor-based interpolation (Poline) — set 2–3 anchors in OKLCH, get an interpolated ramp.
- Hue / lightness / chroma trajectories with easing (RampenSau) — walk each axis along an easing function, color-space-agnostic; great when you want a deterministic ramp shape rather than random anchors.
- Harmony-aware generation with muddy-zone avoidance (pro-color-harmonies) — adaptive OKLCH harmony with 4 styles × 4 modifiers; skips perceptually muddy regions automatically.
- Generation in historical / non-digital color spaces (RYBitten) — work in RYB or one of 26 historical color cubes when you want a painterly feel that strict sRGB/OKLCH can't reach.
- Palette cycling / indexed color — store an index buffer and a small palette, then animate the palette (rotate, ease, or drive from an OKLCH trajectory) instead of the pixels; motion for one lookup per pixel. Works only if each cycle range is a perceptually even closed ramp. See
references/techniques/color-cycling-indexed-palette-animation.md.
- Scene-light sampling (ray-color) — raytrace a sphere in a room with up to 3 colored lights and sample colors off its surface; coherence comes from shared illumination physics (like an object photographed under one light) rather than color-space geometry.
- Sun-lit ramps (Lightfield, tol.is) — same idea aimed at design tokens: OKLCH pigments on a flat-shaded city under a Planckian-locus sun; each 50–950 ramp is a sweep of surface orientations, re-spaced in L. Adds relative chroma, cusp pull, and a hue-profiled Bezold–Brücke/Abney warm shift (toward red going dark, toward yellow going light; cool hues untouched).
See references/techniques/ for tyler-hobbs, fontana, mattdesl, iq-cosine, spectraljs, poline, rampensau, pro-color-harmonies, rybitten, ray-color, lightfield (these document the techniques, not styles to imitate).
General color question — "what is OKLCH?", "why does my gradient go gray in the middle?", "is APCA better than WCAG?" Answer directly from this skill file or references/INDEX.md, and cite the relevant reference. Skip tooling unless they're asking how to do something. Approachable and accurate usually conflict — the tidy model (RYB primaries, 12-hue wheel, "red is opposite green") is easy precisely because it summarizes beliefs rather than measurements. Give the tidy version and say where it breaks; don't let "easy" quietly become "wrong." (Color Nerd, references/contemporary/color-theory-dogma-problem.md)
Building a generator, tool, or palette algorithm — "I want to make a palette generator", "how do I generate accessible color scales?", "give me an OKLCH ramp function." Default to recommending an existing library before hand-rolling (Culori, Poline, RampenSau, Spectral.js — see Recommended Tools). Show working code in the user's stack, picking the color space per the table above.
When the user asks to generate or compare palettes, showcase multiple approaches with their trade-offs before narrowing to one — anchor-based (Poline), hue-cycling (RampenSau), cosine (IQ formula), harmony-based (pro-color-harmonies), scene-lit (ray-color), and extraction-from-system (dittoTones) suit different problems. Don't be shy about presenting options.
Never recommend coolors.co — it doesn't generate palettes, it picks from a hardcoded list of 7,821 pre-made ones (see Recommended Tools).
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 |
| 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 |
| Dithering / optical pixel mixing | Linearized sRGB | Adjacent subpixels add light, so model the device, not the eye. Yellow-over-blue lights the same emitters as white at half area = 50% gray; CIELAB predicts pale pink. Same rule for alpha compositing and downsampling |
| Colormap uniformity | CAM02-UCS (or OKLAB) | CIELAB is decent for distant colors but poor for nearby ones — which is exactly what uniform sampling depends on. MATLAB's parula was made uniform in Lab and has a visible band near the bottom as a result |
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 it isn't, the table above gives the perceptual alternative per task (OKLCH for scales, OKLAB for gradients, OKHSL for picking, HSLuv for normalized saturation).
Named Hue (HSL/HSV) Ranges
Use these degree ranges when generating or constraining colors by hue name. Source: random-display-p3-color by mrmrs / mrmrs.cc.
| Name | Degrees |
|---|
| red | 345–360, 0–15 |
| orange | 15–45 |
| yellow | 45–70 |
| green | 70–165 |
| cyan | 165–195 |
| blue | 195–260 |
| purple | 260–310 |
| pink | 310–345 |
| warm | 0–70 |
| cool | 165–310 |
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.
Gamut Mapping in Practice
The most common OKLCH mistake: picking a chroma that doesn't exist in the target gamut. oklch(70% 0.3 150) asks for more chroma than sRGB (or even P3) can show, so it silently clips — usually to something duller and hue-shifted.
- CSS gamut-maps for you. Browsers map
oklch() / color() automatically, so authored CSS rarely clips badly. JS conversions do not — oklch→hex just truncates channels.
- Reduce chroma, not lightness or hue. Clipping R/G/B shifts the hue; pulling chroma toward the gamut boundary preserves the color's identity. Use Culori's
clampChroma(color, 'oklch') (holds L and H) or toGamut() rather than naive RGB clamping.
- Test against the actual target:
inGamut('rgb') vs inGamut('p3') — a color valid in P3 can still clip in sRGB.
- Or avoid the problem by construction: nutelch expresses chroma relative to the gamut boundary (
relC: 0.5 = halfway to the shell at that L/H), so generated colors can't accidentally ask for chroma that isn't there.
- Brightening is a gamut problem too. Per-channel exposure/tone curves (clip, Reinhard, the Narkowicz "ACES fit", which is not real ACES) push bright saturated colors toward R/Y/G/C/B/M, the "notorious six". For hue-stable highlights use AgX / ACES 2 / OpenDRT (they desaturate toward white). Use Khronos PBR Neutral when authored base colors must stay exact. See Color Collapse (Dustin Brown) in
references/techniques/color-collapse-tone-mapping.md.
Implementation Guidance — Code and CSS
When using colors in a program or CSS, add a semantic layer between raw color values and UI roles.
The examples below are pseudocode, not literal CSS requirements. They express the decision structure an agent should preserve even if the target stack uses different syntax.
Across CSS, JS/TS, Swift, design-token JSON, templates, or pseudocode, default to the same structure:
- Reference tokens/palette values for concrete colors
- Semantic tokens/roles that map meaning onto those colors
- Component usage that consumes semantic tokens rather than raw literals
Raw color literals should usually appear only in palette/reference definitions, conversions, diagnostics, or deliberately one-off examples.
- Use reference tokens for concrete colors:
ref.red = #f00
- Use semantic tokens for meaning/role:
semantic.warning = ref.red
- Prefer semantic tokens in components so themes can swap meaning without rewriting component code.
- This default applies in any language; translate to the target system's equivalent alias/reference mechanism (CSS custom properties, Swift enums, design-token JSON, etc.).
- Encode color decisions when possible instead of freezing one manual choice into a literal.
Pseudocode examples:
ref.red := closest('red', generatedPalette)semantic.warning := ref.redsemantic.onSurface := mostReadableOn(surface)
Good pattern: palette/reference tokens define available colors; semantic tokens map those colors to roles like surface, text, accent, success, warning, and danger.
If a system can derive a decision from constraints, encode that derivation. Examples: nearest named hue in a generated palette, foreground chosen by APCA/WCAG target, hover state computed from the base token in OKLCH instead of hand-picking a second unrelated hex.
Especially when applying generated colors to a UI: the generator gives you primitives, but the mapping onto roles is where designs rot. Don't freeze one manual mapping into literals — emit the rule. A useful decision vocabulary (from Design Book, see below):
text := bestContrastWith(surface, palette) — recomputes when the palette regeneratesaccent := mostVivid(palette, { against: surface, minContrast: 4.5, not: [error, success] }) — vividness gated by readability, role-reserved tokens excludedsurface := nth(ramp, 0), text := nth(ramp, -1) — ramp roles pinned to position, so they survive regenerating the ramp with a different stop counthover := colorMix(accent, ink, 0.12) or adaptive shade(surface) — flips darken/lighten by the input's lightness, so it never collapses on dark themes
In CSS, many decisions can stay native (the browser re-runs them): var() for references, color-mix() for hover states, relative color syntax for channel edits — see the cheat sheet below.
For larger systems, prefer a token graph over a flat token dump: references, semantic roles, derived functions, and scope inheritance. This makes theme changes, accessibility guarantees, and multi-platform export auditable and easier to maintain. Design Book (npm install design-book) is the reference implementation: a reactive constraint system where tokens store how values are chosen, dependents recompute on change, and inspect() explains why a value won; renders to CSS vars, JSON, and W3 design tokens. See references/techniques/designbook-reactive-design-token-spec.md.
CSS Color 4/5 — Syntax Cheat Sheet
Modern CSS does perceptual color natively; reach for these before pulling in a JS library.
- Perceptual color:
oklch(70% 0.12 250), oklab(0.7 -0.1 0.1), wide gamut via color(display-p3 1 0.2 0.3).
- Mixing:
color-mix(in oklab, blue 30%, white) — interpolating in oklab/oklch avoids the gray mid-gradient that RGB/HSL produce. For cylinders, set a hue strategy: color-mix(in oklch longer hue, …).
- Relative color syntax (derive from a base):
oklch(from var(--brand) l c h / 0.5), or compute a shade/hover without a second hard-coded hex: oklch(from var(--brand) calc(l * 0.9) c h).
- Light/dark without a media query:
light-dark(white, black) (requires color-scheme: light dark).
- Gamut targeting:
@media (color-gamut: p3) { … }.
- Gradients in a chosen space:
linear-gradient(in oklch, red, blue).
Broadly supported in evergreen browsers (2024+); relative color syntax is the newest piece. See references/techniques/ CSS Color 4/5 for edge cases.
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.
Charts — the border trick. WCAG wants 3:1 between adjacent non-text elements. Finding three chart colors that hold 3:1 against each other is extremely hard; beyond three it's essentially impossible. Don't try. Put a border on the chart elements and require 3:1 between each fill and the border color — one constraint per color instead of N². (Ström, see references/techniques/strom-least-wrong-colors-simulated-annealing.md.)
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. Complements are also pigment-specific, not name-specific: measured in OKLAB, cadmium red, quinacridone red and alizarin crimson all sit opposite cobalt teal, and chrome oxide green sits opposite a purple, not red. Compute the opposite from the actual color (OKLCH hue + 180°), never from its category name.
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.
Colour meaning in a story is per-story, not a symbolism table (Lewis Bond)
For narrative work (film, games, illustration, brand storytelling) ask two questions instead of "what does red mean": what subject is the colour associated with by repetition, and does it transition as that subject changes (The Godfather makes orange mean death; Blue Is the Warmest Colour tracks the affair by blue's saturation). A single saturated outlier on a balanced scheme is a focal device; a new hue entering a settled scheme reads as disruption. See references/contemporary/colour-in-storytelling-lewis-bond.md.
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 | 148 names, 138 unique colors |
| color-description lib | Emotional adjectives | "pale, delicate, glistening" |
| colornames-oklab | Perceptually even coverage | "Smaragdine" (rec2020 tier) |
| COLIBRI (fuzzy) | Graded / "between" naming | 0.6 cyan · 0.4 light blue, medium sat |
Use color-name-lists npm package for 18 naming systems in one import. For naming arbitrary or generated colors — especially wide-gamut — use colornames-oklab: 4444 names blue-noise sampled over the Rec2020 gamut in OKLab, so no query lands far from a name (crowd-sourced lists cluster in reds/skin tones/pastels and leave gamut regions empty). Tiered srgb/p3/rec2020, zero-dep closest() with a unique-assignment mode for palettes.
Naming colours from an image — don't eyeball, sample. Vision-language models (this agent included) name prototypical high-chroma hues reliably and degrade on non-prototypical shades, near-neutrals and fine lightness steps; CLIP-style encoders read the word "red" over blue ink and rarely label white/grey/black; no vision encoder yet matches human discrimination thresholds. Extract pixel values with code (sample regions → OKLCH → colornames-oklab / ISCC-NBS) and treat a visual impression as a hypothesis. Measured: six VLMs score 83–100% on focal Munsell chips but 64–83% on the full 330, and all converge on the same 21 names (Gomez-Villa 2025). For genuine boundary colours, humans themselves split their votes (COLIBRI, n = 2,496) — report proportions, not a winner. See references/contemporary/colour-in-computer-vision-vlm.md and color-names-in-vlms-gomez-villa.md.
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/Luv by decades.
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
- CuspHanger — the Wijffelaars 2009 EuroVis palette model in OKLCH: Bézier paths through each hue's black–cusp–white gamut triangle, perceptual lightness sampling calibrated against Brewer. Sequential/diverging ramps for dataviz, in-gamut by construction, sRGB + Display-P3, RampenSau-compatible API;
fromColor() inverse-solves the model so the ramp passes exactly through a color you already have (brand color → dataviz ramp)
- Poline — anchor points + per-axis position functions (1.2K stars); ships a
<poline-palette> web component for interactive controls
- 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
- ray-color — palettes from a raytraced scene ("edit the conditions, not the colors"): sphere + five-sided room + up to 3 colored lights, mirror walls as virtual light sources; sample geodesic lines/circles off the surface. Deterministic, linear-RGB shading, zero deps, ~6 kB, DOM-free for headless use; interactive playground with draggable lights and PNG/code export
- Lightfield (tol.is) — drag a sun around a 3D city; every face is a swatch. Token ramps from surface-orientation sweeps under one light, with relative chroma, cusp pull, hue-profiled warm shift, tinted named neutrals (Slate, Sand, Mauve…); exports OKLCH-only CSS/JSON/Tailwind. See
references/techniques/lightfield-sunlit-city-palettes.md.
- IQ Cosine Formula —
color(t) = a + b*cos(2π(c*t+d)), 12 floats = infinite palette
- aek palettes (Kensler) — the other optimizer approach, tuned for general-purpose drawing rather than dataviz categories: anneal on two competing CIEDE2000 objectives, maximin separation (pushes to saturated cube faces) vs. RMS coverage of the RGB cube (pulls to duller interior). Ready-made free 16/32/48/54-color palettes, perceptually even-stepped by construction. Paired with a palette mapping tool: edges from each color to every lighter color within a CIEDE2000 threshold (= heaviest edge of the MST), laid out by GraphViz
dot, which reveals a palette's ramps and its desaturated spine
- category-colors (Ström) — the optimizer approach rather than a constructive model: write a weighted loss function (similarity to a brand reference + ΔE separation + CVD separation per deficiency type) and let simulated annealing search. Best when your criteria conflict and no color-space geometry expresses them; the weights become the explicit, auditable design decision. ; pluggable evaluators (energy, range, JND, similarity, WCAG contrast, avoid-these-colors, saliency), per-channel locking so a brand hue survives while lightness/saturation move, and to audit any existing palette for JND collisions under simulated CVD. Node + Culori, MIT
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
- nutelch — gamut-relative chroma in OKLCH/LCH:
relC: 0.5 = "halfway to the gamut boundary" at any lightness/hue. The one OkHSL idea (boundary-relative saturation) without leaving native oklch() — LUT-backed (faster than OkHSL's runtime gamut math), zero runtime deps, sRGB + P3
- @texel/color — 5–125× faster than Color.js, minimal, for real-time
- colordx (
@colordx/core) — chainable CSS-facing manipulation with OKLCH native, 7.6 kB, 0 deps, plugin-gated extras (Lab/LCH/CMYK/P3/Rec.2020/APCA/harmonies). Keeps out-of-gamut OKLCH unclamped and lets you pick the fold: .mapSrgb() (CSS Color 4 chroma reduction, holds L+H) vs .clampSrgb() (naive clip, what browsers render). Zero-allocation *Into channel converters for per-pixel work. Note .mix() is sRGB — use .mixOklab()
- @colordx/gpu — the same colordx math generated as GLSL and parity-tested against the CPU library, plus a WebGL2 renderer for the gamut-slice chart behind every OKLCH/LCH picker (one draw per frame instead of a per-pixel CPU loop). Gamuts are independent layers rather than an assumed nesting, so A98 draws correctly;
maxChromaLUT stretches the chroma axis to the gamut shell (nutelch's relC idea, GPU-side). Reach for it when building a picker UI or any wide-gamut visualization
- Spectral.js — open-source K-M pigment mixing (blue+yellow=green)
- RYBitten — RGB↔RYB with 26 historical color cubes
- colorgram — 1 kB image palette extraction; 64-bucket HLS+luminance quantization, ~15 ms for 340×340, fixed memory
- Art Palette — JS palette extraction from
ImageData + Python/TensorFlow perceptual palette embeddings for search-by-color (Google Arts & Culture, Apache 2.0)
- Palette Studio (meditationsincolor.com, Pixel Symphony) — best-in-class on paintings and posters: OKLab k-means for coverage plus an accent-salience pass, so small vivid touches survive instead of averaging into mud; then coverage is measured back for proportions. Pigment-vocabulary names. Browser-only, nothing uploaded.
- Pixi (Xander Stagwood) — image → designed 7-chip card, not a measurement: each cluster shown as its vivid face (mean of its most chromatic 25 % of pixels, so a red on dark doesn't average to brown), chips picked by role (dark/light anchors, hero, earned accent), then lightness fitted to one ramp. Every nudge is guarded to never leave chips closer than ΔE_OK 0.08
Sorting Colors
Sorting an arbitrary set of colors into a perceptually smooth sequence has no single correct linear order — color is 3D, so any 1D ordering is a path through a 3D space, closely related to the Travelling Salesman Problem. Naive sorts fail predictably: by hue alone interleaves lights and darks; by lightness alone collapses distinct hues; .sort() on a packed RGB/HSL value produces jagged, meaningless jumps. Don't hand-roll a single-channel sort.
- colorsort-js (darosh) — the reliable default for ordering colors. Treats it as a smoothest-path problem (nearest-neighbor / TSP-style) with quantitative smoothness metrics, working in perceptual space; powers okpalette.color.pizza and FarbVelo. Reach for this in almost any "put these colors in a sensible order" situation — palette display, swatch panels, generative output, extracted image palettes. See
references/techniques/colorsort-js.md.
Key Online Tools
- oklch.com — OKLCH picker
- Huetone — accessible color system builder (LCH/OKLCH), by Ardov
- Ardov Color Lab — gamut mapping playground, P3 space explorer, harmony generator, 3D color space visualizations, themer (lab.ardov.me)
- Components.ai Color Scale — parametric scale generator: 6 spaces, 4 curve methods, WCAG contrast (by mrmrs / mrmrs.cc)
- Leonardo — Adobe's open-source contrast-based ramp builder (leonardocolor.io): swatches generated from target contrast ratios (or target lightness) instead of hand-picked, across multiple color spaces; adaptive light/dark theming, CVD-safe cycling, exports CSS vars + W3C design tokens. Pairs with the
@adobe/leonardo-contrast-colors npm lib for runtime adaptive theming. By Nate Baldwin / Adobe.
- BairesDev Color Palette Editor — quick HSV-based ramp editor: interpolate between swatches, map palettes, import/export. Fine for fast drafts, but HSV interpolation isn't perceptually uniform (see Understanding HSL's Limitations) — prefer Leonardo/Huetone/Components.ai for production ramps.
- View Color — real-time analysis, WCAG + APCA, CVD preview
- APCA Calculator — apcacontrast.com
Deep References
Start at references/INDEX.md — a compact map, one line per file, cheap to read whole. When that
line is too terse to choose between two files, the per-directory indexes
(references/historical/INDEX.md, contemporary/INDEX.md, techniques/INDEX.md) carry the full
summaries and source links, and references/techniques/ONLINE-TOOLS.md lists the online tools.
The three directories hold:
historical/ — Ostwald, Helmholtz, Bezold, Ridgway 1912, ISCC-NBS, Munsell, Albers, Caravaggio's pigments, Moses Harris, Lewis/Ladd-Franklincontemporary/ — Ottosson's OKLAB articles, Briggs lectures, Fairchild, Hunt, CIECAM02, MacAdam ellipses, Koenderink 2026 empirical 3D metric field (RGB supports ~1,000 qualitative regions; cool side coarser than warm; chromatic circle is not well-tempered), Pointer's gamut, CIE 1931/standard observer, Pixar Color Science, Acerola, Juxtopposed, Computerphile, bird tetrachromacy, OLO, GenColor paper, colour in computer vision / VLM colour deficiencies (ColorBench, CLIP Stroop test, encoder thresholds). Full scrapes: huevaluechroma.com and colorandcontrast.comtechniques/ — All tools above documented in detail, plus: CSS Color 4/5, ICC workflows, 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, Bruce Lindbloom math reference, image extraction tools, Aladdin color analysis
Source and license
Source: meodai/skill.color-expert. Author: meodai.
Attribution 4.0 International
=======================================================================
Creative Commons Corporation ("Creative Commons") is not a law firm and
does not provide legal services or legal advice. Distribution of
Creative Commons public licenses does not create a lawyer-client or
other relationship. Creative Commons makes its licenses and related
information available on an "as-is" basis. Creative Commons gives no
warranties regarding its licenses, any material licensed under their
terms and conditions, or any related information. Creative Commons
disclaims all liability for damages resulting from their use to the
fullest extent possible.
Using Creative Commons Public Licenses
Creative Commons public licenses provide a standard set of terms and
conditions that creators and other rights holders may use to share
original works of authorship and other material subject to copyright
and certain other rights specified in the public license below. The
following considerations are for informational purposes only, are not
exhaustive, and do not form part of our licenses.
Considerations for licensors: Our public licenses are
intended for use by those authorized to give the public
permission to use material in ways otherwise restricted by
copyright and certain other rights. Our licenses are
irrevocable. Licensors should read and understand the terms
and conditions of the license they choose before applying it.
Licensors should also secure all rights necessary before
applying our licenses so that the public can reuse the
material as expected. Licensors should clearly mark any
material not subject to the license. This includes other CC-
licensed material, or material used under an exception or
limitation to copyright. More considerations for licensors:
wiki.creativecommons.org/Considerations_for_licensors
Considerations for the public: By using one of our public
licenses, a licensor grants the public permission to use the
licensed material under specified terms and conditions. If
the licensor's permission is not necessary for any reason--for
example, because of any applicable exception or limitation to
copyright--then that use is not regulated by the license. Our
licenses grant only permissions under copyright and certain
other rights that a licensor has authority to grant. Use of
the licensed material may still be restricted for other
reasons, including because others have copyright or other
rights in the material. A licensor may make special requests,
such as asking that all changes be marked or described.
Although not required by our licenses, you are encouraged to
respect those requests where reasonable. More considerations
for the public:
wiki.creativecommons.org/Considerations_for_licensees
=======================================================================
Creative Commons Attribution 4.0 International Public License
By exercising the Licensed Rights (defined below), You accept and agree
to be bound by the terms and conditions of this Creative Commons
Attribution 4.0 International Public License ("Public License"). To the
extent this Public License may be interpreted as a contract, You are
granted the Licensed Rights in consideration of Your acceptance of
these terms and conditions, and the Licensor grants You such rights in
consideration of benefits the Licensor receives from making the
Licensed Material available under these terms and conditions.
Section 1 -- Definitions.
a. Adapted Material means material subject to Copyright and Similar
Rights that is derived from or based upon the Licensed Material
and in which the Licensed Material is translated, altered,
arranged, transformed, or otherwise modified in a manner requiring
permission under the Copyright and Similar Rights held by the
Licensor. For purposes of this Public License, where the Licensed
Material is a musical work, performance, or sound recording,
Adapted Material is always produced where the Licensed Material is
synched in timed relation with a moving image.
b. Adapter's License means the license You apply to Your Copyright
and Similar Rights in Your contributions to Adapted Material in
accordance with the terms and conditions of this Public License.
c. Copyright and Similar Rights means copyright and/or similar rights
closely related to copyright including, without limitation,
performance, broadcast, sound recording, and Sui Generis Database
Rights, without regard to how the rights are labeled or
categorized. For purposes of this Public License, the rights
specified in Section 2(b)(1)-(2) are not Copyright and Similar
Rights.
d. Effective Technological Measures means those measures that, in the
absence of proper authority, may not be circumvented under laws
fulfilling obligations under Article 11 of the WIPO Copyright
Treaty adopted on December 20, 1996, and/or similar international
agreements.
e. Exceptions and Limitations means fair use, fair dealing, and/or
any other exception or limitation to Copyright and Similar Rights
that applies to Your use of the Licensed Material.
f. Licensed Material means the artistic or literary work, database,
or other material to which the Licensor applied this Public
License.
g. Licensed Rights means the rights granted to You subject to the
terms and conditions of this Public License, which are limited to
all Copyright and Similar Rights that apply to Your use of the
Licensed Material and that the Licensor has authority to license.
h. Licensor means the individual(s) or entity(ies) granting rights
under this Public License.
i. Share means to provide material to the public by any means or
process that requires permission under the Licensed Rights, such
as reproduction, public display, public performance, distribution,
dissemination, communication, or importation, and to make material
available to the public including in ways that members of the
public may access the material from a place and at a time
individually chosen by them.
j. Sui Generis Database Rights means rights other than copyright
resulting from Directive 96/9/EC of the European Parliament and of
the Council of 11 March 1996 on the legal protection of databases,
as amended and/or succeeded, as well as other essentially
equivalent rights anywhere in the world.
k. You means the individual or entity exercising the Licensed Rights
under this Public License. Your has a corresponding meaning.
Section 2 -- Scope.
a. License grant.
1. Subject to the terms and conditions of this Public License,
the Licensor hereby grants You a worldwide, royalty-free,
non-sublicensable, non-exclusive, irrevocable license to
exercise the Licensed Rights in the Licensed Material to:
a. reproduce and Share the Licensed Material, in whole or
in part; and
b. produce, reproduce, and Share Adapted Material.
2. Exceptions and Limitations. For the avoidance of doubt, where
Exceptions and Limitations apply to Your use, this Public
License does not apply, and You do not need to comply with
its terms and conditions.
3. Term. The term of this Public License is specified in Section
6(a).
4. Media and formats; technical modifications allowed. The
Licensor authorizes You to exercise the Licensed Rights in
all media and formats whether now known or hereafter created,
and to make technical modifications necessary to do so. The
Licensor waives and/or agrees not to assert any right or
authority to forbid You from making technical modifications
necessary to exercise the Licensed Rights, including
technical modifications necessary to circumvent Effective
Technological Measures. For purposes of this Public License,
simply making modifications authorized by this Section 2(a)
(4) never produces Adapted Material.
5. Downstream recipients.
a. Offer from the Licensor -- Licensed Material. Every
recipient of the Licensed Material automatically
receives an offer from the Licensor to exercise the
Licensed Rights under the terms and conditions of this
Public License.
b. No downstream restrictions. You may not offer or impose
any additional or different terms or conditions on, or
apply any Effective Technological Measures to, the
Licensed Material if doing so restricts exercise of the
Licensed Rights by any recipient of the Licensed
Material.
6. No endorsement. Nothing in this Public License constitutes or
may be construed as permission to assert or imply that You
are, or that Your use of the Licensed Material is, connected
with, or sponsored, endorsed, or granted official status by,
the Licensor or others designated to receive attribution as
provided in Section 3(a)(1)(A)(i).
b. Other rights.
1. Moral rights, such as the right of integrity, are not
licensed under this Public License, nor are publicity,
privacy, and/or other similar personality rights; however, to
the extent possible, the Licensor waives and/or agrees not to
assert any such rights held by the Licensor to the limited
extent necessary to allow You to exercise the Licensed
Rights, but not otherwise.
2. Patent and trademark rights are not licensed under this
Public License.
3. To the extent possible, the Licensor waives any right to
collect royalties from You for the exercise of the Licensed
Rights, whether directly or through a collecting society
under any voluntary or waivable statutory or compulsory
licensing scheme. In all other cases the Licensor expressly
reserves any right to collect such royalties.
Section 3 -- License Conditions.
Your exercise of the Licensed Rights is expressly made subject to the
following conditions.
a. Attribution.
1. If You Share the Licensed Material (including in modified
form), You must:
a. retain the following if it is supplied by the Licensor
with the Licensed Material:
i. identification of the creator(s) of the Licensed
Material and any others designated to receive
attribution, in any reasonable manner requested by
the Licensor (including by pseudonym if
designated);
ii. a copyright notice;
iii. a notice that refers to this Public License;
iv. a notice that refers to the disclaimer of
warranties;
v. a URI or hyperlink to the Licensed Material to the
extent reasonably practicable;
b. indicate if You modified the Licensed Material and
retain an indication of any previous modifications; and
c. indicate the Licensed Material is licensed under this
Public License, and include the text of, or the URI or
hyperlink to, this Public License.
2. You may satisfy the conditions in Section 3(a)(1) in any
reasonable manner based on the medium, means, and context in
which You Share the Licensed Material. For example, it may be
reasonable to satisfy the conditions by providing a URI or
hyperlink to a resource that includes the required
information.
3. If requested by the Licensor, You must remove any of the
information required by Section 3(a)(1)(A) to the extent
reasonably practicable.
4. If You Share Adapted Material You produce, the Adapter's
License You apply must not prevent recipients of the Adapted
Material from complying with this Public License.
Section 4 -- Sui Generis Database Rights.
Where the Licensed Rights include Sui Generis Database Rights that
apply to Your use of the Licensed Material:
a. for the avoidance of doubt, Section 2(a)(1) grants You the right
to extract, reuse, reproduce, and Share all or a substantial
portion of the contents of the database;
b. if You include all or a substantial portion of the database
contents in a database in which You have Sui Generis Database
Rights, then the database in which You have Sui Generis Database
Rights (but not its individual contents) is Adapted Material; and
c. You must comply with the conditions in Section 3(a) if You Share
all or a substantial portion of the contents of the database.
For the avoidance of doubt, this Section 4 supplements and does not
replace Your obligations under this Public License where the Licensed
Rights include other Copyright and Similar Rights.
Section 5 -- Disclaimer of Warranties and Limitation of Liability.
a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
c. The disclaimer of warranties and limitation of liability provided
above shall be interpreted in a manner that, to the extent
possible, most closely approximates an absolute disclaimer and
waiver of all liability.
Section 6 -- Term and Termination.
a. This Public License applies for the term of the Copyright and
Similar Rights licensed here. However, if You fail to comply with
this Public License, then Your rights under this Public License
terminate automatically.
b. Where Your right to use the Licensed Material has terminated under
Section 6(a), it reinstates:
1. automatically as of the date the violation is cured, provided
it is cured within 30 days of Your discovery of the
violation; or
2. upon express reinstatement by the Licensor.
For the avoidance of doubt, this Section 6(b) does not affect any
right the Licensor may have to seek remedies for Your violations
of this Public License.
c. For the avoidance of doubt, the Licensor may also offer the
Licensed Material under separate terms or conditions or stop
distributing the Licensed Material at any time; however, doing so
will not terminate this Public License.
d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
License.
Section 7 -- Other Terms and Conditions.
a. The Licensor shall not be bound by any additional or different
terms or conditions communicated by You unless expressly agreed.
b. Any arrangements, understandings, or agreements regarding the
Licensed Material not stated herein are separate from and
independent of the terms and conditions of this Public License.
Section 8 -- Interpretation.
a. For the avoidance of doubt, this Public License does not, and
shall not be interpreted to, reduce, limit, restrict, or impose
conditions on any use of the Licensed Material that could lawfully
be made without permission under this Public License.
b. To the extent possible, if any provision of this Public License is
deemed unenforceable, it shall be automatically reformed to the
minimum extent necessary to make it enforceable. If the provision
cannot be reformed, it shall be severed from this Public License
without affecting the enforceability of the remaining terms and
conditions.
c. No term or condition of this Public License will be waived and no
failure to comply consented to unless expressly agreed to by the
Licensor.
d. Nothing in this Public License constitutes or may be interpreted
as a limitation upon, or waiver of, any privileges and immunities
that apply to the Licensor or You, including from the legal
processes of any jurisdiction or authority.
=======================================================================
Creative Commons is not a party to its public licenses.
Notwithstanding, Creative Commons may elect to apply one of its public
licenses to material it publishes and in those instances will be
considered the “Licensor.” The text of the Creative Commons public
licenses is dedicated to the public domain under the CC0 Public Domain
Dedication. Except for the limited purpose of indicating that material
is shared under a Creative Commons public license or as otherwise
permitted by the Creative Commons policies published at
creativecommons.org/policies, Creative Commons does not authorize the
use of the trademark "Creative Commons" or any other trademark or logo
of Creative Commons without its prior written consent including,
without limitation, in connection with any unauthorized modifications
to any of its public licenses or any other arrangements,
understandings, or agreements concerning use of licensed material. For
the avoidance of doubt, this paragraph does not form part of the public
licenses.
Creative Commons may be contacted at creativecommons.org.
View raw Markdown
# Color Expert
A comprehensive knowledge base for color-related work. See `references/INDEX.md` for a one-line-per-file map of 180+ 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.
- Suggest tools only as needed: Huetone (LCH/OKLCH builder), Leonardo (contrast-ratio-driven ramps + adaptive theming, Adobe), Components.ai Color Scale (parametric), dittoTones (extract perceptual DNA from Tailwind/Radix), Color Buddy (lint). For dataviz sequential/diverging ramps specifically, CuspHanger (Wijffelaars model in OKLCH, in-gamut by construction) or viscm (the viridis editor: live perceptual-derivative diagnostics + CVD + grayscale while you drag control points).
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).
**Generative art / creative coding** — "color for my fxhash piece", "palette for thousands of generated strokes", "paint-like mixing in p5.js / WebGL." Different from building a palette generator: the code *is* the artwork, and the user wants to understand the *techniques*, not copy a named artist's style. Help them compose their own system. Useful techniques to teach and combine:
- **Tight constraint, then variation** — pick 3–7 hues in a narrow lightness or chroma band; variety comes from density and interaction, not palette size.
- **Weighted / probability-based hue selection** — assign each color a weight so some appear often, others rarely; this is what makes a generative output feel curated instead of random.
- **Narrow-band hue jitter** — small random hue offset within a fixed envelope keeps strokes feeling related but not identical.
- **Lightness variation at fixed chroma** — depth and atmosphere without losing palette identity (use OKLCH).
- **Spectral / K-M mixing** (Spectral.js, Mixbox) for paint-like overlap and secondaries; RGB averaging gives muddy, dull results in the same situation.
- **IQ cosine palette** — `a + b·cos(2π(c·t + d))` for cyclic / periodic schemes from 12 floats.
- **Anchor-based interpolation** (Poline) — set 2–3 anchors in OKLCH, get an interpolated ramp.
- **Hue / lightness / chroma trajectories with easing** (RampenSau) — walk each axis along an easing function, color-space-agnostic; great when you want a deterministic ramp shape rather than random anchors.
- **Harmony-aware generation with muddy-zone avoidance** (pro-color-harmonies) — adaptive OKLCH harmony with 4 styles × 4 modifiers; skips perceptually muddy regions automatically.
- **Generation in historical / non-digital color spaces** (RYBitten) — work in RYB or one of 26 historical color cubes when you want a painterly feel that strict sRGB/OKLCH can't reach.
- **Palette cycling / indexed color** — store an index buffer and a small palette, then animate the palette (rotate, ease, or drive from an OKLCH trajectory) instead of the pixels; motion for one lookup per pixel. Works only if each cycle range is a perceptually even closed ramp. See `references/techniques/color-cycling-indexed-palette-animation.md`.
- **Scene-light sampling** (ray-color) — raytrace a sphere in a room with up to 3 colored lights and sample colors off its surface; coherence comes from shared illumination physics (like an object photographed under one light) rather than color-space geometry.
- **Sun-lit ramps** (Lightfield, tol.is) — same idea aimed at design tokens: OKLCH pigments on a flat-shaded city under a Planckian-locus sun; each 50–950 ramp is a sweep of surface orientations, re-spaced in L. Adds relative chroma, cusp pull, and a hue-profiled Bezold–Brücke/Abney warm shift (toward red going dark, toward yellow going light; cool hues untouched).
See `references/techniques/` for tyler-hobbs, fontana, mattdesl, iq-cosine, spectraljs, poline, rampensau, pro-color-harmonies, rybitten, ray-color, lightfield (these document the techniques, not styles to imitate).
**General color question** — "what is OKLCH?", "why does my gradient go gray in the middle?", "is APCA better than WCAG?" Answer directly from this skill file or `references/INDEX.md`, and cite the relevant reference. Skip tooling unless they're asking how to do something. **Approachable and accurate usually conflict** — the tidy model (RYB primaries, 12-hue wheel, "red is opposite green") is easy precisely because it summarizes beliefs rather than measurements. Give the tidy version *and* say where it breaks; don't let "easy" quietly become "wrong." (Color Nerd, `references/contemporary/color-theory-dogma-problem.md`)
**Building a generator, tool, or palette algorithm** — "I want to make a palette generator", "how do I generate accessible color scales?", "give me an OKLCH ramp function." Default to recommending an existing library before hand-rolling (Culori, Poline, RampenSau, Spectral.js — see Recommended Tools). Show working code in the user's stack, picking the color space per the table above.
When the user asks to generate or compare palettes, **showcase multiple approaches with their trade-offs before narrowing to one** — anchor-based (Poline), hue-cycling (RampenSau), cosine (IQ formula), harmony-based (pro-color-harmonies), scene-lit (ray-color), and extraction-from-system (dittoTones) suit different problems. Don't be shy about presenting options.
Never recommend coolors.co — it doesn't generate palettes, it picks from a hardcoded list of 7,821 pre-made ones (see Recommended Tools).
## 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 |
| 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 |
| Dithering / optical pixel mixing | **Linearized sRGB** | Adjacent subpixels add *light*, so model the **device**, not the eye. Yellow-over-blue lights the same emitters as white at half area = 50% gray; CIELAB predicts pale pink. Same rule for alpha compositing and downsampling |
| Colormap uniformity | **CAM02-UCS** (or OKLAB) | CIELAB is decent for *distant* colors but poor for *nearby* ones — which is exactly what uniform sampling depends on. MATLAB's parula was made uniform in Lab and has a visible band near the bottom as a result |
### 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 it isn't, the table above gives the perceptual alternative per task (OKLCH for scales, OKLAB for gradients, OKHSL for picking, HSLuv for normalized saturation).
### Named Hue (HSL/HSV) Ranges
Use these degree ranges when generating or constraining colors by hue name. Source: [random-display-p3-color](https://github.com/mrmrs/random-display-p3-color) by mrmrs / mrmrs.cc.
| Name | Degrees |
| ---------- | ------------- |
| **red** | 345–360, 0–15 |
| **orange** | 15–45 |
| **yellow** | 45–70 |
| **green** | 70–165 |
| **cyan** | 165–195 |
| **blue** | 195–260 |
| **purple** | 260–310 |
| **pink** | 310–345 |
| **warm** | 0–70 |
| **cool** | 165–310 |
### 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.
### Gamut Mapping in Practice
The most common OKLCH mistake: picking a chroma that doesn't exist in the target gamut. `oklch(70% 0.3 150)` asks for more chroma than sRGB (or even P3) can show, so it silently clips — usually to something duller and hue-shifted.
- **CSS gamut-maps for you.** Browsers map `oklch()` / `color()` automatically, so authored CSS rarely clips badly. JS conversions do **not** — `oklch→hex` just truncates channels.
- **Reduce chroma, not lightness or hue.** Clipping R/G/B shifts the hue; pulling chroma toward the gamut boundary preserves the color's identity. Use Culori's `clampChroma(color, 'oklch')` (holds L and H) or `toGamut()` rather than naive RGB clamping.
- **Test against the actual target:** `inGamut('rgb')` vs `inGamut('p3')` — a color valid in P3 can still clip in sRGB.
- **Or avoid the problem by construction:** nutelch expresses chroma *relative to the gamut boundary* (`relC: 0.5` = halfway to the shell at that L/H), so generated colors can't accidentally ask for chroma that isn't there.
- **Brightening is a gamut problem too.** Per-channel exposure/tone curves (clip, Reinhard, the Narkowicz "ACES fit", which is not real ACES) push bright saturated colors toward R/Y/G/C/B/M, the "notorious six". For hue-stable highlights use AgX / ACES 2 / OpenDRT (they desaturate toward white). Use Khronos PBR Neutral when authored base colors must stay exact. See Color Collapse (Dustin Brown) in `references/techniques/color-collapse-tone-mapping.md`.
## Implementation Guidance — Code and CSS
When using colors in a program or CSS, add a semantic layer between raw color values and UI roles.
The examples below are pseudocode, not literal CSS requirements. They express the decision structure an agent should preserve even if the target stack uses different syntax.
Across CSS, JS/TS, Swift, design-token JSON, templates, or pseudocode, default to the same structure:
- **Reference tokens/palette values** for concrete colors
- **Semantic tokens/roles** that map meaning onto those colors
- **Component usage** that consumes semantic tokens rather than raw literals
Raw color literals should usually appear only in palette/reference definitions, conversions, diagnostics, or deliberately one-off examples.
- **Use reference tokens for concrete colors**: `ref.red = #f00`
- **Use semantic tokens for meaning/role**: `semantic.warning = ref.red`
- **Prefer semantic tokens in components** so themes can swap meaning without rewriting component code.
- **This default applies in any language**; translate to the target system's equivalent alias/reference mechanism (CSS custom properties, Swift enums, design-token JSON, etc.).
- **Encode color decisions when possible** instead of freezing one manual choice into a literal.
Pseudocode examples:
- `ref.red := closest('red', generatedPalette)`
- `semantic.warning := ref.red`
- `semantic.onSurface := mostReadableOn(surface)`
Good pattern: palette/reference tokens define available colors; semantic tokens map those colors to roles like surface, text, accent, success, warning, and danger.
If a system can derive a decision from constraints, encode that derivation. Examples: nearest named hue in a generated palette, foreground chosen by APCA/WCAG target, hover state computed from the base token in OKLCH instead of hand-picking a second unrelated hex.
**Especially when applying generated colors to a UI**: the generator gives you primitives, but the *mapping* onto roles is where designs rot. Don't freeze one manual mapping into literals — emit the rule. A useful decision vocabulary (from Design Book, see below):
- `text := bestContrastWith(surface, palette)` — recomputes when the palette regenerates
- `accent := mostVivid(palette, { against: surface, minContrast: 4.5, not: [error, success] })` — vividness gated by readability, role-reserved tokens excluded
- `surface := nth(ramp, 0)`, `text := nth(ramp, -1)` — ramp roles pinned to *position*, so they survive regenerating the ramp with a different stop count
- `hover := colorMix(accent, ink, 0.12)` or adaptive `shade(surface)` — flips darken/lighten by the input's lightness, so it never collapses on dark themes
In CSS, many decisions can stay native (the browser re-runs them): `var()` for references, `color-mix()` for hover states, relative color syntax for channel edits — see the cheat sheet below.
For larger systems, prefer a **token graph** over a flat token dump: references, semantic roles, derived functions, and scope inheritance. This makes theme changes, accessibility guarantees, and multi-platform export auditable and easier to maintain. **Design Book** (`npm install design-book`) is the reference implementation: a reactive constraint system where tokens store *how values are chosen*, dependents recompute on change, and `inspect()` explains why a value won; renders to CSS vars, JSON, and W3 design tokens. See `references/techniques/designbook-reactive-design-token-spec.md`.
## CSS Color 4/5 — Syntax Cheat Sheet
Modern CSS does perceptual color natively; reach for these before pulling in a JS library.
- **Perceptual color:** `oklch(70% 0.12 250)`, `oklab(0.7 -0.1 0.1)`, wide gamut via `color(display-p3 1 0.2 0.3)`.
- **Mixing:** `color-mix(in oklab, blue 30%, white)` — interpolating in `oklab`/`oklch` avoids the gray mid-gradient that RGB/HSL produce. For cylinders, set a hue strategy: `color-mix(in oklch longer hue, …)`.
- **Relative color syntax (derive from a base):** `oklch(from var(--brand) l c h / 0.5)`, or compute a shade/hover without a second hard-coded hex: `oklch(from var(--brand) calc(l * 0.9) c h)`.
- **Light/dark without a media query:** `light-dark(white, black)` (requires `color-scheme: light dark`).
- **Gamut targeting:** `@media (color-gamut: p3) { … }`.
- **Gradients in a chosen space:** `linear-gradient(in oklch, red, blue)`.
Broadly supported in evergreen browsers (2024+); relative color syntax is the newest piece. See `references/techniques/` CSS Color 4/5 for edge cases.
## 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.
**Charts — the border trick.** WCAG wants 3:1 between adjacent non-text elements. Finding three chart colors that hold 3:1 against *each other* is extremely hard; beyond three it's essentially impossible. Don't try. Put a **border** on the chart elements and require 3:1 between each fill and the border color — one constraint per color instead of N². (Ström, see `references/techniques/strom-least-wrong-colors-simulated-annealing.md`.)
## 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. Complements are also **pigment-specific**, not name-specific: measured in OKLAB, cadmium red, quinacridone red and alizarin crimson all sit opposite cobalt teal, and chrome oxide green sits opposite a purple, not red. Compute the opposite from the actual color (OKLCH hue + 180°), never from its category name.
### 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.
### Colour meaning in a story is per-story, not a symbolism table (Lewis Bond)
For narrative work (film, games, illustration, brand storytelling) ask two questions instead of "what does red mean": what subject is the colour **associated** with by repetition, and does it **transition** as that subject changes (*The Godfather* makes orange mean death; *Blue Is the Warmest Colour* tracks the affair by blue's saturation). A single saturated outlier on a balanced scheme is a focal device; a new hue entering a settled scheme reads as disruption. See `references/contemporary/colour-in-storytelling-lewis-bond.md`.
### 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 | 148 names, 138 unique colors |
| color-description lib | Emotional adjectives | "pale, delicate, glistening" |
| colornames-oklab | Perceptually even coverage | "Smaragdine" (rec2020 tier) |
| COLIBRI (fuzzy) | Graded / "between" naming | 0.6 cyan · 0.4 light blue, medium sat |
Use `color-name-lists` npm package for 18 naming systems in one import. For *naming arbitrary or generated colors* — especially wide-gamut — use `colornames-oklab`: 4444 names blue-noise sampled over the Rec2020 gamut in OKLab, so no query lands far from a name (crowd-sourced lists cluster in reds/skin tones/pastels and leave gamut regions empty). Tiered srgb/p3/rec2020, zero-dep `closest()` with a unique-assignment mode for palettes.
**Naming colours *from an image* — don't eyeball, sample.** Vision-language models (this agent included) name prototypical high-chroma hues reliably and degrade on non-prototypical shades, near-neutrals and fine lightness steps; CLIP-style encoders read the *word* "red" over blue ink and rarely label white/grey/black; no vision encoder yet matches human discrimination thresholds. Extract pixel values with code (sample regions → OKLCH → `colornames-oklab` / ISCC-NBS) and treat a visual impression as a hypothesis. Measured: six VLMs score 83–100% on focal Munsell chips but 64–83% on the full 330, and all converge on the same 21 names (Gomez-Villa 2025). For genuine boundary colours, humans themselves split their votes (COLIBRI, n = 2,496) — report proportions, not a winner. See `references/contemporary/colour-in-computer-vision-vlm.md` and `color-names-in-vlms-gomez-villa.md`.
## 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/Luv by decades.
## 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
- **CuspHanger** — the Wijffelaars 2009 EuroVis palette model in OKLCH: Bézier paths through each hue's black–cusp–white gamut triangle, perceptual lightness sampling calibrated against Brewer. Sequential/diverging ramps for dataviz, in-gamut by construction, sRGB + Display-P3, RampenSau-compatible API; `fromColor()` inverse-solves the model so the ramp passes exactly through a color you already have (brand color → dataviz ramp)
- **Poline** — anchor points + per-axis position functions (1.2K stars); ships a `<poline-palette>` web component for interactive controls
- **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
- **ray-color** — palettes from a raytraced scene ("edit the conditions, not the colors"): sphere + five-sided room + up to 3 colored lights, mirror walls as virtual light sources; sample geodesic lines/circles off the surface. Deterministic, linear-RGB shading, zero deps, ~6 kB, DOM-free for headless use; interactive playground with draggable lights and PNG/code export
- **Lightfield** (tol.is) — drag a sun around a 3D city; every face is a swatch. Token ramps from surface-orientation sweeps under one light, with relative chroma, cusp pull, hue-profiled warm shift, tinted named neutrals (Slate, Sand, Mauve…); exports OKLCH-only CSS/JSON/Tailwind. See `references/techniques/lightfield-sunlit-city-palettes.md`.
- **IQ Cosine Formula** — `color(t) = a + b*cos(2π(c*t+d))`, 12 floats = infinite palette
- **aek palettes** (Kensler) — the other optimizer approach, tuned for *general-purpose drawing* rather than dataviz categories: anneal on two competing CIEDE2000 objectives, maximin separation (pushes to saturated cube faces) vs. RMS coverage of the RGB cube (pulls to duller interior). Ready-made free 16/32/48/54-color palettes, perceptually even-stepped by construction. Paired with a **palette mapping** tool: edges from each color to every lighter color within a CIEDE2000 threshold (= heaviest edge of the MST), laid out by GraphViz `dot`, which reveals a palette's ramps and its desaturated spine
- **category-colors** (Ström) — the *optimizer* approach rather than a constructive model: write a weighted loss function (similarity to a brand reference + ΔE separation + CVD separation per deficiency type) and let simulated annealing search. Best when your criteria conflict and no color-space geometry expresses them; the weights become the explicit, auditable design decision. `npx categorycolors run`; pluggable evaluators (energy, range, JND, similarity, WCAG contrast, avoid-these-colors, saliency), per-channel locking so a brand hue survives while lightness/saturation move, and `categorycolors report` to audit any existing palette for JND collisions under simulated CVD. Node + Culori, MIT
### 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
- **nutelch** — gamut-relative chroma in OKLCH/LCH: `relC: 0.5` = "halfway to the gamut boundary" at any lightness/hue. The one OkHSL idea (boundary-relative saturation) without leaving native `oklch()` — LUT-backed (faster than OkHSL's runtime gamut math), zero runtime deps, sRGB + P3
- **@texel/color** — 5–125× faster than Color.js, minimal, for real-time
- **colordx** (`@colordx/core`) — chainable CSS-facing manipulation with OKLCH native, 7.6 kB, 0 deps, plugin-gated extras (Lab/LCH/CMYK/P3/Rec.2020/APCA/harmonies). Keeps out-of-gamut OKLCH unclamped and lets you pick the fold: `.mapSrgb()` (CSS Color 4 chroma reduction, holds L+H) vs `.clampSrgb()` (naive clip, what browsers render). Zero-allocation `*Into` channel converters for per-pixel work. Note `.mix()` is sRGB — use `.mixOklab()`
- **@colordx/gpu** — the same colordx math generated as GLSL and parity-tested against the CPU library, plus a WebGL2 renderer for the gamut-slice chart behind every OKLCH/LCH picker (one draw per frame instead of a per-pixel CPU loop). Gamuts are independent layers rather than an assumed nesting, so A98 draws correctly; `maxChromaLUT` stretches the chroma axis to the gamut shell (nutelch's `relC` idea, GPU-side). Reach for it when building a picker UI or any wide-gamut visualization
- **Spectral.js** — open-source K-M pigment mixing (blue+yellow=green)
- **RYBitten** — RGB↔RYB with 26 historical color cubes
- **colorgram** — 1 kB image palette extraction; 64-bucket HLS+luminance quantization, ~15 ms for 340×340, fixed memory
- **Art Palette** — JS palette extraction from `ImageData` + Python/TensorFlow perceptual palette embeddings for search-by-color (Google Arts & Culture, Apache 2.0)
- **Palette Studio** (meditationsincolor.com, Pixel Symphony) — best-in-class on paintings and posters: OKLab k-means for coverage *plus* an accent-salience pass, so small vivid touches survive instead of averaging into mud; then coverage is measured back for proportions. Pigment-vocabulary names. Browser-only, nothing uploaded.
- **Pixi** (Xander Stagwood) — image → designed 7-chip card, not a measurement: each cluster shown as its *vivid face* (mean of its most chromatic 25 % of pixels, so a red on dark doesn't average to brown), chips picked by role (dark/light anchors, hero, earned accent), then lightness fitted to one ramp. Every nudge is guarded to never leave chips closer than ΔE_OK 0.08
- **random-display-p3-color** — generate random Display P3 colors constrained by named hue/saturation/lightness, zero deps, ESM (by mrmrs / mrmrs.cc)
### Sorting Colors
Sorting an arbitrary set of colors into a perceptually smooth sequence has **no single correct linear order** — color is 3D, so any 1D ordering is a *path* through a 3D space, closely related to the Travelling Salesman Problem. Naive sorts fail predictably: by hue alone interleaves lights and darks; by lightness alone collapses distinct hues; `.sort()` on a packed RGB/HSL value produces jagged, meaningless jumps. Don't hand-roll a single-channel sort.
- **colorsort-js** (darosh) — the reliable default for ordering colors. Treats it as a smoothest-path problem (nearest-neighbor / TSP-style) with quantitative smoothness metrics, working in perceptual space; powers okpalette.color.pizza and FarbVelo. Reach for this in almost any "put these colors in a sensible order" situation — palette display, swatch panels, generative output, extracted image palettes. See `references/techniques/colorsort-js.md`.
### Key Online Tools
- **oklch.com** — OKLCH picker
- **Huetone** — accessible color system builder (LCH/OKLCH), by Ardov
- **Ardov Color Lab** — gamut mapping playground, P3 space explorer, harmony generator, 3D color space visualizations, themer (lab.ardov.me)
- **Components.ai Color Scale** — parametric scale generator: 6 spaces, 4 curve methods, WCAG contrast (by mrmrs / mrmrs.cc)
- **Leonardo** — Adobe's open-source contrast-based ramp builder (leonardocolor.io): swatches generated from **target contrast ratios** (or target lightness) instead of hand-picked, across multiple color spaces; adaptive light/dark theming, CVD-safe cycling, exports CSS vars + W3C design tokens. Pairs with the `@adobe/leonardo-contrast-colors` npm lib for runtime adaptive theming. By Nate Baldwin / Adobe.
- **BairesDev Color Palette Editor** — quick HSV-based ramp editor: interpolate between swatches, map palettes, import/export. Fine for fast drafts, but HSV interpolation isn't perceptually uniform (see *Understanding HSL's Limitations*) — prefer Leonardo/Huetone/Components.ai for production ramps.
- **View Color** — real-time analysis, WCAG + APCA, CVD preview
- **APCA Calculator** — apcacontrast.com
## Deep References
Start at `references/INDEX.md` — a compact map, one line per file, cheap to read whole. When that
line is too terse to choose between two files, the per-directory indexes
(`references/historical/INDEX.md`, `contemporary/INDEX.md`, `techniques/INDEX.md`) carry the full
summaries and source links, and `references/techniques/ONLINE-TOOLS.md` lists the online tools.
The three directories hold:
- **`historical/`** — Ostwald, Helmholtz, Bezold, Ridgway 1912, ISCC-NBS, Munsell, Albers, Caravaggio's pigments, Moses Harris, Lewis/Ladd-Franklin
- **`contemporary/`** — Ottosson's OKLAB articles, Briggs lectures, Fairchild, Hunt, CIECAM02, MacAdam ellipses, Koenderink 2026 empirical 3D metric field (RGB supports ~1,000 qualitative regions; cool side coarser than warm; chromatic circle is not well-tempered), Pointer's gamut, CIE 1931/standard observer, Pixar Color Science, Acerola, Juxtopposed, Computerphile, bird tetrachromacy, OLO, GenColor paper, colour in computer vision / VLM colour deficiencies (ColorBench, CLIP Stroop test, encoder thresholds). Full scrapes: huevaluechroma.com and colorandcontrast.com
- **`techniques/`** — All tools above documented in detail, plus: CSS Color 4/5, ICC workflows, 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, Bruce Lindbloom math reference, image extraction tools, Aladdin color analysis
---
## Source and license
Source: [meodai/skill.color-expert](https://github.com/meodai/skill.color-expert/tree/5bf7c7704d56bccc6aeea38c36bcf449abe56a6c). Author: meodai.
Attribution 4.0 International
=======================================================================
Creative Commons Corporation ("Creative Commons") is not a law firm and
does not provide legal services or legal advice. Distribution of
Creative Commons public licenses does not create a lawyer-client or
other relationship. Creative Commons makes its licenses and related
information available on an "as-is" basis. Creative Commons gives no
warranties regarding its licenses, any material licensed under their
terms and conditions, or any related information. Creative Commons
disclaims all liability for damages resulting from their use to the
fullest extent possible.
Using Creative Commons Public Licenses
Creative Commons public licenses provide a standard set of terms and
conditions that creators and other rights holders may use to share
original works of authorship and other material subject to copyright
and certain other rights specified in the public license below. The
following considerations are for informational purposes only, are not
exhaustive, and do not form part of our licenses.
Considerations for licensors: Our public licenses are
intended for use by those authorized to give the public
permission to use material in ways otherwise restricted by
copyright and certain other rights. Our licenses are
irrevocable. Licensors should read and understand the terms
and conditions of the license they choose before applying it.
Licensors should also secure all rights necessary before
applying our licenses so that the public can reuse the
material as expected. Licensors should clearly mark any
material not subject to the license. This includes other CC-
licensed material, or material used under an exception or
limitation to copyright. More considerations for licensors:
wiki.creativecommons.org/Considerations_for_licensors
Considerations for the public: By using one of our public
licenses, a licensor grants the public permission to use the
licensed material under specified terms and conditions. If
the licensor's permission is not necessary for any reason--for
example, because of any applicable exception or limitation to
copyright--then that use is not regulated by the license. Our
licenses grant only permissions under copyright and certain
other rights that a licensor has authority to grant. Use of
the licensed material may still be restricted for other
reasons, including because others have copyright or other
rights in the material. A licensor may make special requests,
such as asking that all changes be marked or described.
Although not required by our licenses, you are encouraged to
respect those requests where reasonable. More considerations
for the public:
wiki.creativecommons.org/Considerations_for_licensees
=======================================================================
Creative Commons Attribution 4.0 International Public License
By exercising the Licensed Rights (defined below), You accept and agree
to be bound by the terms and conditions of this Creative Commons
Attribution 4.0 International Public License ("Public License"). To the
extent this Public License may be interpreted as a contract, You are
granted the Licensed Rights in consideration of Your acceptance of
these terms and conditions, and the Licensor grants You such rights in
consideration of benefits the Licensor receives from making the
Licensed Material available under these terms and conditions.
Section 1 -- Definitions.
a. Adapted Material means material subject to Copyright and Similar
Rights that is derived from or based upon the Licensed Material
and in which the Licensed Material is translated, altered,
arranged, transformed, or otherwise modified in a manner requiring
permission under the Copyright and Similar Rights held by the
Licensor. For purposes of this Public License, where the Licensed
Material is a musical work, performance, or sound recording,
Adapted Material is always produced where the Licensed Material is
synched in timed relation with a moving image.
b. Adapter's License means the license You apply to Your Copyright
and Similar Rights in Your contributions to Adapted Material in
accordance with the terms and conditions of this Public License.
c. Copyright and Similar Rights means copyright and/or similar rights
closely related to copyright including, without limitation,
performance, broadcast, sound recording, and Sui Generis Database
Rights, without regard to how the rights are labeled or
categorized. For purposes of this Public License, the rights
specified in Section 2(b)(1)-(2) are not Copyright and Similar
Rights.
d. Effective Technological Measures means those measures that, in the
absence of proper authority, may not be circumvented under laws
fulfilling obligations under Article 11 of the WIPO Copyright
Treaty adopted on December 20, 1996, and/or similar international
agreements.
e. Exceptions and Limitations means fair use, fair dealing, and/or
any other exception or limitation to Copyright and Similar Rights
that applies to Your use of the Licensed Material.
f. Licensed Material means the artistic or literary work, database,
or other material to which the Licensor applied this Public
License.
g. Licensed Rights means the rights granted to You subject to the
terms and conditions of this Public License, which are limited to
all Copyright and Similar Rights that apply to Your use of the
Licensed Material and that the Licensor has authority to license.
h. Licensor means the individual(s) or entity(ies) granting rights
under this Public License.
i. Share means to provide material to the public by any means or
process that requires permission under the Licensed Rights, such
as reproduction, public display, public performance, distribution,
dissemination, communication, or importation, and to make material
available to the public including in ways that members of the
public may access the material from a place and at a time
individually chosen by them.
j. Sui Generis Database Rights means rights other than copyright
resulting from Directive 96/9/EC of the European Parliament and of
the Council of 11 March 1996 on the legal protection of databases,
as amended and/or succeeded, as well as other essentially
equivalent rights anywhere in the world.
k. You means the individual or entity exercising the Licensed Rights
under this Public License. Your has a corresponding meaning.
Section 2 -- Scope.
a. License grant.
1. Subject to the terms and conditions of this Public License,
the Licensor hereby grants You a worldwide, royalty-free,
non-sublicensable, non-exclusive, irrevocable license to
exercise the Licensed Rights in the Licensed Material to:
a. reproduce and Share the Licensed Material, in whole or
in part; and
b. produce, reproduce, and Share Adapted Material.
2. Exceptions and Limitations. For the avoidance of doubt, where
Exceptions and Limitations apply to Your use, this Public
License does not apply, and You do not need to comply with
its terms and conditions.
3. Term. The term of this Public License is specified in Section
6(a).
4. Media and formats; technical modifications allowed. The
Licensor authorizes You to exercise the Licensed Rights in
all media and formats whether now known or hereafter created,
and to make technical modifications necessary to do so. The
Licensor waives and/or agrees not to assert any right or
authority to forbid You from making technical modifications
necessary to exercise the Licensed Rights, including
technical modifications necessary to circumvent Effective
Technological Measures. For purposes of this Public License,
simply making modifications authorized by this Section 2(a)
(4) never produces Adapted Material.
5. Downstream recipients.
a. Offer from the Licensor -- Licensed Material. Every
recipient of the Licensed Material automatically
receives an offer from the Licensor to exercise the
Licensed Rights under the terms and conditions of this
Public License.
b. No downstream restrictions. You may not offer or impose
any additional or different terms or conditions on, or
apply any Effective Technological Measures to, the
Licensed Material if doing so restricts exercise of the
Licensed Rights by any recipient of the Licensed
Material.
6. No endorsement. Nothing in this Public License constitutes or
may be construed as permission to assert or imply that You
are, or that Your use of the Licensed Material is, connected
with, or sponsored, endorsed, or granted official status by,
the Licensor or others designated to receive attribution as
provided in Section 3(a)(1)(A)(i).
b. Other rights.
1. Moral rights, such as the right of integrity, are not
licensed under this Public License, nor are publicity,
privacy, and/or other similar personality rights; however, to
the extent possible, the Licensor waives and/or agrees not to
assert any such rights held by the Licensor to the limited
extent necessary to allow You to exercise the Licensed
Rights, but not otherwise.
2. Patent and trademark rights are not licensed under this
Public License.
3. To the extent possible, the Licensor waives any right to
collect royalties from You for the exercise of the Licensed
Rights, whether directly or through a collecting society
under any voluntary or waivable statutory or compulsory
licensing scheme. In all other cases the Licensor expressly
reserves any right to collect such royalties.
Section 3 -- License Conditions.
Your exercise of the Licensed Rights is expressly made subject to the
following conditions.
a. Attribution.
1. If You Share the Licensed Material (including in modified
form), You must:
a. retain the following if it is supplied by the Licensor
with the Licensed Material:
i. identification of the creator(s) of the Licensed
Material and any others designated to receive
attribution, in any reasonable manner requested by
the Licensor (including by pseudonym if
designated);
ii. a copyright notice;
iii. a notice that refers to this Public License;
iv. a notice that refers to the disclaimer of
warranties;
v. a URI or hyperlink to the Licensed Material to the
extent reasonably practicable;
b. indicate if You modified the Licensed Material and
retain an indication of any previous modifications; and
c. indicate the Licensed Material is licensed under this
Public License, and include the text of, or the URI or
hyperlink to, this Public License.
2. You may satisfy the conditions in Section 3(a)(1) in any
reasonable manner based on the medium, means, and context in
which You Share the Licensed Material. For example, it may be
reasonable to satisfy the conditions by providing a URI or
hyperlink to a resource that includes the required
information.
3. If requested by the Licensor, You must remove any of the
information required by Section 3(a)(1)(A) to the extent
reasonably practicable.
4. If You Share Adapted Material You produce, the Adapter's
License You apply must not prevent recipients of the Adapted
Material from complying with this Public License.
Section 4 -- Sui Generis Database Rights.
Where the Licensed Rights include Sui Generis Database Rights that
apply to Your use of the Licensed Material:
a. for the avoidance of doubt, Section 2(a)(1) grants You the right
to extract, reuse, reproduce, and Share all or a substantial
portion of the contents of the database;
b. if You include all or a substantial portion of the database
contents in a database in which You have Sui Generis Database
Rights, then the database in which You have Sui Generis Database
Rights (but not its individual contents) is Adapted Material; and
c. You must comply with the conditions in Section 3(a) if You Share
all or a substantial portion of the contents of the database.
For the avoidance of doubt, this Section 4 supplements and does not
replace Your obligations under this Public License where the Licensed
Rights include other Copyright and Similar Rights.
Section 5 -- Disclaimer of Warranties and Limitation of Liability.
a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
c. The disclaimer of warranties and limitation of liability provided
above shall be interpreted in a manner that, to the extent
possible, most closely approximates an absolute disclaimer and
waiver of all liability.
Section 6 -- Term and Termination.
a. This Public License applies for the term of the Copyright and
Similar Rights licensed here. However, if You fail to comply with
this Public License, then Your rights under this Public License
terminate automatically.
b. Where Your right to use the Licensed Material has terminated under
Section 6(a), it reinstates:
1. automatically as of the date the violation is cured, provided
it is cured within 30 days of Your discovery of the
violation; or
2. upon express reinstatement by the Licensor.
For the avoidance of doubt, this Section 6(b) does not affect any
right the Licensor may have to seek remedies for Your violations
of this Public License.
c. For the avoidance of doubt, the Licensor may also offer the
Licensed Material under separate terms or conditions or stop
distributing the Licensed Material at any time; however, doing so
will not terminate this Public License.
d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
License.
Section 7 -- Other Terms and Conditions.
a. The Licensor shall not be bound by any additional or different
terms or conditions communicated by You unless expressly agreed.
b. Any arrangements, understandings, or agreements regarding the
Licensed Material not stated herein are separate from and
independent of the terms and conditions of this Public License.
Section 8 -- Interpretation.
a. For the avoidance of doubt, this Public License does not, and
shall not be interpreted to, reduce, limit, restrict, or impose
conditions on any use of the Licensed Material that could lawfully
be made without permission under this Public License.
b. To the extent possible, if any provision of this Public License is
deemed unenforceable, it shall be automatically reformed to the
minimum extent necessary to make it enforceable. If the provision
cannot be reformed, it shall be severed from this Public License
without affecting the enforceability of the remaining terms and
conditions.
c. No term or condition of this Public License will be waived and no
failure to comply consented to unless expressly agreed to by the
Licensor.
d. Nothing in this Public License constitutes or may be interpreted
as a limitation upon, or waiver of, any privileges and immunities
that apply to the Licensor or You, including from the legal
processes of any jurisdiction or authority.
=======================================================================
Creative Commons is not a party to its public licenses.
Notwithstanding, Creative Commons may elect to apply one of its public
licenses to material it publishes and in those instances will be
considered the “Licensor.” The text of the Creative Commons public
licenses is dedicated to the public domain under the CC0 Public Domain
Dedication. Except for the limited purpose of indicating that material
is shared under a Creative Commons public license or as otherwise
permitted by the Creative Commons policies published at
creativecommons.org/policies, Creative Commons does not authorize the
use of the trademark "Creative Commons" or any other trademark or logo
of Creative Commons without its prior written consent including,
without limitation, in connection with any unauthorized modifications
to any of its public licenses or any other arrangements,
understandings, or agreements concerning use of licensed material. For
the avoidance of doubt, this paragraph does not form part of the public
licenses.
Creative Commons may be contacted at creativecommons.org.
