Material Colors and Brushes

Colors

Key LightValue DarkValue
PrimaryColor #5946D2 #C7BFFF
PrimaryInverseColor #C8BFFF #2A009F
OnPrimaryColor #FFFFFF #2A009F
PrimaryContainerColor #E5DEFF #4129BA
OnPrimaryContainerColor #170065 #E4DFFF
PrimaryVariantDarkColor #0021C1 #4128BA
PrimaryVariantLightColor #9679FF #C8BFFF
SecondaryColor #6B4EA2 #CDC2DC
OnSecondaryColor #FFFFFF #332D41
SecondaryContainerColor #EBDDFF #433C52
OnSecondaryContainerColor #220555 #EDDFFF
SecondaryVariantDarkColor #3B2574 #441F8A
SecondaryVariantLightColor #9B7BD5 #EBE6F1
TertiaryColor #0061A4 #9FCAFF
OnTertiaryColor #FFFFFF #003258
TertiaryContainerColor #CFE4FF #00497D
OnTertiaryContainerColor #001D36 #D1E4FF
ErrorColor #B3261E #FFB4AB
OnErrorColor #FFFFFF #690005
ErrorContainerColor #F9DEDC #93000A
OnErrorContainerColor #410E0B #FFDAD6
BackgroundColor #FCFBFF #1C1B1F
OnBackgroundColor #1C1B1F #E5E1E6
SurfaceColor #FFFFFF #302D37
OnSurfaceColor #1C1B1F #E6E1E5
SurfaceVariantColor #F2EFF5 #47464F
OnSurfaceVariantColor #8A8494 #C9C5D0
SurfaceInverseColor #313033 #E6E1E5
OnSurfaceInverseColor #F4EFF4 #1C1B1F
SurfaceTintColor #5946D2 #C7BFFF
OutlineColor #79747E #928F99
OutlineVariantColor #C9C5D0 #57545D
ShadowColor #000000 #000000

Opacities

Key Value
HoverOpacity 0.08
FocusedOpacity 0.12
PressedOpacity 0.12
DraggedOpacity 0.16
SelectedOpacity 0.08
MediumOpacity 0.64
LowOpacity 0.32
DisabledOpacity 0.12

Brushes

