Prebuilt Palettes

Prebuilt palettes provide raw reference tonal palettes generated by Material Design’s color system. Unlike prebuilt colors, these are not semantic color schemes — they are low-level palette data you can use to build custom designs.

Each file defines CSS custom properties for six reference palettes:

--md-ref-palette-primary-{tone}: #hex;
--md-ref-palette-secondary-{tone}: #hex;
--md-ref-palette-tertiary-{tone}: #hex;
--md-ref-palette-error-{tone}: #hex;
--md-ref-palette-neutral-{tone}: #hex;
--md-ref-palette-neutral-variant-{tone}: #hex;

Where {tone} ranges from 0 to 100.

There are 9 variants, organized into subdirectories under prebuilt-palettes/:

Variant	Directory	Filename Pattern	Description
Monochrome	`monochrome/`	`black-{year}.css` / `black-{year}-minimal.css`	Single-tone grayscale palette
Neutral	`neutral/`	`h{hue}-{year}.css` / `h{hue}-{year}-minimal.css`	Neutral palette with a subtle hue
Tonal Spot	`tonal-spot/`	`h{hue}-{year}.css` / `h{hue}-{year}-minimal.css`	Balanced tonal palette
Vibrant	`vibrant/`	`h{hue}-{year}.css` / `h{hue}-{year}-minimal.css`	Highly saturated palette
Expressive	`expressive/`	`h{hue}-{year}.css` / `h{hue}-{year}-minimal.css`	Expressive and dynamic palette
Rainbow	`rainbow/`	`h{hue}-{year}.css` / `h{hue}-{year}-minimal.css`	Rainbow-inspired palette
Fruit Salad	`fruit-salad/`	`h{hue}-{year}.css` / `h{hue}-{year}-minimal.css`	Diverse multi-hue palette
Content	`content/`	`h{hue}c{chroma}t{tone}-{year}.css` / `h{hue}c{chroma}t{tone}-{year}-minimal.css`	Content-color aligned palette
Fidelity	`fidelity/`	`h{hue}c{chroma}t{tone}-{year}.css` / `h{hue}c{chroma}t{tone}-{year}-minimal.css`	Fidelity-optimized palette

Parameters

{hue}: Hue angle in degrees. Available values: 0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 360
{chroma}: Chroma value in HCT color space. Values: 30, 60, 90 (only for content and fidelity)
{tone}: Tone value in HCT color space. Values: 20, 50, 80 (only for content and fidelity)
{year}: Material Design spec version. Values: 2021 or 2025

Versions

Version	Suffix	Tone values
Full	(none)	0 ~ 100 (101 tones)
Minimal	`-minimal`	0–5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95–100 (21 tones)

Import

For CSS

import '@sandlada/material-design-css/prebuilt-palettes/tonal-spot/h0-2025.css'

For TailwindCSS v4

@import "tailwindcss";
@import "@sandlada/material-design-css/prebuilt-palettes/tonal-spot/h0-2025.css";

Usage

After importing a prebuilt palette file, use the palette tokens in your styles:

.my-element {
    background-color: var(--md-ref-palette-primary-40);
    color: var(--md-ref-palette-primary-90);
}

Example filenames

prebuilt-palettes/tonal-spot/h0-2025.css
prebuilt-palettes/tonal-spot/h180-2025-minimal.css
prebuilt-palettes/content/h0c30t20-2025.css
prebuilt-palettes/fidelity/h180c60t50-2025-minimal.css
prebuilt-palettes/monochrome/black-2025.css

Examples by Variant

Monochrome

import '@sandlada/material-design-css/prebuilt-palettes/monochrome/black-2025.css'

Neutral / Tonal Spot / Vibrant / Expressive / Rainbow / Fruit Salad

import '@sandlada/material-design-css/prebuilt-palettes/neutral/h120-2025.css'
import '@sandlada/material-design-css/prebuilt-palettes/tonal-spot/h0-2025.css'
import '@sandlada/material-design-css/prebuilt-palettes/vibrant/h240-2025.css'

Content / Fidelity

import '@sandlada/material-design-css/prebuilt-palettes/content/h0c30t20-2025.css'
import '@sandlada/material-design-css/prebuilt-palettes/fidelity/h180c60t50-2025.css'