Color palette

Classes

A color class sets only the named property. For a visible border, combine a width such as b(1), a style such as b-solid and a color such as b-blue-60. Color roles use these same families and have their own value tables.

Values

Palette numbers are token keys, not opacity or lightness percentages. Higher numbered steps have lower OKLCH lightness. Each swatch copies its CSS value or variable reference; hue aliases below retain their authored token reference.

Palette

Hue aliases

Other colors

Hue aliases select a fixed step

bg-blue reads --color-blue, whose preset value is var(--color-blue-60). bg-yellow instead reaches --color-yellow-40. The alias does not imply a common step number across hues.

The preset blue alias references blue-60; yellow references yellow-40. The outlines mark those references, not a border added by either background class. Selected palette steps are shown.

Text description

1. bg-blue reads --color-blue, which references --color-blue-60 in the preset. The blue strip marks step 60.
2. bg-yellow reads --color-yellow, which references --color-yellow-40. The yellow strip marks step 40 in the same set of displayed steps.
3. Both strips show actual palette colors at steps 10, 20, 40, 60, 80 and 90. Equal swatch widths are for comparison, not a scale of perceptual distance.
4. The two alias chains remain the same in light and dark schemes. Redefining an alias or its referenced token can change its result.

Numbered steps and hue aliases do not switch with the color scheme. Adaptive text aliases such as fg-text-blue belong to Color roles. Redefining a token can change either behavior.

bg-current reads currentColor, so its result follows the element’s text color. There is no preset --color-transparent token. For transparency or another literal color, use a native declaration such as (background-color:transparent) or (background-color:#175fe9).

See Color roles and native values and opacity.

Usage

These status labels use explicit foreground and background steps. The words retain their meaning without color, and the selected colors stay fixed in both schemes.

<div>  <span class="… bg-green-5 fg-green-80">Paid</span>  <span class="… bg-amber-5 fg-amber-80">Pending</span>  <span class="… bg-red-5 fg-red-80">Overdue</span>  <span class="… bg-blue-5 fg-blue-70">Draft</span></div>

@layer theme {  :root,  :host {    --color-amber-5: oklch(96.24% .0573 98.1);    --color-amber-80: oklch(53.09% .1677 39.7);    --color-green-5: oklch(94.95% .071 145.5);    --color-green-80: oklch(51.96% .1768 142.5);    --color-blue-5: oklch(93.53% .0305 231.3);    --color-blue-70: oklch(46.26% .3057 266.7);    --color-red-5: oklch(94.05% .0239 17);    --color-red-80: oklch(53.09% .2178 29.2)  }}@layer utilities {  .bg-amber-5 {    background-color: var(--color-amber-5)  }  .bg-blue-5 {    background-color: var(--color-blue-5)  }  .bg-green-5 {    background-color: var(--color-green-5)  }  .bg-red-5 {    background-color: var(--color-red-5)  }  .fg-amber-80 {    color: var(--color-amber-80)  }  .fg-blue-70 {    color: var(--color-blue-70)  }  .fg-green-80 {    color: var(--color-green-80)  }  .fg-red-80 {    color: var(--color-red-80)  }}

Customize

Register a color in @theme to make its key available to the color families. Here brand is available as bg-brand, fg-brand and b-brand, among others.

@theme {  --color-brand: oklch(56% .2 262);}

@layer theme {  :root,  :host {    --color-brand: oklch(56% .2 262)  }}@layer utilities {  .bg-brand {    background-color: var(--color-brand)  }}

See theme directives and Color.