Key Color Opacity
PrimaryBrush PrimaryColor 1
PrimaryHoverBrush PrimaryColor HoverOpacity
PrimaryFocusedBrush PrimaryColor FocusedOpacity
PrimaryPressedBrush PrimaryColor PressedOpacity
PrimaryDraggedBrush PrimaryColor DraggedOpacity
PrimarySelectedBrush PrimaryColor SelectedOpacity
PrimaryMediumBrush PrimaryColor MediumOpacity
PrimaryLowBrush PrimaryColor LowOpacity
PrimaryDisabledBrush PrimaryColor DisabledOpacity
PrimaryInverseBrush PrimaryInverseColor 1
PrimaryInverseHoverBrush PrimaryInverseColor HoverOpacity
PrimaryInverseFocusedBrush PrimaryInverseColor FocusedOpacity
PrimaryInversePressedBrush PrimaryInverseColor PressedOpacity
PrimaryInverseDraggedBrush PrimaryInverseColor DraggedOpacity
PrimaryInverseSelectedBrush PrimaryInverseColor SelectedOpacity
PrimaryInverseMediumBrush PrimaryInverseColor MediumOpacity
PrimaryInverseLowBrush PrimaryInverseColor LowOpacity
PrimaryInverseDisabledBrush PrimaryInverseColor DisabledOpacity
OnPrimaryBrush OnPrimaryColor 1
OnPrimaryHoverBrush OnPrimaryColor HoverOpacity
OnPrimaryFocusedBrush OnPrimaryColor FocusedOpacity
OnPrimaryPressedBrush OnPrimaryColor PressedOpacity
OnPrimaryDraggedBrush OnPrimaryColor DraggedOpacity
OnPrimarySelectedBrush OnPrimaryColor SelectedOpacity
OnPrimaryMediumBrush OnPrimaryColor MediumOpacity
OnPrimaryLowBrush OnPrimaryColor LowOpacity
OnPrimaryDisabledBrush OnPrimaryColor DisabledOpacity
PrimaryContainerBrush PrimaryContainerColor 1
PrimaryContainerHoverBrush PrimaryContainerColor HoverOpacity
PrimaryContainerFocusedBrush PrimaryContainerColor FocusedOpacity
PrimaryContainerPressedBrush PrimaryContainerColor PressedOpacity
PrimaryContainerDraggedBrush PrimaryContainerColor DraggedOpacity
PrimaryContainerSelectedBrush PrimaryContainerColor SelectedOpacity
PrimaryContainerMediumBrush PrimaryContainerColor MediumOpacity
PrimaryContainerLowBrush PrimaryContainerColor LowOpacity
PrimaryContainerDisabledBrush PrimaryContainerColor DisabledOpacity
OnPrimaryContainerBrush OnPrimaryContainerColor 1
OnPrimaryContainerHoverBrush OnPrimaryContainerColor HoverOpacity
OnPrimaryContainerFocusedBrush OnPrimaryContainerColor FocusedOpacity
OnPrimaryContainerPressedBrush OnPrimaryContainerColor PressedOpacity
OnPrimaryContainerDraggedBrush OnPrimaryContainerColor DraggedOpacity
OnPrimaryContainerSelectedBrush OnPrimaryContainerColor SelectedOpacity
OnPrimaryContainerMediumBrush OnPrimaryContainerColor MediumOpacity
OnPrimaryContainerLowBrush OnPrimaryContainerColor LowOpacity
OnPrimaryContainerDisabledBrush OnPrimaryContainerColor DisabledOpacity
PrimaryVariantLightBrush PrimaryVariantLightColor 1
PrimaryVariantLightHoverBrush PrimaryVariantLightColor HoverOpacity
PrimaryVariantLightFocusedBrush PrimaryVariantLightColor FocusedOpacity
PrimaryVariantLightPressedBrush PrimaryVariantLightColor PressedOpacity
PrimaryVariantLightDraggedBrush PrimaryVariantLightColor DraggedOpacity
PrimaryVariantLightSelectedBrush PrimaryVariantLightColor SelectedOpacity
PrimaryVariantLightMediumBrush PrimaryVariantLightColor MediumOpacity
PrimaryVariantLightLowBrush PrimaryVariantLightColor LowOpacity
PrimaryVariantLightDisabledBrush PrimaryVariantLightColor DisabledOpacity
PrimaryVariantDarkBrush PrimaryVariantDarkColor 1
PrimaryVariantDarkHoverBrush PrimaryVariantDarkColor HoverOpacity
PrimaryVariantDarkFocusedBrush PrimaryVariantDarkColor FocusedOpacity
PrimaryVariantDarkPressedBrush PrimaryVariantDarkColor PressedOpacity
PrimaryVariantDarkDraggedBrush PrimaryVariantDarkColor DraggedOpacity
PrimaryVariantDarkSelectedBrush PrimaryVariantDarkColor SelectedOpacity
PrimaryVariantDarkMediumBrush PrimaryVariantDarkColor MediumOpacity
PrimaryVariantDarkLowBrush PrimaryVariantDarkColor LowOpacity
PrimaryVariantDarkDisabledBrush PrimaryVariantDarkColor DisabledOpacity
SecondaryBrush SecondaryColor 1
SecondaryHoverBrush SecondaryColor HoverOpacity
SecondaryFocusedBrush SecondaryColor FocusedOpacity
SecondaryPressedBrush SecondaryColor PressedOpacity
SecondaryDraggedBrush SecondaryColor DraggedOpacity
SecondarySelectedBrush SecondaryColor SelectedOpacity
SecondaryMediumBrush SecondaryColor MediumOpacity
SecondaryLowBrush SecondaryColor LowOpacity
SecondaryDisabledBrush SecondaryColor DisabledOpacity
OnSecondaryBrush OnSecondaryColor 1
OnSecondaryHoverBrush OnSecondaryColor HoverOpacity
OnSecondaryFocusedBrush OnSecondaryColor FocusedOpacity
OnSecondaryPressedBrush OnSecondaryColor PressedOpacity
OnSecondaryDraggedBrush OnSecondaryColor DraggedOpacity
OnSecondarySelectedBrush OnSecondaryColor SelectedOpacity
OnSecondaryMediumBrush OnSecondaryColor MediumOpacity
OnSecondaryLowBrush OnSecondaryColor LowOpacity
OnSecondaryDisabledBrush OnSecondaryColor DisabledOpacity
SecondaryContainerBrush SecondaryContainerColor 1
SecondaryContainerHoverBrush SecondaryContainerColor HoverOpacity
SecondaryContainerFocusedBrush SecondaryContainerColor FocusedOpacity
SecondaryContainerPressedBrush SecondaryContainerColor PressedOpacity
SecondaryContainerDraggedBrush SecondaryContainerColor DraggedOpacity
SecondaryContainerSelectedBrush SecondaryContainerColor SelectedOpacity
SecondaryContainerMediumBrush SecondaryContainerColor MediumOpacity
SecondaryContainerLowBrush SecondaryContainerColor LowOpacity
SecondaryContainerDisabledBrush SecondaryContainerColor DisabledOpacity
OnSecondaryContainerBrush OnSecondaryContainerColor 1
OnSecondaryContainerHoverBrush OnSecondaryContainerColor HoverOpacity
OnSecondaryContainerFocusedBrush OnSecondaryContainerColor FocusedOpacity
OnSecondaryContainerPressedBrush OnSecondaryContainerColor PressedOpacity
OnSecondaryContainerDraggedBrush OnSecondaryContainerColor DraggedOpacity
OnSecondaryContainerSelectedBrush OnSecondaryContainerColor SelectedOpacity
OnSecondaryContainerMediumBrush OnSecondaryContainerColor MediumOpacity
OnSecondaryContainerLowBrush OnSecondaryContainerColor LowOpacity
OnSecondaryContainerDisabledBrush OnSecondaryContainerColor DisabledOpacity
SecondaryVariantLightBrush SecondaryVariantLightColor 1
SecondaryVariantLightHoverBrush SecondaryVariantLightColor HoverOpacity
SecondaryVariantLightFocusedBrush SecondaryVariantLightColor FocusedOpacity
SecondaryVariantLightPressedBrush SecondaryVariantLightColor PressedOpacity
SecondaryVariantLightDraggedBrush SecondaryVariantLightColor DraggedOpacity
SecondaryVariantLightSelectedBrush SecondaryVariantLightColor SelectedOpacity
SecondaryVariantLightMediumBrush SecondaryVariantLightColor MediumOpacity
SecondaryVariantLightLowBrush SecondaryVariantLightColor LowOpacity
SecondaryVariantLightDisabledBrush SecondaryVariantLightColor DisabledOpacity
SecondaryVariantDarkBrush SecondaryVariantDarkColor 1
SecondaryVariantDarkHoverBrush SecondaryVariantDarkColor HoverOpacity
SecondaryVariantDarkFocusedBrush SecondaryVariantDarkColor FocusedOpacity
SecondaryVariantDarkPressedBrush SecondaryVariantDarkColor PressedOpacity
SecondaryVariantDarkDraggedBrush SecondaryVariantDarkColor DraggedOpacity
SecondaryVariantDarkSelectedBrush SecondaryVariantDarkColor SelectedOpacity
SecondaryVariantDarkMediumBrush SecondaryVariantDarkColor MediumOpacity
SecondaryVariantDarkLowBrush SecondaryVariantDarkColor LowOpacity
SecondaryVariantDarkDisabledBrush SecondaryVariantDarkColor DisabledOpacity
TertiaryBrush TertiaryColor 1
TertiaryHoverBrush TertiaryColor HoverOpacity
TertiaryFocusedBrush TertiaryColor FocusedOpacity
TertiaryPressedBrush TertiaryColor PressedOpacity
TertiaryDraggedBrush TertiaryColor DraggedOpacity
TertiarySelectedBrush TertiaryColor SelectedOpacity
TertiaryMediumBrush TertiaryColor MediumOpacity
TertiaryLowBrush TertiaryColor LowOpacity
TertiaryDisabledBrush TertiaryColor DisabledOpacity
OnTertiaryBrush OnTertiaryColor 1
OnTertiaryHoverBrush OnTertiaryColor HoverOpacity
OnTertiaryFocusedBrush OnTertiaryColor FocusedOpacity
OnTertiaryPressedBrush OnTertiaryColor PressedOpacity
OnTertiaryDraggedBrush OnTertiaryColor DraggedOpacity
OnTertiarySelectedBrush OnTertiaryColor SelectedOpacity
OnTertiaryMediumBrush OnTertiaryColor MediumOpacity
OnTertiaryLowBrush OnTertiaryColor LowOpacity
OnTertiaryDisabledBrush OnTertiaryColor DisabledOpacity
TertiaryContainerBrush TertiaryContainerColor 1
TertiaryContainerHoverBrush TertiaryContainerColor HoverOpacity
TertiaryContainerFocusedBrush TertiaryContainerColor FocusedOpacity
TertiaryContainerPressedBrush TertiaryContainerColor PressedOpacity
TertiaryContainerDraggedBrush TertiaryContainerColor DraggedOpacity
TertiaryContainerSelectedBrush TertiaryContainerColor SelectedOpacity
TertiaryContainerMediumBrush TertiaryContainerColor MediumOpacity
TertiaryContainerLowBrush TertiaryContainerColor LowOpacity
TertiaryContainerDisabledBrush TertiaryContainerColor DisabledOpacity
OnTertiaryContainerBrush OnTertiaryContainerColor 1
OnTertiaryContainerHoverBrush OnTertiaryContainerColor HoverOpacity
OnTertiaryContainerFocusedBrush OnTertiaryContainerColor FocusedOpacity
OnTertiaryContainerPressedBrush OnTertiaryContainerColor PressedOpacity
OnTertiaryContainerDraggedBrush OnTertiaryContainerColor DraggedOpacity
OnTertiaryContainerSelectedBrush OnTertiaryContainerColor SelectedOpacity
OnTertiaryContainerMediumBrush OnTertiaryContainerColor MediumOpacity
OnTertiaryContainerLowBrush OnTertiaryContainerColor LowOpacity
OnTertiaryContainerDisabledBrush OnTertiaryContainerColor DisabledOpacity
ErrorBrush ErrorColor 1
ErrorHoverBrush ErrorColor HoverOpacity
ErrorFocusedBrush ErrorColor FocusedOpacity
ErrorPressedBrush ErrorColor PressedOpacity
ErrorDraggedBrush ErrorColor DraggedOpacity
ErrorSelectedBrush ErrorColor SelectedOpacity
ErrorMediumBrush ErrorColor MediumOpacity
ErrorLowBrush ErrorColor LowOpacity
ErrorDisabledBrush ErrorColor DisabledOpacity
OnErrorBrush OnErrorColor 1
OnErrorHoverBrush OnErrorColor HoverOpacity
OnErrorFocusedBrush OnErrorColor FocusedOpacity
OnErrorPressedBrush OnErrorColor PressedOpacity
OnErrorDraggedBrush OnErrorColor DraggedOpacity
OnErrorSelectedBrush OnErrorColor SelectedOpacity
OnErrorMediumBrush OnErrorColor MediumOpacity
OnErrorLowBrush OnErrorColor LowOpacity
OnErrorDisabledBrush OnErrorColor DisabledOpacity
ErrorContainerBrush ErrorContainerColor 1
ErrorContainerHoverBrush ErrorContainerColor HoverOpacity
ErrorContainerFocusedBrush ErrorContainerColor FocusedOpacity
ErrorContainerPressedBrush ErrorContainerColor PressedOpacity
ErrorContainerDraggedBrush ErrorContainerColor DraggedOpacity
ErrorContainerSelectedBrush ErrorContainerColor SelectedOpacity
ErrorContainerMediumBrush ErrorContainerColor MediumOpacity
ErrorContainerLowBrush ErrorContainerColor LowOpacity
ErrorContainerDisabledBrush ErrorContainerColor DisabledOpacity
OnErrorContainerBrush OnErrorContainerColor 1
OnErrorContainerHoverBrush OnErrorContainerColor HoverOpacity
OnErrorContainerFocusedBrush OnErrorContainerColor FocusedOpacity
OnErrorContainerPressedBrush OnErrorContainerColor PressedOpacity
OnErrorContainerDraggedBrush OnErrorContainerColor DraggedOpacity
OnErrorContainerSelectedBrush OnErrorContainerColor SelectedOpacity
OnErrorContainerMediumBrush OnErrorContainerColor MediumOpacity
OnErrorContainerLowBrush OnErrorContainerColor LowOpacity
OnErrorContainerDisabledBrush OnErrorContainerColor DisabledOpacity
BackgroundBrush BackgroundColor 1
BackgroundHoverBrush BackgroundColor HoverOpacity
BackgroundFocusedBrush BackgroundColor FocusedOpacity
BackgroundPressedBrush BackgroundColor PressedOpacity
BackgroundDraggedBrush BackgroundColor DraggedOpacity
BackgroundSelectedBrush BackgroundColor SelectedOpacity
BackgroundMediumBrush BackgroundColor MediumOpacity
BackgroundLowBrush BackgroundColor LowOpacity
BackgroundDisabledBrush BackgroundColor DisabledOpacity
OnBackgroundBrush OnBackgroundColor 1
OnBackgroundHoverBrush OnBackgroundColor HoverOpacity
OnBackgroundFocusedBrush OnBackgroundColor FocusedOpacity
OnBackgroundPressedBrush OnBackgroundColor PressedOpacity
OnBackgroundDraggedBrush OnBackgroundColor DraggedOpacity
OnBackgroundSelectedBrush OnBackgroundColor SelectedOpacity
OnBackgroundMediumBrush OnBackgroundColor MediumOpacity
OnBackgroundLowBrush OnBackgroundColor LowOpacity
OnBackgroundDisabledBrush OnBackgroundColor DisabledOpacity
SurfaceBrush SurfaceColor 1
SurfaceHoverBrush SurfaceColor HoverOpacity
SurfaceFocusedBrush SurfaceColor FocusedOpacity
SurfacePressedBrush SurfaceColor PressedOpacity
SurfaceDraggedBrush SurfaceColor DraggedOpacity
SurfaceSelectedBrush SurfaceColor SelectedOpacity
SurfaceMediumBrush SurfaceColor MediumOpacity
SurfaceLowBrush SurfaceColor LowOpacity
SurfaceDisabledBrush SurfaceColor DisabledOpacity
OnSurfaceBrush OnSurfaceColor 1
OnSurfaceHoverBrush OnSurfaceColor HoverOpacity
OnSurfaceFocusedBrush OnSurfaceColor FocusedOpacity
OnSurfacePressedBrush OnSurfaceColor PressedOpacity
OnSurfaceDraggedBrush OnSurfaceColor DraggedOpacity
OnSurfaceSelectedBrush OnSurfaceColor SelectedOpacity
OnSurfaceMediumBrush OnSurfaceColor MediumOpacity
OnSurfaceLowBrush OnSurfaceColor DisabledOpacity
OnSurfaceDisabledBrush OnSurfaceColor DisabledOpacity
SurfaceVariantBrush SurfaceVariantColor 1
SurfaceVariantHoverBrush SurfaceVariantColor HoverOpacity
SurfaceVariantFocusedBrush SurfaceVariantColor FocusedOpacity
SurfaceVariantPressedBrush SurfaceVariantColor PressedOpacity
SurfaceVariantDraggedBrush SurfaceVariantColor DraggedOpacity
SurfaceVariantSelectedBrush SurfaceVariantColor SelectedOpacity
SurfaceVariantMediumBrush SurfaceVariantColor MediumOpacity
SurfaceVariantLowBrush SurfaceVariantColor LowOpacity
SurfaceVariantDisabledBrush SurfaceVariantColor DisabledOpacity
OnSurfaceVariantBrush OnSurfaceVariantColor 1
OnSurfaceVariantHoverBrush OnSurfaceVariantColor HoverOpacity
OnSurfaceVariantFocusedBrush OnSurfaceVariantColor FocusedOpacity
OnSurfaceVariantPressedBrush OnSurfaceVariantColor PressedOpacity
OnSurfaceVariantDraggedBrush OnSurfaceVariantColor DraggedOpacity
OnSurfaceVariantSelectedBrush OnSurfaceVariantColor SelectedOpacity
OnSurfaceVariantMediumBrush OnSurfaceVariantColor MediumOpacity
OnSurfaceVariantLowBrush OnSurfaceVariantColor LowOpacity
OnSurfaceVariantDisabledBrush OnSurfaceVariantColor DisabledOpacity
SurfaceInverseBrush SurfaceInverseColor 1
SurfaceInverseHoverBrush SurfaceInverseColor HoverOpacity
SurfaceInverseFocusedBrush SurfaceInverseColor FocusedOpacity
SurfaceInversePressedBrush SurfaceInverseColor PressedOpacity
SurfaceInverseDraggedBrush SurfaceInverseColor DraggedOpacity
SurfaceInverseSelectedBrush SurfaceInverseColor SelectedOpacity
SurfaceInverseMediumBrush SurfaceInverseColor MediumOpacity
SurfaceInverseLowBrush SurfaceInverseColor LowOpacity
SurfaceInverseDisabledBrush SurfaceInverseColor DisabledOpacity
OnSurfaceInverseBrush OnSurfaceInverseColor 1
OnSurfaceInverseHoverBrush OnSurfaceInverseColor HoverOpacity
OnSurfaceInverseFocusedBrush OnSurfaceInverseColor FocusedOpacity
OnSurfaceInversePressedBrush OnSurfaceInverseColor PressedOpacity
OnSurfaceInverseDraggedBrush OnSurfaceInverseColor DraggedOpacity
OnSurfaceInverseSelectedBrush OnSurfaceInverseColor SelectedOpacity
OnSurfaceInverseMediumBrush OnSurfaceInverseColor MediumOpacity
OnSurfaceInverseLowBrush OnSurfaceInverseColor LowOpacity
OnSurfaceInverseDisabledBrush OnSurfaceInverseColor DisabledOpacity
OutlineBrush OutlineColor 1
OutlineHoverBrush OutlineColor HoverOpacity
OutlineFocusedBrush OutlineColor FocusedOpacity
OutlinePressedBrush OutlineColor PressedOpacity
OutlineDraggedBrush OutlineColor DraggedOpacity
OutlineSelectedBrush OutlineColor SelectedOpacity
OutlineMediumBrush OutlineColor MediumOpacity
OutlineLowBrush OutlineColor LowOpacity
OutlineDisabledBrush OutlineColor DisabledOpacity
OutlineVariantBrush OutlineVariantColor 1
OutlineVariantHoverBrush OutlineVariantColor HoverOpacity
OutlineVariantFocusedBrush OutlineVariantColor FocusedOpacity
OutlineVariantPressedBrush OutlineVariantColor PressedOpacity
OutlineVariantDraggedBrush OutlineVariantColor DraggedOpacity
OutlineVariantSelectedBrush OutlineVariantColor SelectedOpacity
OutlineVariantMediumBrush OutlineVariantColor MediumOpacity
OutlineVariantLowBrush OutlineVariantColor LowOpacity
OutlineVariantDisabledBrush OutlineVariantColor DisabledOpacity
SurfaceTintBrush SurfaceTintColor 1