Applies Material Design 3 Expressive dynamic color and theming principles to user interfaces. Use this when working on color palettes, themes, dynamic color systems, accessibility, or when the user asks to apply Material Design 3 color guidelines to a design or application.
Applies Material Design 3 Expressive dynamic color and theming principles to user interfaces. Use this when working on color palettes, themes, dynamic color systems, accessibility, or when the user asks to apply Material Design 3 color guidelines to a design or application.
Applies Material Design 3 Expressive dynamic color and theming principles to user interfaces. Use this when working on color palettes, themes, dynamic color systems, accessibility, or when the user asks to apply Material Design 3 color guidelines to a design or application.
license
Apache-2.0
Material Design 3 Color and Dynamic Theming
Overview
This skill guides the application of Material Design 3 (M3) Expressive color and theming principles to create vibrant, accessible, and emotionally engaging user interfaces.
Keywords: Material Design 3, M3, dynamic color, theming, color palette, Material You, accessibility, color tokens, surface colors, accent colors, fixed accent colors, emphasis colors, contrast levels
Core Principles
Dynamic Color System
Material Design 3's color system is built on the concept of dynamic color, allowing interfaces to adapt to user preferences and contexts:
Tonal Palettes: Use five key tonal palettes (Primary, Secondary, Tertiary, Neutral, Neutral Variant) with multiple tones (0-100)
Color Roles: Map 26+ color roles to UI elements (e.g., primary, onPrimary, primaryContainer, onPrimaryContainer)
Adaptive Theming: Support both light and dark themes with appropriate contrast
User Personalization: Allow color schemes to adapt based on user wallpaper or preferences (Material You)
Fixed Accent Colors: Provide color tokens that remain consistent across light and dark themes for brand identity
Emphasis Colors: Use bolder, more vibrant color roles for key UI elements to improve clarity and emotional resonance
Color Palette Structure
When creating color palettes, follow this structure:
Primary Palette (Main brand color):
Primary: Main interactive elements (buttons, active states)
On Primary: Text/icons on primary color
Primary Container: Standout fill color for key components
On Primary Container: Text/icons on primary container
Primary Fixed: Stays constant across light and dark themes
On Primary Fixed: Text/icons on primary fixed
Primary Fixed Dim: Dimmed variant for secondary emphasis on fixed surfaces
Secondary Palette (Complementary accent):
Secondary: Less prominent components
On Secondary: Text/icons on secondary
Secondary Container: Tinted backgrounds
On Secondary Container: Text/icons on secondary container
Secondary Fixed: Stays constant across light and dark themes
On Secondary Fixed: Text/icons on secondary fixed
Secondary Fixed Dim: Dimmed variant for fixed surfaces
Tertiary Palette (Contrasting accent — now a prominent expressive accent for branding and highlights):
Tertiary: Contrasting accents and highlights
On Tertiary: Text/icons on tertiary
Tertiary Container: Input elements
On Tertiary Container: Text/icons on tertiary container
Tertiary Fixed: Stays constant across light and dark themes
On Tertiary Fixed: Text/icons on tertiary fixed
Tertiary Fixed Dim: Dimmed variant for fixed surfaces
Neutral Palettes (Surfaces and backgrounds):
Surface: Default background for components
On Surface: Text on surface
Surface Variant: Alternate surface color
On Surface Variant: Text on surface variant
Surface Dim: Dimmed surface for reduced emphasis
Surface Bright: Brighter surface for increased emphasis
Snackbars: inverse-surface with inverse-on-surface text
Bottom sheets: surface-container-low
State Layers:
Hover: Apply 8% opacity layer of on-surface
Focus: Apply 12% opacity layer of on-surface
Pressed: Apply 12% opacity layer of on-surface
Dragged: Apply 16% opacity layer of on-surface
Emphasis and Brand:
Use fixed accent colors for brand elements that must remain consistent
Apply emphasis through color saturation and contrast, not just hue
Use tertiary as an expressive accent for onboarding, highlights, and branding
Dynamic Color Generation
When generating color schemes from a source color:
Extract Core Hue: Identify the dominant hue from the source (e.g., user wallpaper)
Generate Tonal Palettes: Create five tonal palettes using HCT (Hue, Chroma, Tone) color space
Assign Color Roles: Map generated tones to semantic color roles (26+ roles)
Generate Fixed Variants: Create fixed accent colors that remain constant across themes
Generate Surface Containers: Create the five-level surface container hierarchy
Generate Contrast Variants: Produce standard, medium, and high contrast versions
Validate Contrast: Ensure all role pairs meet accessibility requirements
Support Themes: Generate both light and dark variants
Best Practices
Semantic Naming: Always use semantic color tokens (e.g., primary, error) rather than literal colors (e.g., blue, red)
Consistent Application: Apply colors consistently across all components
Elevation Tinting: Add subtle tint to elevated surfaces using primary color at very low opacity
Color Hierarchy: Use primary for main actions, secondary for less important actions, tertiary for expressive accents
Test Both Themes: Always test in both light and dark modes
Vibrant Expression: In M3 Expressive, embrace richer, more vibrant colors while maintaining accessibility
Context Awareness: Adapt color intensity and palette based on app context and user preferences
Use Fixed Colors for Branding: Apply fixed accent tokens for logo colors or elements that must not change between themes
Support Contrast Levels: Implement standard, medium, and high contrast variants for accessibility
Surface Container Hierarchy: Use the five surface container levels to create clear visual depth
Tools and Resources
tokens.css: Ready-to-use M3 color tokens (light + dark) based on the orange baseline palette (#FF9800), included in this skill's directory. Copy into your project and customize.
examples/color-roles.svg: Visual reference SVG showing M3 color roles (primary, secondary, tertiary, error), surface container tones, and the primary tonal palette. Use as a stakeholder reference or documentation asset.
material-theme-builder skill: Use to generate a complete token set from any source color programmatically.
