What are Material 3 color roles?

Material Design 3 defines structural color roles including Primary (key accents), Secondary (subtle elements), Tertiary (contrasting details), Surface (cards/containers), and Error (alerts/validation).

How does iOS handle Light vs Dark mode colors?

iOS uses semantic system colors (like SystemBackground or Label) that automatically adjust values depending on active dark/light mode configurations.

Mobile App Color Palette Generator

Translate brand colors into Material 3 (Android) and HIG (iOS) layout color tokens. View dynamic mockups and export files.

Select Seed Color

Generated Color Tokens

Real-Time Mobile Frame Preview

My App

Material Card Container color maps to secondary tone values.

Frequently Asked Questions

What is Material 3 Tonal Palette?

Material 3 creates a set of 13 tones (0 to 100 lightness values) based on a key seed color. Tones are used across light and dark themes to ensure strict accessibility contrast ratios.

How does Swift Color extensions work?

The generated Swift code adds an extension to the Color struct in SwiftUI. This lets you declare custom colors in code using hex strings without registering assets catalogs.

Are contrast ratios calculated?

Yes. The lighter containers and text colors are mathematically derived from standard HSL offsets to verify text stays legible against the primary background tones.

Does this tool run offline?

Yes, 100%. Color calculations, hex parsing, XML/Kotlin code generation, and UI mockup painting occur completely locally in JavaScript.