The Calm HMI Color Palette: Why Gray Wins

Walk into a control room built in the late 1990s and the screen often looks like a Christmas tree: red pumps, green motors, blue tanks, yellow pipes, gradient buttons, drop-shadows, photorealistic 3D vessels. Someone in the design phase asked “what color should the pump be?” and the answer was a personal preference rather than a system rule.

The result is a screen full of color where color no longer means anything. When everything is colorful, the operator's eye cannot tell which red object is alarming and which one is just decorated red. This is the phenomenon behind chronic alarm fatigue, missed events, and the long ISA-101 conversation that ended with: start with gray, and earn every color.

1. The two-axis color rule

ISA-101's color philosophy condenses to two rules:

1. Color encodes state, not identity. A pump is a pump because of its shape, not because it is blue. Two pumps in the same line should be drawn identically — only their state differs.
2. Saturated color is reserved for abnormal conditions and operator state changes. The full saturated red, orange, yellow, and blue are spent budget. If you spend them on decoration, you have nothing left for alarms.

2. The canonical palette

Surfaces (most of the screen)

Alarm priorities

Equipment state

That is it. Twelve colors total, half of them gray. Every modern ISA-101 screen lives within this palette. When you see a screen that violates it, you can usually trace the violation back to the project's earliest decisions — and you can usually predict that the operators have learned to ignore at least one of the “important” colors because it has been used decoratively somewhere else.

3. Why gray works

Gray works because it does not compete with alarm colors. The retina has limited attention budget — what gets noticed is what is different from its surroundings. A red P1 indicator on a gray sea jumps out instantly. The same indicator on a candy-colored screen is just one more colorful element, statistically indistinguishable from a decorative red label.

Calm HMIs do not look beautiful. They look like instrument panels — and that is the point.

This applies to graphics too: ditch 3D bevels, gradients, drop shadows, glossy reflections. Flat 2D wins every usability study because the operator's pattern matching does not have to do extra work to extract the abstract information from photorealistic decoration.

4. Color blindness and contrast

About 8% of men and 0.5% of women have some form of red-green color vision deficiency. Designing alarms that rely solely on red vs green to communicate priority excludes a meaningful chunk of your operator population.

The fix is not to change the colors — engineers expect red to mean critical — but to add redundant encoding:

• Shape: P1 alarms get a triangle badge, P2 a hexagon, P3 a square, P4 a circle. Even with the colors removed, the priority is readable.
• Position / pattern: alarm badges appear in a consistent corner of the symbol, with priority encoded by the badge text (P1, P2, …) as well as color.
• Contrast: WCAG AA recommends 4.5:1 for body text against background. Pair every alarm color with white text and tested contrast ratios.

5. Anti-patterns

Decorative color

“Make the boiler orange because it is hot.” No. The boiler is gray; its temperature display uses a state color when out of range. Coloring the equipment itself trains operators to ignore the color signal that actually matters.

Gradient and glassy buttons

Gradients waste color information across many shades, none of which mean anything. They also age badly — what looked “modern” in 2008 looks dated in 2024. Flat fills do not date.

Permanent blink

Animation is a precious resource. A blinking element should mean “new alarm, requires acknowledgment.” Once acknowledged, the alarm goes solid (still red) but the blink stops. Permanent blinking degrades into background noise within hours.

Color for normal data

“Show flow rate in blue, temperature in red.” This collides with alarm meaning. Use neutral gray for normal numerical readouts and switch to a state color only when the value is out of normal operating range.

3D vessels and photorealism

A perspective-rendered tank with chrome highlights looks impressive in a sales demo and slows operator scanning by 20–30% in studies. Use flat 2D — the brain pattern-matches faster on simple shapes.

6. Putting it together: a “before/after” example

Imagine a screen with three pumps. The “before” version uses default WinCC ME library shapes:

• Pumps drawn in saturated blue with white pump-curve symbols.
• Tags floating in red text because red “stands out.”
• Background with a faint gradient from white to light blue.
• One pump alarming — its outline is now flashing red, on top of the blue body.

What the operator sees: a colorful screen where one element is flashing. Which element? The eye has to hunt across blue / red / white / gradient before it lands on the alarming pump.

The “after” version using the calm palette:

• Pumps drawn in light gray fill with darker gray outline (running) or solid green for state.
• Tags in monospace dark gray (P-101, P-102, P-103).
• Background flat #C8C8C8.
• Alarming pump shows a small red P1 badge in the corner. The pump body still says “running” because it is.

Now the alarming pump jumps out. The eye needs no hunt. That is what calm HMI is for.

7. The HMI Library design tab

The catalog's design tab lets you tweak the palette and font and see all 300+ symbols re-render in real time. You can lighten or darken the gray, switch the alarm hues to your client's house style (within reason — keep them distinguishable), and decide whether to show tags burned-in or as separate text objects.

8. Further reading

• ISA-101.01-2015 — “Human Machine Interfaces for Process Automation Systems”
• Bill Hollifield et al. — The High Performance HMI Handbook
• WCAG 2.1 contrast guidelines (W3C)
• The ASM Consortium — “Effective Operator Display Design”