Two manifest fields, two different jobs
A web app manifest asks for colours in two places, and picking them well is most of what makes an installed web app feel finished:
theme_color tints the system UI around your app — the Android status bar, the title bar of a desktop PWA window, the top of the task-switcher card. It should be a brand colour that white or black text reads well against, because the OS will draw the clock and battery icon over it. On most brands that is the primary colour, darkened slightly if it is very light.
background_color is the colour of the generated splash screen, shown for the second or two before your first page paints. It should match your page background — usually white, off-white or your dark-mode surface — so the transition from splash to content is invisible rather than a flash.
The palette the tool extracts gives you candidates for both. Take the most saturated brand colour for theme_color; take whatever your CSS body background is for background_color, even if that is not in the logo at all.
Checking contrast
Status bar text is white on dark theme colours and black on light ones, chosen by the OS. Mid-tone colours — a medium teal, a warm orange — are the danger zone where neither reads well. If your primary colour lands there, use a darker shade from the palette for theme_color and keep the brighter one for buttons inside the app. Aim for a contrast ratio of at least 4.5:1 against white; any online contrast checker will confirm it from the hex.
Dark mode
The manifest holds one theme_color, but the HTML meta tag can vary by colour scheme, and browsers prefer the meta tag on the page they are showing:
<meta name="theme-color" content="#4F46E5" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1E1B4B" media="(prefers-color-scheme: dark)">Extract the palette from a dark-mode screenshot as well and you have both values.
Using the CSS output
The Copy CSS button gives you custom properties named by role. Paste them into your stylesheet's :root and reference them everywhere the brand colour appears, including the offline page the PWA Builder generates, so the app is consistent even when nothing else loads.
Where the palette comes from
The extractor draws your image onto a canvas, reads the pixel data and quantises it into a small number of representative colours, weighted by how much of the image each covers. Anti-aliased edges and gradients produce in-between shades; if a colour looks slightly off from your brand guideline, trust the guideline — the extractor is for images where you don't have one.