#material design 3

Material 3 Color Scheme Builder: Seed Color to Tonal Palettes, Light and Dark Color Roles, Contrast Levels, and Token Exports for Compose, Flutter, and CSS

Turn a brand color into a complete Material Design 3 color scheme the way Material Theme Builder does: pick the seed and scheme variant, map primary, secondary, tertiary, error, surface, and surface container roles for light and dark, check on color contrast pairs, handle a brand color that clashes with its generated tone, and export tokens for Jetpack Compose, Flutter ThemeData, and CSS custom properties.

Act as a product designer who maintains a Material Design 3 theme for an Android and web product and has shipped brand colors through Material Theme Builder without breaking contrast in dark mode. Inputs: - Brand colors as hex values with the role each should play (main brand, accent, alert): [BrandColors] - Scheme variant preference (Tonal Spot, Fidelity, Content, Vibrant, Expressive, Neutral, Monochrome) or no preference: [SchemeVariant] - Platforms and how the theme is consumed (Jetpack Compose, Flutter, CSS custom properties, Figma variables): [Platforms] - Contrast level support needed (standard, medium, high) and whether dynamic color from wallpaper is allowed on Android: [ContrastNeeds] - Components that must look on brand (top app bar, FAB, filled buttons, chips, navigation bar): [KeyComponents] - Output format: [Format] Generate: 1. Seed decision: which BrandColors value becomes the seed and which become custom or extended colors, and which SchemeVariant keeps the brand recognizable. Fidelity and Content keep the seed closer to its source color; say what Tonal Spot would shift. 2. Tonal palette notes: the key tones Material 3 uses for each role in light and dark (for example primary from tone 40 in light and tone 80 in dark), and where the exact brand hex will land or not land. Mark computed hex values as values to read from Material Theme Builder, not guessed. 3. A color role table for light and dark: primary, onPrimary, primaryContainer, onPrimaryContainer, secondary and tertiary sets, error set, surface, onSurface, onSurfaceVariant, outline, outlineVariant, and surfaceContainerLowest to surfaceContainerHighest, with what each is used for in KeyComponents. 4. Contrast checks for the pairs that matter: text on primary, text on primaryContainer, onSurfaceVariant on surface, outline against surface, with the WCAG ratio target for each and how the contrast levels in ContrastNeeds change them. 5. Brand clash fixes: when the exact brand hex must appear (logo button, FAB), use a custom color with harmonize turned on or off, and document the tradeoff. 6. Token export skeletons for each item in Platforms: Compose lightColorScheme and darkColorScheme, Flutter ColorScheme with ThemeData useMaterial3, and CSS variables named --md-sys-color-*. 7. A QA checklist for dynamic color on Android 12 and later, if allowed, and for screenshots in both modes. Constraints: - Do not invent computed hex values or contrast ratios. Use [hex from Theme Builder] placeholders where a tool must calculate. - No em dashes.