Where the app needs colours
The builder asks for several colours, and each shows up somewhere a user will notice:
| Builder field | Where it appears | Pick |
|---|---|---|
| Splash background | Full screen for a second on launch, and Android 12+'s system splash | Your site's page background, so the transition to content is invisible |
| App name colour (splash) | Text over the splash | Whatever contrasts with the background at 4.5:1 or better |
| App bar colour | Top bar if enabled; tints the status bar | Primary brand colour, dark enough for white text |
| Menu colour | Side drawer background | Primary or a neutral surface |
| Adaptive icon background | Behind the icon foreground in every launcher mask | The solid colour from your logo's background |
| Feature graphic gradient | Store listing (with video) | Two brand colours from the palette |
Contrast: the rule that keeps the status bar readable
Android draws the clock, battery and notification icons in white or black over the app-bar colour, choosing by luminance. Mid-tone colours — medium teal, orange, lime — give neither legible text. If your primary colour is a mid-tone, use a darker shade from the palette for the app bar and keep the bright one for buttons inside your website. Aim for at least 4.5:1 contrast against white; a free online checker confirms it from the hex code.
Consistency with the website
The app renders your live site, so the native parts (splash, bars, menu) should look like they belong to the same product. Extract from an actual screenshot of your site's header, not just the logo file, to catch the exact background and accent colours the site really uses.
Dark mode
If your site supports dark mode, the app's native surfaces should too, or the user sees a white app bar over a dark page. Extract a second palette from a dark-mode screenshot and give the builder the dark values if you expect most users on dark themes; there is currently one set of native colours per build, so pick the mode your audience uses more.
Using the CSS output
The Copy CSS button gives custom properties named by role. If you maintain the website too, drop them into :root so site and app pull from one source of truth.