Colour in game UI: a palette that sits on top of your game

Interface colour is not art direction

• The game's palette is expressive. It sets mood, time of day, faction, biome. It changes constantly and it should.
• The interface palette is functional. It must stay legible over all of that, and it must not compete with it.
• They should be related, not identical. Interface colour usually comes from a narrow, desaturated slice of the game's world, plus an accent that the world does not use.
• The most common failure is an interface built from the key art's most saturated colours. It looks beautiful in a mockup with that one background and collapses everywhere else.

Build from roles, not swatches

Do not start by picking colours you like. Start by listing what needs to be said, then assign the smallest possible number of colours to say it.

That is typically eight to twelve values in total. If your interface uses thirty, most of them are decorating rather than communicating, and the ones that carry meaning have lost their power because everything is coloured.

One accent, defended

The accent is the most valuable colour in the interface because it is the one the eye finds first. It should mean exactly one thing.

• Pick what it means. Usually: this is where you are, or this is the primary action. Focus states on a controller depend on it entirely, per designing game UI for controllers.
• Never use it decoratively. An accent used on a border, a divider and a background is an accent that no longer points at anything.
• One accent per screen at a time. Two competing accents means neither is primary.
• Make sure the game world does not own it. If your accent is the same red as the enemy indicator, you have two meanings on one colour.
• The WAR interface works on exactly this discipline: an almost monochrome ground, and a single accent that only ever means selection or primary action.

One meaning per colour

The rule is simple and it is broken constantly, usually because different systems were designed by different people at different times.

• Red cannot mean danger, unblockable, fire damage, the enemy team and the shop discount in the same game. Pick one, find another channel for the rest.
• Green means safe or success, and then somebody makes it the poison damage type. Now a green flash is ambiguous during combat, which is exactly when clarity matters.
• Write the semantics down as part of the design system, and check new features against it. This is a one-page document that prevents an entire category of confusion.
• When you run out of colours, use shape and position. That is not a compromise, it is the correct answer, and it is what makes the interface survive desaturation.

Contrast over a moving background

Web contrast ratios are a useful floor: roughly 4.5:1 for body text and 3:1 for large text. The complication is that a web page's background holds still and yours does not.

1. Give elements their own ground. A low-opacity dark plate behind text is worth more than any amount of colour tuning.
2. Test against your brightest level, which is the snow, the explosion or the white skybox, and not the grey box scene.
3. Check at low brightness, because battery saving on handhelds and phones is the normal state rather than the exception.
4. Check on an uncalibrated television, where subtle greys collapse into each other and your five-step neutral ramp becomes three.
5. Increase the steps between tones rather than adding more of them. A ramp with clear jumps survives bad displays; a subtle one does not.

The systems that eat your palette

Rarity, factions, teams and damage types each want their own set of colours, and together they will consume every hue you have.

The general principle: colour is the second channel, never the first, for anything with more than three or four values. Players cannot reliably rank six hues, but they can read six shapes.

Why game interfaces are usually dark

• Games are mostly played in dark rooms, and a bright interface over a dark scene is a flashbang.
• Dark grounds let the artwork stay the brightest thing on screen, which is the correct hierarchy since the artwork is the product.
• Scrims work better dark. A dark, low-opacity plate reads as depth; a light one reads as a sticker.
• But dark is not automatic. Cosy games, casual mobile and anything with a bright world often want light interface, and the rules invert cleanly.
• If you offer both themes, define the palette by role first, so switching themes swaps values rather than requiring a redesign.

The desaturation test

The single most useful check in this entire article, and it takes ten seconds.

1. Screenshot the busiest screen in your game.
2. Convert it to greyscale.
3. Ask: can I still tell what is interactive, what is selected, what is dangerous, what is better or worse?
4. Anything that became ambiguous is encoded in colour alone, which fails for roughly one man in twelve, and for everyone in bright sunlight or on a bad display.
5. Fix by adding a second channel: shape, icon, position, label, border weight. See game UI accessibility.

A palette that survives greyscale is a palette that survives colour blindness, daylight, cheap televisions and your own art direction changing in month nine.

Platform changes the answer

• Television: consumer sets are not calibrated and crush both ends of the range. Widen your steps.
• Mobile in daylight: saturation is the first thing sunlight takes, so contrast must come from lightness rather than hue. See mobile game UI design.
• Handheld panels are viewed at close range and often at reduced brightness on battery.
• VR: bright, saturated panels are fatiguing at close range and the lens softens edges. Lower saturation than you think, per VR UI/UX design.
• HDR: be careful. Interface elements pushed to high brightness in HDR are genuinely uncomfortable, and a HUD is on screen constantly rather than for a moment.

A colour audit

1. Screenshot three busy screens and count the distinct interface hues across all of them.
2. Find the most saturated pixel in each. Is it interface or game?
3. Desaturate all three. List what became ambiguous.
4. Write down every meaning your accent currently carries. If it is more than one, split it.
5. List every meaning attached to red, and to green. Same test.
6. Check the disabled state. Is it colour alone?
7. View a screen at 30 percent brightness.
8. View it over your brightest level and your darkest.
9. Check your rarity ramp in greyscale. Is it still ordered?
10. Ask a colourblind player, or use a simulator, on the screen your game most depends on.