COLOR LEVEL 4 · COMPLETE IN 0.3

Modern color and Display-P3

Use perceptual color spaces, wide-gamut theme tokens, explicit fallbacks, opacity mixing, and predictable gradient interpolation without adding browser runtime code.

✓

The release gate covers OKLab and OKLCH palettes, Lab, LCH, Display-P3, CSS color-mix(), eight gradient interpolation spaces, hue-path controls, slash opacity, and progressive wide-gamut fallback behavior.

DEFAULT COLOR PALETTE

Every built-in Coordiation color

The default palette includes complete brand and neutral scales plus focused single-step semantic hues. Every token works across color-aware utilities such as co-bg-*, co-text-*, co-border-*, co-fill-*, and co-stroke-*.

Click to copy CSS variableShift + click to copy raw value

Token50100200300400500600700800900950

brand

neutral

SEMANTIC HUES

Single-step colors

These tokens intentionally provide one default value rather than a 50–950 scale.

FOUNDATION

Context and base colors

component.coord

<article class="co-bg-neutral-950 co-text-neutral-50 co-border-brand-500">
  <svg class="co-fill-blue co-stroke-white">...</svg>
  <a class="co-text-brand-400 hover:co-text-brand-300">Learn more</a>
</article>

CSS-FIRST PALETTE

Pair every P3 color with a fallback

Declare the ordinary token first, then add a --p3 companion. Coordiation emits the fallback at the root and promotes the P3 value only when the browser understands Display-P3 and the output device reports a P3 gamut.

app.css

@co-theme {
  --co-color-signal: oklch(64% 0.22 29);
  --co-color-signal--p3: color(display-p3 1 0.16 0.08);
}

@coordiation;

component.coord

<button class="co-bg-signal co-text-white hover:co-bg-signal/80">
  Publish
</button>

Fallback contract

The --p3 token is compiler metadata, not a second public utility name. Continue using co-bg-signal, co-text-signal, and other ordinary color utilities.

INTERPOLATION

Choose how gradient colors travel

Add one modifier to a linear, radial, or conic gradient. Without a modifier, Coordiation uses OKLab.

ModifierGenerated method and purpose

/srgbin srgb — Compatibility-oriented RGB interpolation

/srgb-linearin srgb-linear — Linear-light RGB interpolation

/hslin hsl — Cylindrical legacy color interpolation

/labin lab — Perceptual CIE Lab interpolation

/lchin lch — Cylindrical CIE LCH interpolation

/oklabin oklab — Default perceptual interpolation

/oklchin oklch — Perceptual cylindrical interpolation

/display-p3in display-p3 — Wide-gamut RGB interpolation

component.coord

<div class="co-bg-linear-to-r/display-p3 co-from-signal co-to-brand-500"></div>
<div class="co-bg-radial/oklch co-from-white co-to-brand-900"></div>
<div class="co-bg-conic/decreasing co-from-brand-400 co-via-pink co-to-brand-400"></div>

DIRECT AUTHORING

Use typed arbitrary colors for one-off values

All color-consuming utilities accept safe Color Level 4 syntax. Keep the color: hint when a value could be interpreted as another utility type.

component.coord

<aside class="co-bg-[color:color(display-p3_0.1_0.7_1)] co-text-[color:lab(96%_-4_-8)]">
  Wide-gamut panel
</aside>

<svg class="co-fill-[color:color-mix(in_oklch,red_35%,blue)]">
  <!-- paths -->
</svg>

PROGRESSIVE ENHANCEMENT

One class, two gamut levels

01
Fallback first: the normal --co-color-* token works on ordinary displays.
02
Syntax check: @supports prevents browsers without Display-P3 parsing from using the enhancement.
03
Device check: @media (color-gamut: p3) limits the override to capable output devices.
04
Stable utility: generated classes always reference the same public token variable.
05
Static output: no JavaScript or client-side gamut detection is emitted.

AI GENERATION CONTRACT

Make gamut decisions inspectable

Agents can query the complete Modern color capability before producing palette or gradient code.

Prefer named theme colors over repeated arbitrary values.
Never emit a --p3 token without a same-name fallback.
Use OKLCH or OKLab for perceptual palette work; use Display-P3 only when wider gamut is intentional.
Keep gradient interpolation modifiers literal and choose them for a documented visual reason.
Use typed arbitrary color syntax only for source-controlled one-off values.

Previous← Logical properties NextBackgrounds →