Colors

Three layers#

It helps to keep three things apart. A literal value is a raw, theme-blind color (#F84416, oklch(1 0 0)). A CSS variable (--background, --primary) holds one literal per theme. A semantic token is the utility a component writes (bg-background, text-foreground). It resolves to the variable, never to a literal. Change a theme by swapping the variables; the literals move, the tokens stay put.

/* 1: literal value (raw, theme-blind) */
oklch(0.205 0 0)

/* 2: CSS variable, one literal per theme */
:root  { --primary: oklch(0.205 0 0); }   /* light */
.dark  { --primary: oklch(0.922 0 0); }   /* dark  */

/* 3: semantic token, what a component writes */
@theme inline { --color-primary: var(--primary); }
.button { background: var(--color-primary); }  /* bg-primary */

The swatches below document the token and variable layers, the part you build with. The literal colors at the bottom are the raw escape hatch. For changing the variables, see Theming.

Surfaces#

Each swatch shows the token a component writes and, below it, the CSS variable it resolves to.

Content#

Inline text links use one role, text-link, derived from --brand so a link carries the active accent. It stays its own role because it is tuned for text where --brand is tuned for fills: the raw accent only reaches 3.6:1 as text on white, so the light theme darkens it to clear the 4.5:1 AA floor while the dark themes use it straight. Keep it distinct from text-info, which is a status hue and never a link. Links carry a hairline underline at rest and turn both the text and the underline text-link on hover. Do not hand-roll that treatment: use <Link variant="prose">.

Brand & state#

Status#

Status roles read at full strength for text and icons; soft badges derive their tint from the same role via opacity (bg-success/10 + text-success).

Categorical hues#

A small, fixed set of distinct hues for labels, tags and category badges. Use these when items need to be told apart, not ranked.

Lines & focus#

Literal colors#

The bottom layer: raw values that do not respond to theming. Koala authors these in oklch for a wider, more even gamut, but any color-mix()-friendly literal works, including plain hex. Reach for a literal only when a color must stay fixed across every theme (a logo, a chart series, a brand mark). For anything that should restyle, use a semantic token above.

Tailwind v4’s entire oklch palette ships out of the box: 22 families × 11 shades, each a bg-* / text-* / border-* utility (bg-blue-500, text-rose-600, …). Every chip below is a fixed literal; hover one to read its family-shade name and oklch value.