Colours

The web UI's colour palette, in light and dark, with the more vivid versions for wide-gamut screens.

Every colour is in OKLCH, so lightness and chroma are easy to compare and adjust. The base values match what an sRGB screen can show. On a wide-gamut screen (P3, HDR ones included), the accent and state colours get more chroma, so they look more vivid. The UI follows the system’s light or dark setting.

In the swatches below, a colour split in two shows the sRGB value on the left and the wide-gamut value on the right. The right half only looks different on a wide-gamut screen. The swatches and values are generated from web/src/design.css by mise run docs:gen.

Light

surface

text

muted

border

accent

new

regressed

ongoing

quiet

resolved

muted-state

Token	sRGB	Wide gamut
`--triage-bg`	`oklch(98.5% 0 0)`
`--triage-surface`	`oklch(100% 0 0)`
`--triage-text`	`oklch(21% 0.006 286)`
`--triage-muted`	`oklch(55.2% 0.014 286)`
`--triage-border`	`oklch(92% 0.004 287)`
`--triage-accent`	`oklch(56.1% 0.113 67)`	`oklch(56.1% 0.13 67)`
`--triage-new`	`oklch(54.6% 0.215 263)`	`oklch(54.6% 0.245 263)`
`--triage-regressed`	`oklch(57.7% 0.215 27)`	`oklch(57.7% 0.245 27)`
`--triage-ongoing`	`oklch(66.6% 0.157 58)`	`oklch(66.6% 0.179 58)`
`--triage-quiet`	`color-mix(in oklch, var(--triage-ongoing) 20%, var(--triage-muted))`
`--triage-resolved`	`oklch(62.7% 0.17 149)`	`oklch(62.7% 0.194 149)`
`--triage-muted-state`	`oklch(55.2% 0.014 286)`

Dark