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

What tinted icons do

Current as of iOS 26, Android 16, and One UI 8, checked 2026-08-09. Menu wording moves between releases, but on each system you are looking for 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, for hue and saturation, and iOS applies your color over grayscale versions of every icon. So 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, so you change the tint by changing the wallpaper the system samples.
• 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 work in two ways. iOS hands you the numbers directly, so your job is to choose good ones. Android 16 and One UI 8 compute the numbers from the wallpaper, so your job is to choose or generate a wallpaper whose dominant color is the tint you want. It is the same color problem from opposite ends, and the theory below covers both.

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 relate by the angle between them, so the classic harmony rules are simple arithmetic, and 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 works like a volume knob for tinting: it decides whether the tint reads as a light wash over your icons or as paint poured on them. Most tints that look bad have the right hue at too much saturation.

There is no brightness slider, because tinting applies your color over grayscale icons and the icons supply their own light and dark. Brightness still matters in one indirect way: hues differ in perceived lightness. At the same saturation, yellows and greens read light while blues and violets read dark, because 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. So when the advice below says "reduce saturation", reduce it sooner for the dark half of the wheel.

Complementary or analogous: accent or camouflage

Given your wallpaper's dominant color, there are three sound 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 can look striking with a calm gradient behind it. The cost is findability: with color gone as a cue, you find apps by glyph shape and grid position alone. That costs nothing if you navigate by muscle memory, and it slows you down if you hunt for icons by sight.

Analogous tints sit 30° to either side of the dominant hue at the same saturation. They keep the screen in one color family, so the icons clearly belong to the wallpaper, while a slight temperature shift separates the grid from the background. This is the safe default. You get harmony without full camouflage, and it still works if the extraction picked a slightly different dominant color 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 an accent floating over the wallpaper. Two saturated complements at equal strength clash: the boundary between them shimmers, and neither reads as figure or ground. Complements work best at unequal strength, so drop the tint's saturation twenty or thirty points below the wallpaper's. The wallpaper stays the more vivid of the two, and the icons stay legible.

The contrast pitfalls that make glyphs unreadable

Legibility on a tinted home screen depends on 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 glyph that was white and the tile that was dark both move toward the tint, so the difference between them shrinks. This is the classic failure behind an unreadable tinted screen, where every icon looks like a plain 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 wallpaper region with the same brightness, and the grid vanishes into it. That is the camouflage look if you chose it, and an accident if you didn't. Accessibility guidance helps with 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. Colors that are only "slightly different" are too close for shapes you need to find quickly.

Two practical tests catch both failures in seconds. First, hold the phone at arm's length and try to identify three apps by glyph alone. If you can't, the glyph-tile contrast is gone: reduce saturation before you touch 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. The fix can also be on the wallpaper side: sometimes a calmer wallpaper solves it with the same tint.

The workflow: extract, apply, match the gradient back

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

Extract. Open the icon tint matcher and give it your wallpaper: a photo, a downloaded gradient, anything. Its own extractor reports up to five dominant colors. Each comes with its measured share of the sampled pixels (those nearer to it than to any other reported color), and the page adds the suggested tint hue and saturation from the largest share plus the complementary and analogous companions, all copyable as hex and HSB. A small vivid subject can lose the pixel count to a large calm background, so if the suggested color isn't the one you care about, use the shares to pick another listed color.

Apply. On an iPhone, set the Tinted sliders to the chosen hue and saturation using the steps above. On a Pixel or Galaxy, the system derives the tint from the wallpaper itself, so to get a specific tint you set a wallpaper whose dominant color is that tint. The next step makes one.

Match the gradient back. The matcher's "generate a matching gradient from this palette" button opens the wallpaper maker with the extracted palette in 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. The loop works 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: every gallery entry is also a recipe of a seed, a palette and a point count, so you can read the matching tint straight off its palette. To rebuild a matched set later, keep the maker's page link, which holds the recipe (seed, palette, point count and size), and note the hue and saturation you set. Any phone in the maker's list can use the same seed and palette at its own exact native size.