Color

The Material Design Color System provides the following color utilities:

bg-surface
text-on-surface

For a detailed description of M3 Color, see Definition of M3 Color.

Required

Color Scheme

The color tokens provided by this project provide a set of default values (light mode and dark mode). In order to make the color work properly, this project writes the following styles by default:

/* Method 1: Import preset.css file */
@import "@sandlada/material-design-css/preset.css";

/* Method 2: Insert color-scheme */
:root:not([dark]) {
    color-scheme: light;
}
:root[dark] {
    color-scheme: dark;
}

To enable dark mode, add the dark attribute on the html element:

<html dark>
    <!-- ... -->
</html>

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 built in.

For detailed prebuilt color usage, naming conventions, and examples, see the Prebuilt Colors page.

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.

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

Then use the palette tokens in your styles:

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

For detailed prebuilt palette usage, naming conventions, and examples, see the Prebuilt Palettes page.

Import

For CSS

@import "@sandlada/material-design-css/preset.css";
@import "@sandlada/material-design-css/color/utilities.css";

For TailwindCSS v4

@import "tailwindcss";
@import "@sandlada/material-design-css/color/tw.css";

Usage

Use bg-*

<div class="flex">
    <div class="box bg-primary"></div>
    <div class="box bg-secondary"></div>
    <div class="box bg-tertiary"></div>
    <div class="box bg-error"></div>
    <div class="box bg-surface-container-lowest"></div>
    <div class="box bg-surface-container-low"></div>
    <div class="box bg-surface-container"></div>
    <div class="box bg-surface-container-high"></div>
    <div class="box bg-surface-container-highest"></div>
</div>

<style>
    .box {
        height: 96px;
        width: 96px;
        display: block;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .flex {
        display: flex;
        overflow: auto;
    }
</style>

Use text-*

primary

secondary

tertiary

error

<div class="flex">
    <div class="box text-primary">primary</div>
    <div class="box text-secondary">secondary</div>
    <div class="box text-tertiary">tertiary</div>
    <div class="box text-error">error</div>
</div>

<style>
    .box {
        height: 96px;
        width: 96px;
        display: block;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .flex {
        display: flex;
        overflow: auto;
    }
</style>

All available colors

primary-palette-key-color
secondary-palette-key-color
tertiary-palette-key-color
neutral-palette-key-color
neutral-variant-palette-key-color
background
on-background
surface
surface-dim
surface-bright
surface-container-lowest
surface-container-low
surface-container
surface-container-high
surface-container-highest
on-surface
surface-variant
on-surface-variant
inverse-surface
inverse-on-surface
outline
outline-variant
shadow
scrim
surface-tint
primary
on-primary
primary-container
on-primary-container
inverse-primary
secondary
on-secondary
secondary-container
on-secondary-container
tertiary
on-tertiary
tertiary-container
on-tertiary-container
error
on-error
error-container
on-error-container
primary-fixed
primary-fixed-dim
on-primary-fixed
on-primary-fixed-variant
secondary-fixed
secondary-fixed-dim
on-secondary-fixed
on-secondary-fixed-variant
tertiary-fixed
tertiary-fixed-dim
on-tertiary-fixed
on-tertiary-fixed-variant