Skip to content
Skip design navigation
Etesie Alpha
Loading account
Foundations

Colors

One seed becomes tonal palettes, then semantic roles that say what a color is for. Browse your live lightdark scheme here, find the right role in Use the system, or reshape the recipe in Customize. Every value here is copyable in the token reference.

Actions & emphasis

Accent roles

Primary, secondary, tertiary and error — each with its content and container pair.

primary #33618d#9ecafc
primary
--md-sys-color-primary
on-primary #ffffff#003256
on-primary
--md-sys-color-on-primary
primary-container #d0e4ff#154974
primary-container
--md-sys-color-primary-container
on-primary-container #154974#d0e4ff
on-primary-container
--md-sys-color-on-primary-container
secondary #526070#bac8db
secondary
--md-sys-color-secondary
on-secondary #ffffff#243140
on-secondary
--md-sys-color-on-secondary
secondary-container #d6e4f7#3b4857
secondary-container
--md-sys-color-secondary-container
on-secondary-container #3b4857#d6e4f7
on-secondary-container
--md-sys-color-on-secondary-container
tertiary #6a5779#d5bee5
tertiary
--md-sys-color-tertiary
on-tertiary #ffffff#3a2a48
on-tertiary
--md-sys-color-on-tertiary
tertiary-container #f1dbff#514060
tertiary-container
--md-sys-color-tertiary-container
on-tertiary-container #514060#f1dbff
on-tertiary-container
--md-sys-color-on-tertiary-container
error #b61a13#ffb2a7
error
--md-sys-color-error
on-error #ffffff#670001
on-error
--md-sys-color-on-error
error-container #ffdad3#900001
error-container
--md-sys-color-error-container
on-error-container #400000#ffdad3
on-error-container
--md-sys-color-on-error-container
Layers & content

Surfaces

Use container steps to create hierarchy without inventing new colors.

surface #f9f9fa#121415
surface
--md-sys-color-surface
on-surface #1a1c1d#e2e2e3
on-surface
--md-sys-color-on-surface
surface-dim #dadadb#121415
surface-dim
--md-sys-color-surface-dim
surface-bright #f9f9fa#38393a
surface-bright
--md-sys-color-surface-bright
surface-container-lowest #ffffff#0c0e0f
surface-container-lowest
--md-sys-color-surface-container-lowest
surface-container-low #f3f3f4#1a1c1d
surface-container-low
--md-sys-color-surface-container-low
surface-container #eeeeef#1e2021
surface-container
--md-sys-color-surface-container
surface-container-high #e8e8e9#282a2b
surface-container-high
--md-sys-color-surface-container-high
surface-container-highest #e2e2e3#333536
surface-container-highest
--md-sys-color-surface-container-highest
surface-variant #e2e2e3#454748
surface-variant
--md-sys-color-surface-variant
on-surface-variant #454748#c6c6c7
on-surface-variant
--md-sys-color-on-surface-variant
Edges & alternate contexts

Outline & inverse

Borders, scrims, shadows and colors for inverted surfaces.

outline #767778#909192
outline
--md-sys-color-outline
outline-variant #c6c6c7#454748
outline-variant
--md-sys-color-outline-variant
inverse-surface #2f3132#e2e2e3
inverse-surface
--md-sys-color-inverse-surface
inverse-on-surface #f1f0f2#2f3132
inverse-on-surface
--md-sys-color-inverse-on-surface
inverse-primary #9ecafc#33618d
inverse-primary
--md-sys-color-inverse-primary
shadow #000000#000000
shadow
--md-sys-color-shadow
scrim #000000#000000
scrim
--md-sys-color-scrim
surface-tint #33618d#9ecafc
surface-tint
--md-sys-color-surface-tint
Material gap, closed

Etesie extensions et— Etesie extension

Success, warning and info stay harmonized with your seed.

Material ships only error. Success, warning and info run through the same palette machinery, harmonized toward your source color, and ship in the --et-* namespace rather than --md-sys-*. Wherever you see the et— Etesie extension mark, that is what it means — and palettes you add yourself carry it too. So does brand: your source color exactly, the same in light and dark, where the scheme's primary is derived from it.

success #006c56#62dbba
success et— Etesie extension
--et-color-success
on-success #ffffff#00382c
on-success et— Etesie extension
--et-color-on-success
success-container #80f8d6#005140
success-container et— Etesie extension
--et-color-success-container
on-success-container #002118#80f8d6
on-success-container et— Etesie extension
--et-color-on-success-container
warning #606100#c8cc61
warning et— Etesie extension
--et-color-warning
on-warning #ffffff#313200
on-warning et— Etesie extension
--et-color-on-warning
warning-container #e4e87e#484900
warning-container et— Etesie extension
--et-color-warning-container
on-warning-container #1c1d00#e4e87e
on-warning-container et— Etesie extension
--et-color-on-warning-container
info #00659b#90ceff
info et— Etesie extension
--et-color-info
on-info #ffffff#003453
on-info et— Etesie extension
--et-color-on-info
info-container #c9e7ff#004c76
info-container et— Etesie extension
--et-color-info-container
on-info-container #001e33#c9e7ff
on-info-container et— Etesie extension
--et-color-on-info-container
brand #5a6675#5a6675
brand et— Etesie extension
--et-color-brand
on-brand #ffffff#ffffff
on-brand et— Etesie extension
--et-color-on-brand