Where the theme colour ends up
A website has a colour scheme; an app has a theme, and Android paints parts of the phone with it that a browser never touches. When you convert a website to an app, one colour value is used for the status bar (the strip with the clock), historically the navigation bar at the bottom, the splash screen background the app launches on, and the recent-apps card header. Get it right and the app looks like it belongs on the phone. Get it wrong — a light colour with light icons, say — and the clock disappears.
This tool takes the colour from your site's CSS and shows you each of those surfaces on a phone, then writes the values in the two formats you might need: Android's colors.xml and the theme-color meta tag for the website itself.
Light icons or dark icons
Android does not choose the status bar icon colour for you on every version; the app declares whether the bar is "light" (dark icons) or not. The rule is contrast: white icons on anything with a luminance below about 0.4, black icons above. The lab computes both contrast ratios against WCAG's formula and tells you which to use — and the builder applies the same rule automatically when it generates the app, so what you see here is what you get.
Why there is a darker shade
Older Material guidance tinted the status bar a shade darker than the app bar, so the two read as separate surfaces. It still looks good, and it solves the very-light-brand-colour problem: a pale yellow site can keep its yellow header while the status bar and splash use a shade that does not vanish. The lab's "darker" variants are the brand colour multiplied down in RGB — a simple, predictable darkening that preserves the hue.
Edge-to-edge on Android 15
From Android 15 (API 35), apps that target it draw behind the system bars by default and the bars are transparent; the colours you set for them are ignored. Your content shows through, so the colour that matters becomes whatever your website's header is. The builder handles the insets so nothing is hidden under the clock; the "transparent" preview mode here shows the result. Set the theme colour anyway — the splash screen and older phones still use it.
Contrast for the text on top
The two contrast lines matter beyond the status bar. If your app bar, splash screen or bottom tab bar uses the brand colour, the text and icons on it need 4.5:1 to pass WCAG AA — 3:1 for large text and icons. Mid-tone colours (a saturated orange, a medium blue) often fail both white and black; the fix is usually to darken the colour rather than change the text. The on_brand value in the generated XML is the better of the two.