▮ Depth Paper

Matcher · Photo in, nothing out

Match your icon tint to your wallpaper

Pick a wallpaper image and this page extracts its dominant colors with a first-party median-cut quantizer, then suggests the tint hue and saturation to type into your phone's icon controls — plus complementary and analogous companions if you want contrast instead of camouflage. Every value is copyable as hex and HSB, and the whole computation happens in your browser: the image never leaves your device.

Image— Colors— Tint hue— Tint sat— Statusidle

Dominant colors

Companions

Applying the tint — generic steps, text only

Current as of iOS 26, Android 16, and One UI 8, checked 2026-08-09. The names below are factual references to the vendors' own software; menus move between versions, and this page shows no screenshots by design.

How this matcher works

The image is decoded in your browser, downscaled to at most 256 pixels on its long side — a palette needs the distribution of color, not the resolution — and sampled into an extractor written for this page, no libraries. Pixels that are fully transparent are skipped rather than counted as black; if every sampled pixel is transparent the page says so instead of reporting a color the image does not contain. A median cut proposes up to five candidate colors, and then a second pass measures them: each sampled pixel is assigned to the candidate nearest it in RGB, each candidate moves to the average of the pixels that chose it, and that repeats until nothing moves. The percentage beside a swatch is that measured share — the fraction of sampled pixels for which it is the nearest of the reported colors — and the largest share becomes the suggested tint: its hue and saturation in HSB, the two numbers a tint control takes.

The companions are hue arithmetic on that dominant color: rotate 180° for the complement, ±30° for the analogous pair, keeping saturation and brightness fixed so the alternatives swap in cleanly. Every swatch is reported as hex and as H/S/B and can be copied with one click. The handoff button carries the extracted palette into the wallpaper maker as URL parameters with a seed derived from the colors themselves, so the gradient it proposes is reproducible — the same palette always deep-links the same wallpaper.

The honest limits: this counts pixels, not attention — a small but striking subject can lose to a large calm background, so the second or third color is sometimes the one you actually want, which is why every extracted color is shown with its share. There are up to five, not always five: a candidate no pixel chose is dropped rather than padded out, so a two-color image reports two. The apply-steps are written against named, dated software versions and menus drift between releases. And a tint control may quantize the values you enter; a degree or two of drift after applying is the phone's rounding, not the extraction.

Frequently asked questions

How does this find the dominant colors?
In two passes, first-party and library-free. First, median-cut quantization: every sampled opaque pixel starts in one box, and the box with the widest color range is split at its median until five boxes remain. Those five box averages are only starting points — median cut splits at the median, so how big a box is describes the splitting, not the image. So a second pass measures: every sampled pixel is assigned to whichever candidate color is nearest it in RGB, each color moves to the average of the pixels that actually chose it, and that repeats until nothing moves. The percentages you see come from that pass — a color's share is the share of sampled pixels for which it is the nearest color, they sum to 100%, and a color no pixel chose is dropped rather than listed, so an image with fewer than five distinct colors honestly returns fewer than five. Fully transparent pixels are skipped rather than counted as black. The same image always produces the same palette.
What do the hue and saturation numbers mean?
They are the H and S of the dominant color in HSB — the two values an icon-tint control actually takes. Hue is the position on the color wheel in degrees, saturation is how far from gray it sits as a percentage. Brightness isn't part of the suggestion because tinting applies your color over grayscale versions of the icons, which supply their own light and dark.
Is my wallpaper uploaded to extract its palette?
No. The image is decoded and sampled entirely inside this page, and the site's security policy blocks requests to every other origin — so the no-upload claim is enforced by your browser rather than just stated. Close the tab and nothing persists.
What are the complementary and analogous colors for?
Alternatives with a reason behind them. The analogous pair sits 30 degrees to either side of your dominant color and tints icons into the same family as the wallpaper without matching it exactly; the complement sits opposite and reads as a deliberate accent against it. All three carry the dominant color's saturation and brightness, so they swap in cleanly.
Will these steps match my phone's menus exactly?
The steps are written against named versions — iOS 26, Android 16, One UI 8 — and dated 2026-08-09, because settings menus move between releases. On an older or newer version the wording may differ while the destination stays the same: the icon appearance controls in each system's home-screen or wallpaper settings. The color values themselves are just numbers and work anywhere a tint control accepts them.

Related