color · theming
Surface tint
also called surfaceTint (material), tonal elevation (material), tonal surface color (material)
A wash of the primary colour blended into a surface in proportion to its elevation, so height reads as a colour shift rather than only as a shadow.
A drop shadow says height by darkening what is behind an object. That works beautifully on a
pale page and does almost nothing on a near black one, which is why Material 3 gives every
scheme a surfaceTint role and mixes it into a surface in proportion to how high that surface
sits. Level 1 takes about 5 percent of the primary colour, level 3 about 11, level 5 about 14,
and the resulting values are shipped as the surface container roles rather than computed by
each component. Height stops being an effect drawn around a card and becomes a property of the
card’s own fill.
The technique it replaced is worth keeping straight. An elevation overlay lightens a dark surface with translucent white, so every level is the same neutral grey a little brighter. A surface tint mixes the scheme’s own primary in instead, so height reads as colour and a raised sheet stays recognisably part of a palette rather than drifting toward grey. Both answer the same problem, and the second one is the reason a Material 3 dark theme can show four distinct levels without a single shadow anybody can see.
Hold it apart from its neighbours in this batch. A container colour is also a fill derived from the seed colour, but it encodes emphasis and is chosen for the content it has to hold, while a surface tint encodes height and knows nothing about what is on it. A static colour is a value that refuses to re-derive at all, which is the exact opposite of a fill whose whole definition is a function of something else. Everything here moves when Material You picks a new seed, because the tint is the primary and the primary came from the wallpaper.
Two cautions. The tint is a small percentage of a saturated hue, so it shifts the hue of a supposedly neutral surface more than a screenshot suggests: check that ink still clears its background at the top of the ladder, since the fill moved and the on colour usually did not. And a tint ladder needs distinct steps more than it needs many of them. Five levels separated by three percent each is a ladder nobody can read, and the honest fix is fewer levels rather than more shadow.
Which word?
| If you want | say |
|---|---|
| elevation shown by tinting a surface rather than by shadow | surface tint |
| raising a dark surface where a shadow would not show | elevation overlay |
| one overlay opacity expressing hover, focus and pressed | state layer |
| a soft fill in the accent hue rather than the solid accent | container color |
Implementations
Specimens illustrate the concept; for production use, start here.
| material | Surface tint |