/Styles
STYLES / COLOR

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-primary
    6.44:1 with on-primary AA pass
  • On primary #ffffff
    --mtrl-sys-color-on-primary
    6.44:1 with primary AA pass
  • Primary container #eaddff
    --mtrl-sys-color-primary-container
    13.32:1 with on-primary-container AA pass
  • On primary container #21005d
    --mtrl-sys-color-on-primary-container
    13.32:1 with primary-container AA pass

Secondary

  • Secondary #625b71
    --mtrl-sys-color-secondary
    6.45:1 with on-secondary AA pass
  • On secondary #ffffff
    --mtrl-sys-color-on-secondary
    6.45:1 with secondary AA pass
  • Secondary container #e8def8
    --mtrl-sys-color-secondary-container
    13.24:1 with on-secondary-container AA pass
  • On secondary container #1d192b
    --mtrl-sys-color-on-secondary-container
    13.24:1 with secondary-container AA pass

Tertiary

  • Tertiary #7d5260
    --mtrl-sys-color-tertiary
    6.47:1 with on-tertiary AA pass
  • On tertiary #ffffff
    --mtrl-sys-color-on-tertiary
    6.47:1 with tertiary AA pass
  • Tertiary container #ffd8e4
    --mtrl-sys-color-tertiary-container
    13.18:1 with on-tertiary-container AA pass
  • On tertiary container #31111d
    --mtrl-sys-color-on-tertiary-container
    13.18:1 with tertiary-container AA pass

Error

  • Error #b3261e
    --mtrl-sys-color-error
    6.54:1 with on-error AA pass
  • On error #ffffff
    --mtrl-sys-color-on-error
    6.54:1 with error AA pass
  • Error container #f9dedc
    --mtrl-sys-color-error-container
    12.77:1 with on-error-container AA pass
  • On error container #410e0b
    --mtrl-sys-color-on-error-container
    12.77:1 with error-container AA pass

Surface

  • Surface #fef7ff
    --mtrl-sys-color-surface
    16.23:1 with on-surface AA pass
  • Surface dim #ded8e1
    --mtrl-sys-color-surface-dim
    12.21:1 with on-surface AA pass
  • Surface bright #fef7ff
    --mtrl-sys-color-surface-bright
    16.23:1 with on-surface AA pass
  • Surface container lowest #ffffff
    --mtrl-sys-color-surface-container-lowest
    17.07:1 with on-surface AA pass
  • Surface container low #f7f2fa
    --mtrl-sys-color-surface-container-low
    15.48:1 with on-surface AA pass
  • Surface container #f3edf7
    --mtrl-sys-color-surface-container
    14.85:1 with on-surface AA pass
  • Surface container high #ece6f0
    --mtrl-sys-color-surface-container-high
    13.94:1 with on-surface AA pass
  • Surface container highest #e6e0e9
    --mtrl-sys-color-surface-container-highest
    13.17:1 with on-surface AA pass
  • On surface #1d1b20
    --mtrl-sys-color-on-surface
    16.23:1 with surface AA pass
  • Surface variant #e7e0ec
    --mtrl-sys-color-surface-variant
    13.23:1 with on-surface AA pass
  • On surface variant #49454f
    --mtrl-sys-color-on-surface-variant
    8.88:1 with surface AA pass

Outline

  • Outline #79747e
    --mtrl-sys-color-outline
  • Outline variant #cac4d0
    --mtrl-sys-color-outline-variant

Inverse

  • Inverse surface #322f35
    --mtrl-sys-color-inverse-surface
    11.65:1 with inverse-on-surface AA pass
  • Inverse on surface #f5eff7
    --mtrl-sys-color-inverse-on-surface
    11.65:1 with inverse-surface AA pass
  • Inverse primary #d0bcff
    --mtrl-sys-color-inverse-primary
    7.73:1 with inverse-surface AA pass

Fixed

  • Primary fixed #eaddff
    --mtrl-sys-color-primary-fixed
    13.32:1 with on-primary-fixed AA pass
  • Primary fixed dim #d0bcff
    --mtrl-sys-color-primary-fixed-dim
    10.08:1 with on-primary-fixed AA pass
  • On primary fixed #21005d
    --mtrl-sys-color-on-primary-fixed
    13.32:1 with primary-fixed AA pass
  • On primary fixed variant #4f378b
    --mtrl-sys-color-on-primary-fixed-variant
    7.23:1 with primary-fixed AA pass
  • Secondary fixed #e8def8
    --mtrl-sys-color-secondary-fixed
    13.24:1 with on-secondary-fixed AA pass
  • Secondary fixed dim #ccc2dc
    --mtrl-sys-color-secondary-fixed-dim
    10.05:1 with on-secondary-fixed AA pass
  • On secondary fixed #1d192b
    --mtrl-sys-color-on-secondary-fixed
    13.24:1 with secondary-fixed AA pass
  • On secondary fixed variant #4a4458
    --mtrl-sys-color-on-secondary-fixed-variant
    7.19:1 with secondary-fixed AA pass
  • Tertiary fixed #ffd8e4
    --mtrl-sys-color-tertiary-fixed
    13.18:1 with on-tertiary-fixed AA pass
  • Tertiary fixed dim #efb8c8
    --mtrl-sys-color-tertiary-fixed-dim
    10.06:1 with on-tertiary-fixed AA pass
  • On tertiary fixed #31111d
    --mtrl-sys-color-on-tertiary-fixed
    13.18:1 with tertiary-fixed AA pass
  • On tertiary fixed variant #633b48
    --mtrl-sys-color-on-tertiary-fixed-variant
    7.20:1 with tertiary-fixed AA pass

Other

  • Shadow #000000
    --mtrl-sys-color-shadow
  • Scrim #000000
    --mtrl-sys-color-scrim

Status

mtrl adds these to every theme, beyond the M3 scheme.

  • Success #007b5a
    --mtrl-sys-color-success
    5.28:1 with on-success AA pass
  • On success #ffffff
    --mtrl-sys-color-on-success
    5.28:1 with success AA pass
  • Warning #dd6d06
    --mtrl-sys-color-warning
    3.35:1 with on-warning AA fail
  • On warning #ffffff
    --mtrl-sys-color-on-warning
    3.35:1 with warning AA fail
  • Info #0061a4
    --mtrl-sys-color-info
    6.47:1 with on-info AA pass
  • On info #ffffff
    --mtrl-sys-color-on-info
    6.47:1 with info AA pass