Prebuilt Colors

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/utilities.css"

Naming Conventions

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

VariantDirectoryDescription
Monochromemonochrome/Single-tone grayscale palette
Neutralneutral/Neutral palette with a subtle hue
Tonal Spottonal-spot/Balanced tonal palette
Vibrantvibrant/Highly saturated palette
Expressiveexpressive/Expressive and dynamic palette
Rainbowrainbow/Rainbow-inspired palette
Fruit Saladfruit-salad/Diverse multi-hue palette
Contentcontent/Content-color aligned palette
Fidelityfidelity/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
h{hue}-{year}-oled.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
  • -oled: Optional suffix. The OLED variant uses pure black (#000000) as the dark-mode background for OLED screens.

Example filenames:

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

Note: Each file internally contains three contrast modes, selected automatically by the system’s prefers-contrast media query: default (:root), low contrast (@media (prefers-contrast: less)), high contrast (@media (prefers-contrast: more)). Light and dark values are written with the CSS light-dark() function, so the active mode is controlled by the color-scheme property — which preset.css wires to the dark attribute of :root.

Special case — monochrome

prebuilt-colors/monochrome/black-2025.css

Monochrome is a special case: it uses black instead of a hue value, e.g. black-2021.css, black-2021-oled.css, black-2025.css, black-2025-oled.css.

Pattern B — Hue + Chroma + Tone + Year

Used by: content, fidelity

h{hue}c{chroma}t{tone}-{year}.css
h{hue}c{chroma}t{tone}-{year}-oled.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: 20, 40, 60, 80
  • {tone}: Tone value in HCT color space. Values: 20, 40, 60, 80
  • {year}: Material Design spec version. Values: 2021 or 2025
  • -oled: Optional suffix. The OLED variant uses pure black (#000000) as the dark-mode background for OLED screens.

Example filenames:

  • prebuilt-colors/content/h0c20t20-2025.css
  • prebuilt-colors/content/h0c20t20-2025-oled.css
  • prebuilt-colors/fidelity/h180c60t60-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/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/tw.css";

Usage

Theme switching

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

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

Contrast adjustment

Contrast levels are applied automatically — no attribute is required. The system setting prefers-contrast: less or more switches to the matching contrast mode:

@media (prefers-contrast: less)  { /* low-contrast values */ }
@media (prefers-contrast: more)  { /* high-contrast values */ }

Examples by Variant

Monochrome

import "@sandlada/material-design-css/preset.css"
import "@sandlada/material-design-css/prebuilt-colors/monochrome/black-2025.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/h0c20t20-2025.css"
import "@sandlada/material-design-css/prebuilt-colors/fidelity/h180c60t60-2025.css"