---
name: Container color
slug: container-color
category: color
status: published
created: 2026-08-21T00:00:00.000Z
modified: 2026-08-21T00:00:00.000Z
definition: A muted companion to an accent, light enough to fill a chip or a
  card behind ordinary text, so an accent can shade a region without shouting.
aliases:
  - name: primaryContainer
    source: material
  - name: subtle background
    source: radix
  - name: soft variant
    source: radix
  - name: muted fill
    source: community
tags:
  - theming
  - tokens
relations:
  contrastWith:
    - surface-tint
    - state-layer
    - accent-color
    - surface-color
  variantOf: []
  partOf: []
  seeAlso: []
implementations:
  - system: material
    name: Primary container
    url: https://m3.material.io/styles/color/roles
  - system: radix
    name: Steps 3 to 5, component backgrounds
    url: https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale
sources:
  - title: "Material 3: color roles"
    url: https://m3.material.io/styles/color/roles
  - title: "Radix Colors: understanding the scale"
    url: https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale
demo: inline
exhibit: false
useWhen: a soft fill in the accent hue rather than the solid accent
---

Material 3 gives every accent role a quieter twin. `primary` is the solid fill a button takes,
and it is dark enough that only white ink will sit on it; `primaryContainer` is the same hue
pulled up to a pale tone, light enough that ordinary dark text reads on it without effort.
That is the whole idea. A container colour is a fill whose job is to hold content rather than
to be content, so a region can be shaded in the accent hue without everything inside it having
to shout. Radix reaches the same place from the other direction, reserving steps 3, 4 and 5 of
each scale for component backgrounds at rest, hover and pressed.

The word most often confused with it is [on colour](/on-color), and the two are opposite halves
of one pair. An on colour is a foreground, defined by the fill it has to stay legible against;
a container colour is a fill, defined by the fact that a foreground can live on it at all.
Every container ships with its own on colour, `onPrimaryContainer` beside `primaryContainer`,
and that pair is what a [contrast ratio](/contrast-ratio) is measured between, which is why the
specimen prints the ratio instead of claiming the pair clears.

Hold it apart from its two nearest neighbours as well. A [surface tint](/surface-tint) is also
a seed-derived fill, but it encodes height: how much of the primary hue a surface takes is a
function of elevation and says nothing about the content on it. A [static colour](/static-color)
is the opposite kind of thing again, a value declared exempt from derivation, while a container
is derived along with everything else from the [seed colour](/seed-color) that
[Material You](/material-you) pulls out of a wallpaper. In a tonal scheme the containers land
near tone 90 in a light theme and tone 30 in a dark one, with their on colours at the far end
of the same ramp.

In practice a container is how a system says medium emphasis with colour rather than with the
opacity steps an [emphasis level](/emphasis-level) uses, and the two mistakes are easy to name.
The first is filling a whole page region with the solid accent and then hunting for ink that
survives it, which is the problem the container role exists to remove. The second is hardcoding
the pale value: a container belongs in the token layer as a [colour alias](/color-alias)
pointing at a rung, never as a [primitive](/primitive-color-token) copied into a component,
because the rung it points at is exactly what a theme swap has to move.