Primary
Use primary roles for the most prominent components across the UI, such as high-emphasis buttons, and active states.
Light Mode
Primary
#00629E
rgb(0, 98, 158)
On Primary
#FFFFFF
rgb(255, 255, 255)
Primary Container
#CFE5FF
rgb(207, 229, 255)
On Primary Container
#001D34
rgb(0, 29, 52)
Primary Fixed
#CFE5FF
rgb(207, 229, 255)
On Primary Fixed
#001D34
rgb(0, 29, 52)
Primary Fixed Dim
#9ACBFF
rgb(154, 203, 255)
On Primary Fixed Variant
#004A78
rgb(0, 74, 120)
Dark Mode
Primary
#9ACBFF
rgb(154, 203, 255)
On Primary
#003355
rgb(0, 51, 85)
Primary Container
#004A78
rgb(0, 74, 120)
On Primary Container
#CFE5FF
rgb(207, 229, 255)
Secondary
Use secondary color to provide more ways to accent and distinguish your product. Having a secondary color is optional, and should be applied sparingly to accent select parts of your UI.
Light Mode
Secondary
#526070
rgb(82, 96, 112)
On Secondary
#FFFFFF
rgb(255, 255, 255)
Secondary Container
#D6E4F7
rgb(214, 228, 247)
On Secondary Container
#0F1D2A
rgb(15, 29, 42)
Secondary Fixed
#D6E4F7
rgb(214, 228, 247)
On Secondary Fixed
#0F1D2A
rgb(15, 29, 42)
Secondary Fixed Dim
#BAC8DA
rgb(186, 200, 218)
On Secondary Fixed Variant
#3A4857
rgb(58, 72, 87)
Dark Mode
Secondary
#BAC8DA
rgb(186, 200, 218)
On Secondary
#243240
rgb(36, 50, 64)
Secondary Container
#3A4857
rgb(58, 72, 87)
On Secondary Container
#D6E4F7
rgb(214, 228, 247)
Tertiary
The tertiary color roles can be applied (sparingly) at the designer's discretion. They're intended to support broader color expression.
Light Mode
Tertiary
#835500
rgb(131, 85, 0)
On Tertiary
#FFFFFF
rgb(255, 255, 255)
Tertiary Container
#FFDDB4
rgb(255, 221, 180)
On Tertiary Container
#291800
rgb(41, 24, 0)
Tertiary Fixed
#FFDDB4
rgb(255, 221, 180)
On Tertiary Fixed
#291800
rgb(41, 24, 0)
Tertiary Fixed Dim
#FFB954
rgb(255, 185, 84)
On Tertiary Fixed Variant
#633F00
rgb(99, 63, 0)
Dark Mode
Tertiary
#FFB954
rgb(255, 185, 84)
On Tertiary
#452B00
rgb(69, 43, 0)
Tertiary Container
#633F00
rgb(99, 63, 0)
On Tertiary Container
#FFDDB4
rgb(255, 221, 180)
Error
Error is used as the color of highest importance. Elements using error must convey messaging that implies that an action is impossible, blocked, or has resulted in an error.
Light Mode
Error
#BA1A1A
rgb(186, 26, 26)
On Error
#FFFFFF
rgb(255, 255, 255)
Error Container
#FFDAD6
rgb(255, 218, 214)
On Error Container
#410002
rgb(65, 0, 2)
Dark Mode
Error
#FFB4AB
rgb(255, 180, 171)
On Error
#690005
rgb(105, 0, 5)
Error Container
#93000A
rgb(147, 0, 10)
On Error Container
#FFDAD6
rgb(255, 218, 214)