Overview
Acorn's Android semantic color palette corresponds to the semantic color roles used by Material 3. Our semantic colors are aliases of the colors from the full color palette.
Primary
Primary
High-emphasis fills, texts, and icons against surface
On Primary
High-emphasis fills, texts, and icons against surface
Primary Container
Standout fill color against surface, for key components like FAB
On Primary Container
Text and icons against primary container
Secondary
Secondary
Less prominent fills, text, and icons against surface
On Secondary
Text and icons against secondary
Secondary Container
Less prominent fill color against surface, for recessive components like tonal buttons
On Secondary Container
Text and icons against secondary container
Tertiary
Tertiary
Complementary fills, text, and icons against surface
On Tertiary
Text and icons against tertiary
Tertiary Container
Complementary container color against surface, for components like input fields
On Tertiary Container
Text and icons against tertiary container
Status
Error
Attention-grabbing color against surface for fills, icons, and text, indicating urgency
On Error
Text and icons against error
Error Container
Less prominent fill color against surface, for error information
On Error Container
Text and icons against error container
Information
Attention-grabbing color against surface for fills, icons, and text, indicating neutral information
On Information
Text and icons against information
Information Container
Less prominent fill color against surface, for neutral information
On Information Container
Text and icons against information container
Success
Attention-grabbing color against surface for fills, icons, and text, indicating success information
On Success
Text and icons against success
Warning
Attention-grabbing color against surface for fills, icons, and text, indicating warning information
On Warning
Text and icons against warning
Warning Container
Less prominent fill color against surface, for warning information
On Warning Container
Text and icons against warning container
Surface
Surface Dim
Dimmest surface color in light and dark themes
Surface Dim Variant
Slightly dimmer surface color in light theme
Surface
Default color for backgrounds
Surface Bright
Brightest surface color in light and dark themes
Surface Container Lowest
Lowest-emphasis container color
Surface Container Low
Low-emphasis container color
Surface Container
Default container color
Surface Container High
High-emphasis container color
Surface Container Highest
Highest-emphasis container color
On Surface
Text and icons against any surface or surface container color
On Surface Variant
Lower-emphasis color for text and icons against any surface or surface container color
Inverse Surface
Background fills for elements which contrast against surface
Inverse On Surface
Text and icons against inverse surface
Inverse Primary
Actionable elements, such as text buttons, against inverse surface
Outline
Outline
Important boundaries, such as a text field outline
Outline Variant
Decorative elements, such as dividers, and when other elements provide 4.5:1 contrast
Scrim
Autofill and selected text
Autofill Text
Highlighted autofill text color
Selected Text
Highlighted selected text color
Feature tokens
These tokens are defined for specific features and should not be used outside of that feature.
Tab groups
Private mode icon
Icon Private
Private mode icon
Gradients
Linear
Linear Gradient, #5939a8, 0.00%, #764edd, 100.00%)
Linear Gradient, #5939a8, 0.00%, #764edd, 100.00%)
Linear Gradient, #b393ff, 0.00%, #ff8f5d, 71.15%)
Linear Gradient, #b393ff, 0.00%, #764edd, 71.15%)
Gradient Accent
More prominent gradient color against surface, for bold brand accents
Linear Gradient, #e5d6ff80, 40.00%, #ffd4b780, 100.00%)
Linear Gradient, #180e3080, 40.00%, #711d0880, 100.00%)
Gradient Accent Subtle
AI gradient background color (subtle)
Linear Gradient, #b393ff, 0.00%, #764edd, 71.15%)
Linear Gradient, #b393ff, 0.00%, #764edd, 71.15%)
Gradient Tab Outline
Border around active tabs
Linear Gradient, #ffffff, 0.00%, #cdb7ff, 100.00%)
Linear Gradient, #ffffff, 0.00%, #cdb7ff, 100.00%)
Gradient Privacy Mask
Use for the mask on the 72x72 private
mode icon
Mesh
Gradient AI Strong Stop 1
AI gradient background color (strong)
Gradient AI Strong Stop 2
AI gradient background color (strong)
Gradient AI Strong Stop 3
AI gradient background color (strong)