Color

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

#312a64
#d9bfff
Primary
High-emphasis fills, texts, and icons against surface
#fbfbfe
#15141a
On Primary
High-emphasis fills, texts, and icons against surface
#e7dfff
#45278d
Primary Container
Standout fill color against surface, for key components like FAB
#15141a
#fbfbfe
On Primary Container
Text and icons against primary container
#e7dfff
#e7dfff
Primary Fixed
Standout fill color against surface, for key components like FAB, stays fixed across themes
#15141a
#15141a
On Primary Fixed
Text and icons against on primary fixed

Secondary

#5b5b66
#cfcfd8
Secondary
Less prominent fills, text, and icons against surface
#fbfbfe
#15141a
On Secondary
Text and icons against secondary
#e6e0f5
#4b3974
Secondary Container
Less prominent fill color against surface, for recessive components like tonal buttons
#15141a
#fbfbfe
On Secondary Container
Text and icons against secondary container

Tertiary

#592acb
#cb9eff
Tertiary
Complementary fills, text, and icons against surface
#fbfbfe
#15141a
On Tertiary
Text and icons against tertiary

Status

#c50042
#ff9aa2
Error
Attention-grabbing color against surface for fills, icons, and text, indicating urgency
#fbfbfe
#15141a
On Error
Text and icons against error
#0250bb
#00b3f4
Information
Attention-grabbing color against surface for fills, icons, and text, indicating neutral information
#2ac3a2
#b3ffe3
Success
Attention-grabbing color against surface for fills, icons, and text, indicating success information
#a7341f
#ffa436
Warning
Attention-grabbing color against surface for fills, icons, and text, indicating warning information
#ffea80
rgba(196,90,39,0.77)
Warning Container
Less prominent fill color against surface, for warning information
#15141a
#fbfbfe
On Warning Container
Text and icons against warning container

Surface

rgba(91,91,102,0.43)
rgba(251,251,254,0.34)
Surface Tint
Autofill background color
#e0e0e6
#1c1b22
Surface Dim
Dimmest surface color in light and dark themes
#f0f0f4
#1c1b22
Surface Dim Variant
Slightly dimmer surface color in light theme
#f9f9fb
#2b2a33
Surface
Default color for backgrounds
#ffffff
#3a3944
Surface Bright
Brightest surface color in light and dark themes
#ffffff
#1c1b22
Surface Container Lowest
Lowest-emphasis container color
#fbfbfe
#23222b
Surface Container Low
Low-emphasis container color
#f9f9fb
#2b2a33
Surface Container
Default container color
#f0f0f4
#32313c
Surface Container High
High-emphasis container color
#e0e0e6
#3a3944
Surface Container Highest
Highest-emphasis container color
#15141a
#fbfbfe
On Surface
Text and icons against any surface or surface container color
#5b5b66
#cfcfd8
On Surface Variant
Lower-emphasis color for text and icons against any surface or surface container color
#2b2a33
#cfcfd8
Inverse Surface
Background fills for elements which contrast against surface
#fbfbfe
#15141a
Inverse On Surface
Text and icons against inverse surface
#cb9eff
#592acb
Inverse Primary
Actionable elements, such as text buttons, against inverse surface

Outline

#80808e
#8f8f9d
Outline
Important boundaries, such as a text field outline
#e0e0e6
#5b5b66
Outline Variant
Decorative elements, such as dividers, and when other elements provide 4.5:1 contrast

Scrim

rgba(66,65,77,0.95)
rgba(21,20,26,0.95)
Scrim
Scrim color