MD3 Theme Builder

Your complete Material Design 3 theme generated from the primary color.

Primary Seed:
#
Contrast:

Material 3 Component Playground

Live interactive UI elements reacting dynamically to your system color theme.

Filled Tonal Elevated Outlined Text
Active Switch
Slider:

Surface Container Card

Interactive card responding to neutral, primary, and surface system tokens.

Details Explore More

Export Hub

Export color data and CSS/SCSS/Android/SwiftUI code templates.

css
CSS (:root Variables)
Web tokens & CSS variables
 style
Tailwind CSS (v4 @theme)
Tailwind theme directives
 token
Figma Tokens (W3C JSON)
DTCG standard format
 smartphone
Flutter (Dart Theme)
ColorScheme.fromSeed
 code
SCSS ($brand-color map)
Sass map & variables
 android
Android (XML & Compose)
colors.xml & Jetpack Compose
 phone_iphone
SwiftUI (iOS Extension)
Swift Color struct & extensions
 data_object
JSON Palette Data
Raw JSON values & shades
 terminal
Python (Material You)
materialyoucolor integration
download Download content_copy Copy Code
css theme.css CSS
0 lines
Copied to clipboard!