Material 3 Color System Summary

Material3.md

🎨 Primary Color Roles

Role	Description	Typical Use Cases
Primary	The main brand or theme color. Highly visible and dominant in the UI.	Filled buttons, active states, top app bar, tabs
On Primary	Color used for text and icons on top of Primary. Ensures legibility.	Text inside filled buttons, icons on colored bars
Primary Container	A softer, often lighter version of Primary used for containers.	Background for cards, dialogs, or selected UI elements
On Primary Container	Color for text/icons on top of Primary Container.	Headings, text, and icons in primary-colored containers

---

🟪 Secondary Color Roles

Role	Description	Typical Use Cases
Secondary	A less prominent brand color. Supports and complements the Primary color.	Outlined buttons, secondary actions, chips
On Secondary	Color for text and icons placed on top of Secondary.	Text in secondary buttons or chips
Secondary Container	Softer background version of Secondary.	Surface areas with secondary emphasis
On Secondary Container	Text/icons that appear on top of Secondary Container.	Text inside cards or chips using secondary tone

---

🟫 Tertiary Color Roles

Role	Description	Typical Use Cases
Tertiary	A flexible, expressive accent color. Often used for branding or decorative UI.	Onboarding flows, avatars, custom badges
On Tertiary	Color for content placed on top of Tertiary.	Text in tertiary-colored components
Tertiary Container	Background tone for tertiary emphasis. Softer, less intense version.	Backgrounds, cards, feature highlights
On Tertiary Container	Color for content on Tertiary Container.	Headings or icons inside tertiary background areas

---

🟥 Error Color Roles

Role	Description	Typical Use Cases
Error	Strong red color indicating critical errors or destructive actions.	Error messages, invalid inputs, alert badges
On Error	Text/icons shown on top of Error. Ensures legibility.	Text on error buttons or banners
Error Container	Softer background tone for errors.	Background of error cards, fields, or toasts
On Error Container	Text/icons shown on top of Error Container.	Headings or icons on error surfaces

---

🧱 Surface Color Roles

Role	Description	Typical Use Cases
Surface	Default background color for the app.	Screens, containers, bottom sheets
Surface Dim	A dimmer background tone for lower elevation or dark mode surfaces.	Drawer backgrounds, secondary areas
Surface Bright	A lighter tone for elevated or highlighted surfaces.	Modals, dialogs
Surface Container Lowest	Base-level container background. Very close to pure background.	Full app background
Surface Container Low	Slightly elevated container tone.	Cards, list items
Surface Container	Middle elevation tone.	Secondary containers, UI panels
Surface Container High	Higher elevation tone.	Floating cards, dialogs
Surface Container Highest	Highest elevation surface tone.	Popups, tooltips, modal overlays

---

🧍 On Surface & Neutral Roles

Role	Description	Typical Use Cases
On Surface	Default text/icon color on surface backgrounds. High contrast.	Primary text, buttons, icons
On Surface Variant	A softer version of On Surface. Used for secondary text or labels.	Subheadings, captions, disabled states
Outline	Used for borders and visual separators.	Input outlines, dividers, chips
Outline Variant	A more subtle outline color.	Low emphasis lines or decorations

---

🔄 Inverse Color Roles

Role	Description	Typical Use Cases
Inverse Surface	Background color for elements shown above the regular surface.	Snackbars, bottom sheets in light theme
Inverse On Surface	Text/icons placed on Inverse Surface. High contrast.	Content inside inverse containers
Inverse Primary	A version of the primary color suitable for use on inverse surfaces.	Call-to-action buttons inside bottom sheets

---

🔒 Fixed Color Roles

These are constant color references across themes (like light/dark), supporting consistent brand identity in dynamic color systems.

Role	Description	Typical Use Cases
Primary Fixed	Brand container tone used consistently across dynamic themes.	Backgrounds in branded cards or elements
Primary Fixed Dim	Slightly darker version for elevated use.	Elevated containers, scroll areas
On Primary Fixed	Content color for text/icons on Primary Fixed.	High-contrast content
On Primary Fixed Variant	Lower-contrast content on fixed primary surfaces.	Secondary text, labels

Also available:

• Secondary Fixed, Secondary Fixed Dim, On Secondary Fixed, On Secondary Fixed Variant
• Tertiary Fixed, Tertiary Fixed Dim, On Tertiary Fixed, On Tertiary Fixed Variant

---

🧩 Utility Roles

Role	Description	Typical Use Cases
Shadow	Standard shadow color to simulate depth/elevation.	Elevation of cards, sheets, floating buttons
Scrim	Semi-transparent overlay to dim background interactions.	Background behind modals, drawers, dialogs

---

Reference:

https://m3.material.io/styles/color/static/baseline