# 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.

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

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