Prebuilt Colors

Prebuilt colors are ready-made color palettes generated by Material Design’s color system. Each CSS file contains light/dark schemes and three contrast levels (default, low-contrast, high-contrast) built in.

To use a prebuilt color, import preset.css first, then import the desired prebuilt color file, followed by the color utilities.

import "@sandlada/material-design-css/preset.css"
import "@sandlada/material-design-css/prebuilt-colors/tonal-spot/h0-2025.css"
import "@sandlada/material-design-css/color/text-utilities.css"
import "@sandlada/material-design-css/color/bg-utilities.css"

Naming Conventions

Prebuilt colors are organized into 9 variants under prebuilt-colors/:

Variant	Directory	Description
Monochrome	`monochrome/`	Single-tone grayscale palette
Neutral	`neutral/`	Neutral palette with a subtle hue
Tonal Spot	`tonal-spot/`	Balanced tonal palette
Vibrant	`vibrant/`	Highly saturated palette
Expressive	`expressive/`	Expressive and dynamic palette
Rainbow	`rainbow/`	Rainbow-inspired palette
Fruit Salad	`fruit-salad/`	Diverse multi-hue palette
Content	`content/`	Content-color aligned palette
Fidelity	`fidelity/`	Fidelity-optimized palette

There are two filename patterns depending on the variant:

Pattern A — Hue + Year (monochrome is a special case)

Used by: neutral, tonal-spot, vibrant, expressive, rainbow, fruit-salad

h{hue}-{year}.css

{hue}: Hue angle in degrees. Available values: 0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 360
{year}: Material Design spec version. Values: 2021 or 2025

Example filenames:

prebuilt-colors/tonal-spot/h0-2025.css
prebuilt-colors/vibrant/h180-2021.css

Note: Each file internally contains three contrast modes: default (:root), low-contrast (:root[low-contrast]), and high-contrast (:root[high-contrast]).

Special case — monochrome

prebuilt-colors/monochrome/black.css

Only one file exists for monochrome. It does not include a year suffix.

Pattern B — Hue + Chroma + Tone + Year

Used by: content, fidelity

h{hue}c{chroma}t{tone}-{year}.css

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

Example filenames:

prebuilt-colors/content/h0c30t20-2025.css
prebuilt-colors/fidelity/h180c60t50-2021.css

Each file also contains three built-in contrast levels.

Import

For CSS

@import "@sandlada/material-design-css/preset.css";
@import "@sandlada/material-design-css/prebuilt-colors/tonal-spot/h0-2025.css";
@import "@sandlada/material-design-css/color/bg-utilities.css";
@import "@sandlada/material-design-css/color/text-utilities.css";

For TailwindCSS v4

@import "tailwindcss";
@import "@sandlada/material-design-css/prebuilt-colors/tonal-spot/h0-2025.css";
@import "@sandlada/material-design-css/color/tailwind-theme.css";

Usage

Theme switching

Toggle the dark attribute on :root to switch between light and dark themes:

<html dark>
    <!-- Dark mode -->
</html>

Contrast adjustment

Use low-contrast or high-contrast attributes to adjust contrast:

<html low-contrast>
    <!-- Low contrast mode -->
</html>

<html high-contrast>
    <!-- High contrast mode -->
</html>

Examples by Variant

Monochrome

import "@sandlada/material-design-css/preset.css"
import "@sandlada/material-design-css/prebuilt-colors/monochrome/black.css"

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

import "@sandlada/material-design-css/preset.css"
import "@sandlada/material-design-css/prebuilt-colors/neutral/h120-2025.css"
import "@sandlada/material-design-css/prebuilt-colors/tonal-spot/h0-2025.css"
import "@sandlada/material-design-css/prebuilt-colors/vibrant/h240-2025.css"

Content / Fidelity

import "@sandlada/material-design-css/preset.css"
import "@sandlada/material-design-css/prebuilt-colors/content/h0c30t20-2025.css"
import "@sandlada/material-design-css/prebuilt-colors/fidelity/h180c60t50-2025.css"