Color in Games: Rarity, HUDs, and Playing Without Color
In a game you have a fraction of a second to read the screen: is that item worth grabbing, is my health critical, is that player friend or foe? Color answers all three before you've finished thinking - a gold border screams "legendary," a red bar screams "run." Games have turned color into a fast, learned language, and, because millions play, they've become quiet leaders in making that language work for colorblind players too. This is the interactive guide to color in games.
Color that works at speed
Game color has a job most design never faces: it has to be read instantly, under stress, in a cluttered scene, often in peripheral vision while you're doing three other things. There's no time to study a legend. So games lean on learned color conventions so consistent that players read them reflexively - a purple item is epic, a red bar is danger, a blue pool is mana. The color has become a word.
Because these signals carry real stakes - a missed health warning is a lost match - games treat them seriously. They make colors maximally distinct, back them with redundant cues (a shape, an icon, a number, a position), and test them under color-vision deficiency, which affects roughly one in twelve men. The result is some of the most rigorous applied color work anywhere: color that has to function, for everyone, in the heat of play.
The loot rarity ladder
The most universal convention in games is the rarity ladder: common gray, uncommon green, rare blue, epic purple, legendary orange or gold. Notice the shape of it - the colors climb from dull and cool (gray, muted green) toward bright and warm (vivid purple, glowing gold), so a rarer drop literally looks more valuable and grabs more attention. Walk the ladder.
Gray to gold, dull to dazzling
The standard rarity tiers as an item drop. Step up the ladder and watch the border color climb from cool and muted to warm and vivid, its glow intensifying - the visual grammar of "more special." The tier name is shown too, because color alone never carries the meaning.
Playing without color
Now the hard part. Roughly one man in twelve has a color-vision deficiency, and the classic game palette - red enemies, green allies - is exactly the pairing that red-green colorblindness erases. See a game scene as those players do, then watch a colorblind mode remap the colors to a palette that stays distinct.
The same screen, different eyes
A game HUD with team and threat colors, shown through simulated color-vision deficiency (using the Machado model). Toggle the deficiency type, and switch on a colorblind-safe palette to see how remapping to distinguishable hues - plus shapes - restores the information for everyone.
Reading the HUD
The heads-up display is a color-coded dashboard: green health, blue mana or shield, yellow caution, red critical. A well-made health bar changes color as it drains - and crucially, it also shrinks, so the message survives even if you can't read the hue. That double encoding, color plus length, is the golden rule. Drain the bar.
Green, yellow, red - and length too
A health bar you can drain. It reddens as it empties - green when healthy, yellow at caution, red when critical - but it also gets shorter and shows a number, so the warning reads even without color. Redundant cues are why the message never gets lost.
Telling the teams apart
In a team game, mistaking friend for foe is fatal, so team colors must be instantly separable - against the environment, at a glance, and under color-vision deficiency. Pick two team colors and the demo checks how distinct they really are: their perceptual difference, and whether they survive red-green colorblindness. Good games often let players choose.
Friend or foe, in a fraction of a second
Choose two team colors. The demo shows them side by side in normal vision and under deuteranopia, and reports their perceptual difference (ΔE-like) in each. Classic red-vs-green looks fine to most but collapses under red-green CVD; a blue-vs-orange pairing stays distinct for everyone.
The conventions
The color grammar players read without thinking.
Best practices and pitfalls
Test your understanding
Six questions on rarity, HUD status, team colors, and colorblind accessibility. Instant feedback, no scores recorded - a wrong answer comes with a short explanation.
Quick check
Continue your journey
Game color builds on semantic UI, accessibility, and colorblindness - here's where to go next.
Semantic Color: Status, States, and Feedback in UI
The status-color grammar HUDs share with apps.
Design · 13Accessible Color Design and WCAG Contrast
The contrast and redundancy games depend on.
Vision · 6Color Blindness and Color Vision Deficiency
The vision types colorblind modes are built for.
Design · 26Color Psychology and the Meaning of Color
Why red reads as danger and gold as reward.
Design · 25Color in Data Visualization
Distinguishable categorical palettes, the sibling problem.
Design · 36Building a Color System
Turning game conventions into a reusable token system.