Material 3 Color Schemes and Seed Colors

Material 3 (M3) introduced a structured color scheme — a set of named color roles that your entire app uses consistently. Instead of scattering raw hex values across widgets, you define roles like primary, onPrimary, surface, error, and Flutter's theming engine applies them automatically.

• primary — the brand color used for buttons, FABs, active tabs
• onPrimary — text/icons drawn on top of primary
• surface — background of cards, sheets, dialogs
• onSurface — text drawn on surfaces
• error / onError — validation and alert colors

Every role comes in both a light and a dark variant, letting you support both themes with one color scheme definition.

Before M3, developers had to hand-pick every color role — primary, secondary, tertiary, surfaces, containers, and their 'on' counterparts. That's 25+ values, and getting accessible contrast ratios right manually is error-prone.

ColorScheme.fromSeed solves this by accepting a single seed color and using Google's HCT color space algorithm (Hue, Chroma, Tone) to generate a full, harmonious, WCAG-accessible palette automatically.

• One input → 25+ output roles
• Guaranteed contrast between foreground and background pairs
• Light and dark variants from the same seed
• Consistent with the Material You design language