Color is the fastest communication channel in game UI. Before a player reads a shape or a label, they register hue — red means danger, green means safe, blue means mana. But color in icons is easy to get wrong: hues that look great at full size turn muddy at 32 pixels, and palettes chosen for beauty often fail the readability test. This guide covers the color decisions that actually matter for game icons.
Value beats hue every time
The most important color property for icons is not hue — it is value (lightness). At small sizes, the human eye separates light from dark before it separates red from green. Two icons that differ only in hue can be indistinguishable to colorblind players; two icons that differ in value are readable by everyone, including the roughly 8% of men with some color-vision deficiency.
Practical rule: when you design an icon set, make the value differences do the heavy lifting. A light sword on a dark frame, a bright potion on a muted frame. If you convert your icons to grayscale and they still read distinctly, your color system is sound.
The 60-30-10 structure for icon palettes
Each icon should use a small structured palette. The proportions that work reliably:
- 60% — base fill (the object's identity color)
- 30% — secondary (frame, handle, liquid, details)
- 10% — accent (glow, gem, highlight, rarity mark)
The accent color is where you spend your saturation. A saturated accent on a quieter base reads as a special effect; saturating everything reads as noise. When you generate variations, the difference between a good palette and a great one is usually the accent choice.
Hue contrast: the wheel in practice
Two hues work together when they are far enough apart on the wheel. For icons, the strongest pairings are:
- Complementary (opposite): red/cyan, orange/blue, yellow/violet — maximum pop, use for hero items
- Split-complementary: one hue plus the two neighbors of its opposite — vivid but balanced, good for skill icons
- Analogous (neighbors): blue/teal/green — calm and coherent, good for factions or elements
- Triadic: three hues evenly spaced — playful, good for casual games
In a hotbar, neighboring icons should not share the same hue family — two blue potions next to each other force players to read labels. Space the hues deliberately across the set.
The colorblind-safe test
Design for the common color-vision deficiencies from the start:
- Never rely on red/green as the only difference (most common deficiency)
- Pair red with a shape or value difference, not just a hue shift
- Blue/yellow is the safest high-contrast pair for most deficiencies
- Use the accent color redundantly: a red rarity gem should also have a different silhouette or brightness
The grayscale test covers most of this. If the icons remain distinct in grayscale, they remain distinct for deuteranopia and protanopia. Protanopia (red-blind) is the harder case — test with a simulator if your game depends on red/green coding.
Palettes that survive 32 pixels
At small sizes, some colors degrade faster than others:
- Dark values (navy, maroon) blur into near-black — keep them out of the base fill
- Very light values (pale yellow, light gray) lose presence — use them as highlights only
- Saturated mid-tones (mid violet, mid orange, mid green) survive best — this is your base-fill zone
- White text or white accents survive well on saturated fills
A reliable small-size palette shape: a saturated mid-tone base, a darker shadow one step toward black, a lighter highlight one step toward white, and a dark-but-not-black outline. This is the classic icon structure, and it works because every pixel has a clear value role.
Rarity and status color languages
Games that use color as a system should define the language once and stick to it. Common conventions players already know:
- Rarity: gray/white → green → blue → purple → orange → red (the loot-ladder)
- Health: red, often with a cross or heart shape
- Mana/stamina: blue or green, with a droplet or bolt
- Damage types: fire orange, ice cyan, poison green, lightning yellow, arcane violet
- State: buff green, debuff red/purple, stun yellow
If you invent your own color language, document it in your style guide — and keep it consistent across icons, text and effects. Players learn fast, but they learn once.
Backgrounds and frames: quiet on purpose
The frame and background exist to make the object pop, not to compete with it. Two rules:
- Frame value should sit below the object's darkest shadow or above its lightest highlight — never in the middle band
- Frame hue should be a desaturated relative of the palette (same hue family, much lower saturation), not a random complementary color
A violet icon in a violet-tinted frame reads as a cohesive badge; the same icon in a yellow frame fights itself. When you use a generator, pick frames from the same hue family as the element — the set will look designed rather than random.
Testing your palette in the wild
Before you commit a palette, test it the way players will see it:
- Preview the full set at 32 px on the actual UI background
- Check neighboring icons for hue collisions
- Run the grayscale test on the whole set
- Check colorblind simulations for your critical pairs
- View on a bright phone screen and a dim monitor — mobile players are outdoors
Color in icons is a system, not a decoration. Give every color a job — identity, rarity, state, element — keep values distinct, spend saturation on accents, and verify at the size players actually see. Your icons will pop, and your players will read them without a second thought.