Color palette & contrast
Your brand colors in. Tonal palettes and Material 3 light and dark themes out, every text pair checked for contrast, ready for Flutter, SwiftUI, Android, Compose and the web.
Primary
Your main brand color: buttons, links, the active tab.
Secondary
Quieter accents: chips, selected tabs, tonal buttons.
Tertiary
A third voice for highlights and badges.
Neutral
Backgrounds, text, borders. Tinted greys carry a hint of the primary, so the app feels like one piece.
Error
Errors and destructive actions. Material's red works for most brands.
- Contrast—
- Your colors—
- Dark mode—
Rules
Off: Material 3 picks the tone of each color that reads best, like the Material Theme Builder.
Colors that miss the target are nudged lighter or darker until they pass. Your exact colors are never changed.
Names
One name, each platform's style: AppColors · appPrimary · app_primary · --app-primary