Material Design 3 "Color" tokens
Browse tokens
Color
Primary colors
| Token | Value |
|---|---|
Primarymd.sys.color.primary | #6750A4 md.sys.color.primary
|
On primarymd.sys.color.on-primary | #FFFFFF md.sys.color.on-primary
|
Primary containermd.sys.color.primary-container | #EADDFF md.sys.color.primary-container
|
On primary containermd.sys.color.on-primary-container | #4F378B md.sys.color.on-primary-container
|
Secondary colors
| Token | Value |
|---|---|
Secondarymd.sys.color.secondary | #625B71 md.sys.color.secondary
|
On secondarymd.sys.color.on-secondary | #FFFFFF md.sys.color.on-secondary
|
Secondary containermd.sys.color.secondary-container | #E8DEF8 md.sys.color.secondary-container
|
On secondary containermd.sys.color.on-secondary-container | #4A4458 md.sys.color.on-secondary-container
|
Tertiary colors
| Token | Value |
|---|---|
Tertiarymd.sys.color.tertiary | #7D5260 md.sys.color.tertiary
|
On tertiarymd.sys.color.on-tertiary | #FFFFFF md.sys.color.on-tertiary
|
Tertiary containermd.sys.color.tertiary-container | #FFD8E4 md.sys.color.tertiary-container
|
On tertiary containermd.sys.color.on-tertiary-container | #633B48 md.sys.color.on-tertiary-container
|
Error colors
| Token | Value |
|---|---|
Errormd.sys.color.error | #B3261E md.sys.color.error
|
On errormd.sys.color.on-error | #FFFFFF md.sys.color.on-error
|
Error containermd.sys.color.error-container | #F9DEDC md.sys.color.error-container
|
On error containermd.sys.color.on-error-container | #8C1D18 md.sys.color.on-error-container
|
Surface colors
| Token | Value |
|---|---|
Surfacemd.sys.color.surface | #FEF7FF md.sys.color.surface
|
On surfacemd.sys.color.on-surface | #1D1B20 md.sys.color.on-surface
|
Surface Variantmd.sys.color.surface-variant | #E7E0EC md.sys.color.surface-variant
|
On surface variantmd.sys.color.on-surface-variant | #49454F md.sys.color.on-surface-variant
|
Surface Container Highestmd.sys.color.surface-container-highest | #E6E0E9 md.sys.color.surface-container-highest
|
Surface Container Highmd.sys.color.surface-container-high | #ECE6F0 md.sys.color.surface-container-high
|
Surface Containermd.sys.color.surface-container | #F3EDF7 md.sys.color.surface-container
|
Surface Container Lowmd.sys.color.surface-container-low | #F7F2FA md.sys.color.surface-container-low
|
Surface Container Lowestmd.sys.color.surface-container-lowest | #FFFFFF md.sys.color.surface-container-lowest
|
Inverse surfacemd.sys.color.inverse-surface | #322F35 md.sys.color.inverse-surface
|
Inverse on surfacemd.sys.color.inverse-on-surface | #F5EFF7 md.sys.color.inverse-on-surface
|
Surface tintmd.sys.color.surface-tint | #6750A4 md.sys.color.surface-tint
|
Surface tint colormd.sys.color.surface-tint-color | #6750A4 md.sys.color.surface-tint-color
|
Outline colors
| Token | Value |
|---|---|
Outlinemd.sys.color.outline | #79747E md.sys.color.outline
|
Outline Variantmd.sys.color.outline-variant | #CAC4D0 md.sys.color.outline-variant
|
Add-ons
Add-on primary colors
| Token | Value |
|---|---|
Primary fixedmd.sys.color.primary-fixed | #EADDFF md.sys.color.primary-fixed
|
On primary fixedmd.sys.color.on-primary-fixed | #21005D md.sys.color.on-primary-fixed
|
Primary fixed dimmd.sys.color.primary-fixed-dim | #D0BCFF md.sys.color.primary-fixed-dim
|
On primary fixed variantmd.sys.color.on-primary-fixed-variant | #4F378B md.sys.color.on-primary-fixed-variant
|
Inverse primarymd.sys.color.inverse-primary | #D0BCFF md.sys.color.inverse-primary
|
Add-on secondary colors
| Token | Value |
|---|---|
Secondary fixedmd.sys.color.secondary-fixed | #E8DEF8 md.sys.color.secondary-fixed
|
On secondary fixedmd.sys.color.on-secondary-fixed | #1D192B md.sys.color.on-secondary-fixed
|
Secondary fixed dimmd.sys.color.secondary-fixed-dim | #CCC2DC md.sys.color.secondary-fixed-dim
|
On secondary fixed variantmd.sys.color.on-secondary-fixed-variant | #4A4458 md.sys.color.on-secondary-fixed-variant
|
Add-on tertiary colors
| Token | Value |
|---|---|
Tertiary fixedmd.sys.color.tertiary-fixed | #FFD8E4 md.sys.color.tertiary-fixed
|
On tertiary fixedmd.sys.color.on-tertiary-fixed | #31111D md.sys.color.on-tertiary-fixed
|
Tertiary fixed dimmd.sys.color.tertiary-fixed-dim | #EFB8C8 md.sys.color.tertiary-fixed-dim
|
On tertiary fixed variantmd.sys.color.on-tertiary-fixed-variant | #633B48 md.sys.color.on-tertiary-fixed-variant
|
Add-on surface colors
| Token | Value |
|---|---|
Backgroundmd.sys.color.background | #FEF7FF md.sys.color.background
|
On backgroundmd.sys.color.on-background | #1D1B20 md.sys.color.on-background
|
Surface Brightmd.sys.color.surface-bright | #FEF7FF md.sys.color.surface-bright
|
Surface Dimmd.sys.color.surface-dim | #DED8E1 md.sys.color.surface-dim
|
Scrimmd.sys.color.scrim | #000000 md.sys.color.scrim
|
Shadowmd.sys.color.shadow | #000000 md.sys.color.shadow
|