Color
The color roles mtrl components are painted with, in each theme and mode.
Values read from mtrl's compiled theme CSS · mtrl 0.10.0-next.3
Primary
-
Primary #6750a4
--mtrl-sys-color-primary6.44:1 with on-primary AA passInherited from -
On primary #ffffff
--mtrl-sys-color-on-primary6.44:1 with primary AA passInherited from -
Primary container #eaddff
--mtrl-sys-color-primary-container13.32:1 with on-primary-container AA passInherited from -
On primary container #21005d
--mtrl-sys-color-on-primary-container13.32:1 with primary-container AA passInherited from
Secondary
-
Secondary #625b71
--mtrl-sys-color-secondary6.45:1 with on-secondary AA passInherited from -
On secondary #ffffff
--mtrl-sys-color-on-secondary6.45:1 with secondary AA passInherited from -
Secondary container #e8def8
--mtrl-sys-color-secondary-container13.24:1 with on-secondary-container AA passInherited from -
On secondary container #1d192b
--mtrl-sys-color-on-secondary-container13.24:1 with secondary-container AA passInherited from
Tertiary
-
Tertiary #7d5260
--mtrl-sys-color-tertiary6.47:1 with on-tertiary AA passInherited from -
On tertiary #ffffff
--mtrl-sys-color-on-tertiary6.47:1 with tertiary AA passInherited from -
Tertiary container #ffd8e4
--mtrl-sys-color-tertiary-container13.18:1 with on-tertiary-container AA passInherited from -
On tertiary container #31111d
--mtrl-sys-color-on-tertiary-container13.18:1 with tertiary-container AA passInherited from
Error
-
Error #b3261e
--mtrl-sys-color-error6.54:1 with on-error AA passInherited from -
On error #ffffff
--mtrl-sys-color-on-error6.54:1 with error AA passInherited from -
Error container #f9dedc
--mtrl-sys-color-error-container12.77:1 with on-error-container AA passInherited from -
On error container #410e0b
--mtrl-sys-color-on-error-container12.77:1 with error-container AA passInherited from
Surface
-
Surface #fef7ff
--mtrl-sys-color-surface16.23:1 with on-surface AA passInherited from -
Surface dim #ded8e1
--mtrl-sys-color-surface-dim12.21:1 with on-surface AA passInherited from -
Surface bright #fef7ff
--mtrl-sys-color-surface-bright16.23:1 with on-surface AA passInherited from -
Surface container lowest #ffffff
--mtrl-sys-color-surface-container-lowest17.07:1 with on-surface AA passInherited from -
Surface container low #f7f2fa
--mtrl-sys-color-surface-container-low15.48:1 with on-surface AA passInherited from -
Surface container #f3edf7
--mtrl-sys-color-surface-container14.85:1 with on-surface AA passInherited from -
Surface container high #ece6f0
--mtrl-sys-color-surface-container-high13.94:1 with on-surface AA passInherited from -
Surface container highest #e6e0e9
--mtrl-sys-color-surface-container-highest13.17:1 with on-surface AA passInherited from -
On surface #1d1b20
--mtrl-sys-color-on-surface16.23:1 with surface AA passInherited from -
Surface variant #e7e0ec
--mtrl-sys-color-surface-variant13.23:1 with on-surface AA passInherited from -
On surface variant #49454f
--mtrl-sys-color-on-surface-variant8.88:1 with surface AA passInherited from
Outline
-
Outline #79747e
--mtrl-sys-color-outline:1 with AA failInherited from -
Outline variant #cac4d0
--mtrl-sys-color-outline-variant:1 with AA failInherited from
Inverse
-
Inverse surface #322f35
--mtrl-sys-color-inverse-surface11.65:1 with inverse-on-surface AA passInherited from -
Inverse on surface #f5eff7
--mtrl-sys-color-inverse-on-surface11.65:1 with inverse-surface AA passInherited from -
Inverse primary #d0bcff
--mtrl-sys-color-inverse-primary7.73:1 with inverse-surface AA passInherited from
Fixed
-
Primary fixed #eaddff
--mtrl-sys-color-primary-fixed13.32:1 with on-primary-fixed AA passInherited from -
Primary fixed dim #d0bcff
--mtrl-sys-color-primary-fixed-dim10.08:1 with on-primary-fixed AA passInherited from -
On primary fixed #21005d
--mtrl-sys-color-on-primary-fixed13.32:1 with primary-fixed AA passInherited from -
On primary fixed variant #4f378b
--mtrl-sys-color-on-primary-fixed-variant7.23:1 with primary-fixed AA passInherited from -
Secondary fixed #e8def8
--mtrl-sys-color-secondary-fixed13.24:1 with on-secondary-fixed AA passInherited from -
Secondary fixed dim #ccc2dc
--mtrl-sys-color-secondary-fixed-dim10.05:1 with on-secondary-fixed AA passInherited from -
On secondary fixed #1d192b
--mtrl-sys-color-on-secondary-fixed13.24:1 with secondary-fixed AA passInherited from -
On secondary fixed variant #4a4458
--mtrl-sys-color-on-secondary-fixed-variant7.19:1 with secondary-fixed AA passInherited from -
Tertiary fixed #ffd8e4
--mtrl-sys-color-tertiary-fixed13.18:1 with on-tertiary-fixed AA passInherited from -
Tertiary fixed dim #efb8c8
--mtrl-sys-color-tertiary-fixed-dim10.06:1 with on-tertiary-fixed AA passInherited from -
On tertiary fixed #31111d
--mtrl-sys-color-on-tertiary-fixed13.18:1 with tertiary-fixed AA passInherited from -
On tertiary fixed variant #633b48
--mtrl-sys-color-on-tertiary-fixed-variant7.20:1 with tertiary-fixed AA passInherited from
Other
-
Shadow #000000
--mtrl-sys-color-shadow:1 with AA failInherited from -
Scrim #000000
--mtrl-sys-color-scrim:1 with AA failInherited from
Status
mtrl adds these to every theme, beyond the M3 scheme.
-
Success #007b5a
--mtrl-sys-color-success5.28:1 with on-success AA passInherited from -
On success #ffffff
--mtrl-sys-color-on-success5.28:1 with success AA passInherited from -
Warning #dd6d06
--mtrl-sys-color-warning3.35:1 with on-warning AA failInherited from -
On warning #ffffff
--mtrl-sys-color-on-warning3.35:1 with warning AA failInherited from -
Info #0061a4
--mtrl-sys-color-info6.47:1 with on-info AA passInherited from -
On info #ffffff
--mtrl-sys-color-on-info6.47:1 with info AA passInherited from