Colors

Palette workbench. Every color shown on the real icons. Labels show OKLCH readouts (perceptual lightness, chroma, hue); click a label to copy its hex.

muted-redH20 · L0.53/0.60

muted-copperH43 · L0.53/0.60

muted-amberH64 · L0.53/0.60

muted-oliveH87 · L0.53/0.60

muted-mossH110 · L0.53/0.60

muted-greenH132 · L0.53/0.60

muted-jadeH155 · L0.53/0.60

muted-tealH177 · L0.53/0.60

Palette

The shipped 16-hue muted wheel from globals.css. One hue per IIDS principle, every 22.5 degrees in OKLCH (C~0.11, chroma eased where the sRGB gamut pinches), anchored on the brand red. The register splits by theme so both canvases get AA contrast: L=0.53 on light (4.5:1+ on the canvas), L=0.60 on dark. Same hues, only lightness moves. Icons here render from the live tokens, so toggling the theme shows each register on its own canvas.

muted-oceanH200 · L0.53/0.60

muted-azureH223 · L0.53/0.60

muted-cobaltH245 · L0.53/0.60

muted-blueH268 · L0.53/0.60

muted-violetH290 · L0.53/0.60

muted-purpleH312 · L0.53/0.60

muted-magentaH335 · L0.53/0.60

muted-roseH357 · L0.53/0.60

Depth ramps

Each wheel hue at four lightness steps (0.42 / 0.53 / 0.60 / 0.68) with chroma held steady. The middle rows are the shipped registers (light-canvas and dark-canvas cores); the outer rows give shadow and tint stops for charts, hovers, and illustration depth.

L = 0.42

#7e2f33

#7c3413

#6e4108

#604a08

#505108

#34590c

#0b5c34

#0b5a4d

#0b585c

#0b566a

#0a5180

#334889

#4d4084

#613877

#703265

#7a2f4d

L = 0.53

#a24f51

#a05434

#975c16

#856710

#707110

#537931

#2a7e4f

#147d6b

#147a7f

#137793

#2971a7

#5068ab

#6c5fa7

#815799

#925185

#9d4e6c

L = 0.6

#b96365

#b66849

#ad7130

#9c7b22

#84862d

#668e46

#419363

#1a9480

#199197

#198eae

#4086bd

#637dc2

#8074bd

#976caf

#a8669a

#b46380

L = 0.68

#d47b7c

#d18160

#c7894a

#b5943f

#9c9e48

#7ea75e

#5bac7a

#36ae98

#20acb3

#36a7c9

#599fd8

#7a96dd

#978cd7

#b084c9

#c27eb3

#ce7a99