iOS Tinted Icons: Pick a Tint That Actually Works on Your Wallpaper

What tinted icons actually do

Current as of iOS 26, Android 16, and One UI 8, checked 2026-08-09. Menu wording moves between releases, but the destination is the same on each system: the icon-appearance controls inside the home-screen or wallpaper settings. The product names below are factual references to the vendors' own software — this site is independent and has no connection to Apple, Google, or Samsung.

• iPhone (iOS 26): press and hold an empty area of the Home Screen, tap Edit, then Customize, and choose Tinted. Two sliders appear — hue and saturation — and iOS applies your color over grayscale versions of every icon. That last clause is the key to this whole guide: the icons keep their own light-and-dark structure, and your tint is laid over it.
• Pixel (Android 16): open Settings, then Wallpaper & style, and turn on Themed icons. There are no sliders — Android derives the tint from the wallpaper itself. The control surface is therefore the wallpaper: change what the system samples and you change the tint.
• Samsung Galaxy (One UI 8): open Settings, then Wallpaper and style, and pick a Color palette drawn from your current wallpaper; supported icons follow it. Third-party icon packs keep their own colors.

The three systems split into two designs. iOS hands you the numbers directly, so your job is choosing good ones. Android 16 and One UI 8 compute the numbers from the wallpaper, so your job is choosing — or generating — a wallpaper whose dominant color is the tint you want. Both jobs are the same color problem approached from opposite ends, and the same theory below covers them.

Hue and saturation — the two numbers that matter

Hue is a position on the color wheel, measured in degrees: 0° is red, 60° yellow, 120° green, 180° cyan, 240° blue, 300° magenta, and the wheel closes back to red at 360°. Two hues' relationship is just the angle between them, which is why the classic harmony rules are arithmetic — and why a tool can compute companions for any color it extracts.

Saturation is how far a color sits from gray, as a percentage. At 0% every hue is the same gray; at 100% the color is as vivid as the screen can make it. Saturation is the volume knob of tinting: it decides whether the tint reads as an atmosphere over your icons or as paint poured on them. Most tints that look bad were not the wrong hue — they were the right hue at too much saturation.

There is no brightness slider, and that is by design rather than omission: tinting applies your color over grayscale icons, and the icons supply their own light and dark. But brightness still matters in one indirect way, because hues do not carry equal perceived lightness. At identical saturation, yellows and greens read light while blues and violets read dark — your eye weights green heavily and blue hardly at all when judging lightness. A 240° blue at 80% saturation darkens the whole icon grid in a way a 60° yellow at 80% never will. Keep that asymmetry in mind whenever the advice below says "reduce saturation": for the dark half of the wheel you will need to reduce it sooner.

Complementary or analogous — accent or camouflage

Given your wallpaper's dominant color, there are three principled places to put the tint, and they produce three different home screens.

Match the dominant color exactly and the icons dissolve into the wallpaper — the strongest camouflage. The screen reads as one continuous surface, which is genuinely beautiful with a calm gradient behind it. The cost is findability: with color removed as a cue, you locate apps by glyph shape and grid position alone. If you navigate by muscle memory this costs nothing; if you hunt for icons visually, it is a real tax.

Analogous tints sit 30° to either side of the dominant hue at the same saturation. They keep the screen in one color family — the icons clearly belong to the wallpaper — while a subtle temperature shift separates the grid from the background. This is the safe default: harmony without full camouflage, and it degrades gracefully if the extraction picked a slightly different dominant than your eye would have.

The complement sits 180° opposite. Complementary pairs produce the strongest color contrast the wheel offers, so the icon grid becomes a deliberate accent floating over the wallpaper. One caution: two saturated complements at equal strength fight — the boundary between them shimmers and neither reads as figure or ground. Complements work best asymmetrically, so drop the tint's saturation twenty or thirty points below the wallpaper's and let the wallpaper win the vividness contest while the icons win legibility.

The contrast pitfalls that make glyphs unreadable

Legibility on a tinted home screen is two separate contrasts, and each fails in its own way. Glyph against tile is the contrast inside each icon. It comes entirely from the icon's own grayscale structure, and a tint can crush it: lay a strongly saturated mid-lightness color over everything and the formerly-white glyph and formerly-dark tile both converge toward the tint, taking the difference between them down with it. This is the classic failure behind an unreadable tinted screen — every icon becomes a uniform colored square at a glance. The blues and violets fail here first, because the same saturation costs more perceived lightness range at those hues.

Grid against wallpaper is the other contrast. Tint the icons to exactly the dominant color of a same-brightness wallpaper region and the grid vanishes into it — which is either the camouflage look, chosen on purpose, or an accident, suffered. Accessibility guidance is useful for calibration here: WCAG's non-text-contrast rule uses 3:1 as the floor at which interface shapes reliably separate from what they sit against. You don't need to compute ratios to use the idea — it is a reminder that "slightly different" colors are not different enough for shapes you need to find quickly.

Two practical tests catch both failures in seconds. Hold the phone at arm's length and try to identify three apps by glyph alone — if you can't, glyph-tile contrast is gone; reduce saturation before touching the hue, because the eye forgives a shifted hue far more readily than a lost glyph. Then squint at the screen — if the icon grid melts into the wallpaper and you didn't choose camouflage, rotate the tint 30° away from the wallpaper's dominant hue or lighten the wallpaper region behind the grid. And remember the fix can live on either side: sometimes the right move is not a different tint but a calmer wallpaper.

The workflow: extract, apply, match the gradient back

Everything above turns into a short loop with two of this site's tools, and every step of it runs in your browser — no image is uploaded at any point.

Extract. Open the icon tint matcher and hand it your wallpaper — a photo, a downloaded gradient, anything. It runs a first-party extractor over the image and reports up to five dominant colors, each with the measured share of sampled pixels that are nearer to it than to any other reported color, the suggested tint hue and saturation from the largest share, and the complementary and analogous companions, all copyable as hex and HSB. If the suggested dominant isn't the color you actually care about — a small vivid subject can lose the pixel count to a large calm background — the shares tell you which listed color to promote instead.

Apply. On an iPhone, type the chosen hue and saturation into the Tinted sliders using the steps above. On a Pixel or Galaxy, the system derives the tint from the wallpaper itself, so applying a specific tint means setting a wallpaper whose dominant color is that tint — which is exactly what the next step produces.

Match the gradient back. The matcher's "generate a matching gradient from this palette" button deep-links the wallpaper maker with the extracted palette riding the URL — the color stops, a custom-palette flag, and a seed computed from the colors themselves, so the same palette always proposes the same wallpaper. This closes the loop in both directions: start from a photo you love, extract its palette, and generate a cleaner gradient in the same colors to sit behind your tinted icons; or start in the maker, and note that every gallery entry is likewise a seed-plus-palette recipe, so the tint that matches it can be read straight off its palette. Because the whole chain is deterministic, a matched set you like is reproducible from its numbers — write down the seed and the hue and you can rebuild it on any phone, at that phone's exact native size.