HMI - colors in the visualization

Article#: 00109

Date: 2025-05-07

Author: Radim

Before we design an HMI visualization, it is important to know how we want to use colors. Color is a very powerful tool for visual presentations. Since colors subconsciously attract people's attention, we should pay close attention to how we use colors in our HMI design. People can recognize instances of a certain color much faster than instances of a certain shape. The correct use of color in HMIs is not just a question of aesthetics, but a key factor for efficient and safe operation. It increases clarity, improve recognition of critical conditions and reduce the risk of human error. At the same time, it can pose a danger to operation if used improperly. The use of colors should be standardized, consistent, strictly followed and documented in the HMI style guide.

There are several reasons why designers and HMI developers misuse colors: to make the visualization "prettier", to prevent the visualization from being "boring", to make the visualization "more realistic" or to make it more like a phone app. Color can be effectively used to highlight items on a screen only if it is not overused for other purposes. Excessive use of colors leads to chaos and reduces clarity. On the contrary, screens with minimal color offer the operator better situational awareness by helping them focus on the essentials.

To ensure an optimal HMI design, it is very important to establish and strictly follow color standards.
Determine colors and their meanings. The number of colors should be kept to a minimum, with only distinguishable colors used consistently. Sticking to a limited color palette prevents visual overload for users. It is impractical for operators to have to remember too many color meanings. Use specific colors for specific things. Once colors are assigned a specific use or meaning, no other color should be used for the same purpose.

In the HMI development environment, define a color scheme where the colors specified by the design are available. Each color should be defined under a name. In the development environment we do not use the color definition itself but its name (constants e.g. Green01, Red05, etc.). (Names don't need any specific meaning. We can have assigned the meaning to the color name in the HMI style guide documentation.)
It is important that the developer selects only from a set of predefined colors. This rule allows easy modification of the used color in all its occurrences from one place if necessary. And we always have a good overview of where the colors are used.

If the system status is as expected, the HMI display should not emphasize normal conditions or unnecessarily draw the operator's attention. A proper use of colors draws operator attention to the point in the process that has deviated from a normal or expected state. There are users who are color impaired (about 10% of men and 1% of women are colorblind). So color alone should not be the only indicator for important information. In addition to the color, relevant information should also be recognizable by another indication such as a symbol or a text.

Simulation of the normal (top half of photo) and dichromatic (lower half) perception of red and green apples
Article about color blindness on Wikipedia

Don't use colors for a symbol just to give this symbol a color. Parts of the machine that do not provide any information about the status can be displayed in the visualization as pictograms.
The color coding in the HMI should also be consistent with hardware indicators on the machine, such as light tower lamps and LED indicators, and should follow local standards if necessary.

Where color is used, make sure it provides enough contrast with the background, but not too much, as excessive contrast may cause eye strain and fatigue. The background color should be selected to provide acceptable and sufficient contrast in expected ambient lighting conditions. For an HMI display background, it is always recommended to use pastel shades such as light grey or light brown, which help reduce glare and operator fatigue. These colors are pleasing to the eyes and contrast well with the darker and also lighter colors (e.g. red, yellow, green, blue, etc.) used for the other components on the HMI screen. Use of color gradients should be avoided, as the changing hue of the color gradient causes a decreasing contrast to the text or symbols in the foreground.

Our eyes are trained to look for contrast. Large areas of strong colors will detract from important data. Even a monochrome black shape on a light background can be too dominant or even visually distracting. Screens depicting the operation running normally should not show brightly saturated colors. Try to use bright, saturated colors only to indicate abnormal conditions to draw a user's attention to critical data.

Reference:

1. Akram Hossain, Tanima Zaman. American Society for Engineering Education (2012). AC 2012-3605: HMI Design: An Analysis of a Good Display for Seamless Integration between User Understanding and Automatic Controls.
2. Bill R. Hollifield. Hexagon AB (2021). Maximize Operator Effectiveness: High Perfomance HMI Principles and Best Practices. PAS High Perfomance HMI Part 1 - White Paper.
3. General Electric (2021). Modern HMI/SCADA Guidebook for Efficient Operations.
4. John Krajewski. AVEVA (2023). HMI/SCADA design fundamentals: Building for situational awareness - White Paper.
5. Opto 22. Building an HMI that Works - Best Practices for Operator Interface Design.
6. RealPars. High-Performance HMI Colors - Palettes and Inspiration.
7. Rockwell Automation (2019). Process HMI Style Guide - White Paper.
8. Stephen Few. Analytics Press (2013). Information Dashboard Design - Displaying data for at-a-glance monitoring. Second Edition.

© Radim-Automation, 2020–2025. All rights reserved.
Sharing of this article is permitted with proper attribution (link to the original page).

Related previous articles:

• HMI – Don’t hide anything
• HMI is not a web page
• HMI - Don't overdo it with complex design
• HMI - Have a consistent style
• High Performance HMI
• Graphic designer
• Clear signals
• Design considerations for effective HMIS
• Design machines with a focus on user's abilities and needs
• Project leader
• Why do automation projects fail?
• Collect all the requirements and sort them!
• Functional and intuitive HMI
• HMI and PLC applications should grow together
• More than just start and stop
• Don't make it worse!
• What does the customer need?
• Don't disappoint your customer!
• Focus on target!
• Keep it simple!
• Transparency and reliability

Related next articles:

• What makes an HMI intuitive?

Comment#: 00001

Date: 2025-05-19

User: Radim

"Although black and white provide good color contrast but using these in background makes the screen look glare. Therefore, these are also not right choice as screen background."

- Akram Hossain, Tanima Zaman. American Society for Engineering Education (2012). AC 2012-3605: HMI Design: An analysis of a good display for seamless integration between user understanding and automatic controls.

Comment#: 00002

Date: 2025-05-19

User: Radim

"It took 25% longer to find alarms when red was also used to indicate motor/valve status as when it was used for alarming alone."

- Opto 22. Building an HMI that Works - Best Practices for Operator Interface Design.