Color

A full color scheme is generated from one seed color. Roles, not hex values, carry the meaning.

• Interactive page: https://m3e.ljzapps.app/#foundations/color

A full color scheme is generated from one seed color. Roles, not hex values, carry the meaning. Every surface color has a matching content color (primary with onPrimary, surfaceContainer with onSurface). Always use them as a pair.

Role groups: primary, secondary, tertiary (each with on, container, onContainer and fixed variants), error (with container), surface (surface, surfaceDim, surfaceBright, surfaceContainerLowest to surfaceContainerHighest, onSurface, onSurfaceVariant), outline (outline, outlineVariant) and inverse (inverseSurface, inverseOnSurface, inversePrimary), scrim.

Surface container roles replace elevation shadows as the main depth cue.

Surface(color = MaterialTheme.colorScheme.primaryContainer) {
    Text("Pairs stay readable", color = MaterialTheme.colorScheme.onPrimaryContainer)
}

Baseline scheme values are available in docs/tokens.json.