Colors

A considered palette. A clear purpose for every color.

Explore 26 color families, each with eleven shades from light to dark. Copy a value or download the optional palette stylesheet.

Values stay readable without JavaScript.

Theme-aware classes

These shared classes follow the active theme in light and dark mode. Use semantic CSS variables for other color roles; fixed palette shades do not change with the theme.

Class	Purpose
`muted`	Secondary text using the muted theme color.
`surface`	A theme surface with the selected finish.
`text-gradient`	Accent text using the selected text paint.

<div class="surface p-md">
  <h2 class="text-gradient">Project overview</h2>
  <p class="muted">Updated a few minutes ago.</p>
</div>

There is no full set of palette utility classes such as bg-blue-600. For a custom rule, use color: var(--accent), background: var(--surface), or border-color: var(--line).

The color palette

Eleven shades per family: 50 is the lightest, 950 the darkest. Select any swatch to copy its value. These scales are independent of the selected theme.

Download Palette CSS

Optional CSS · no JavaScript or packages required.

Red

Orange

Amber

Yellow

Lime

Green

Emerald

Teal

Cyan

Sky

Blue

Indigo

Violet

Purple

Fuchsia

Pink

Rose

Slate

Stone

Gray

Zinc

Neutral

Taupe

Mauve

Mist

Olive

Raw colors and theme tokens

Load the optional palette stylesheet to use a fixed color such as var(--color-blue-600). It stays the same in light and dark mode. For everyday components, prefer a semantic token such as var(--accent), which adapts to the theme.

<link rel="stylesheet" href="/css/colors/palette.5be964a9714b46b9.css">

.chart-series {
  color: var(--color-teal-600);
}

A shade number does not guarantee contrast. Check each foreground and background combination before using it for text or controls.

Looking for a complete look?

Explore the themes for coordinated light and dark colors, semantic tokens, and customization guidance.