Colour
Colour roles say what a colour is for, not what it looks like. Each role has an on partner for the content that sits on it, and light and dark are two values of the same names.
Selected token
Select any block below to see how it resolves.
--sn-role-color-on-surface-variantresolves down these levels to a literalRoles
Roles are drawn the way they are used: a role above its on partner, a container beside it. Surfaces form a ladder from dim to bright, and inverse is its own set for dark bands.
primary · on-primary · primary-container · on-primary-containersecondary · on-secondary · secondary-container · on-secondary-containererror · on-error · error-container · on-error-containersurface-dim · surface · surface-bright · surface-container-lowest … highestinverse-surface · inverse-on-surface · inverse-primarydisabled · on-disabledAccent sets
Accents are complete sets shaped like primary: the colour, what sits on it, a soft container with its own on colour, and a version for inverse bands. Any accent can drive a mark, a stamp or a band, and a preset decides which hues fill the seven slots.
Where the colours come from
Every role above resolves to a tone in a palette. Palettes are built the same way as the type scale: a seed, written in a space, structured by a scale.
Loading the palette data…