High-Performance HMI Colors | Palettes and Inspiration

In this article, we are going to cover the proper use of HMI colors, color palettes, and inspiration of High-Performance HMI colors.

The proper use of a color convention when developing an HMI is becoming more prevalent and is the subject of years of research, study, and even workplace ergonomics.

HMI colors

Today we are going to discuss in higher detail the proper use of color and the reasons why when developing your HMI project.

As we discussed in our four-part series, Introduction to High-Performance HMI, we learned that the purpose of a High-Performance HMI is to provide information, not just data.

A fundamental component of this is the use of proper colors and a color palette when developing a High-Performance HMI.

Since color is an attribute that people will process unconsciously, it is quickly noticed and will stand out above objects and shapes. Color is so powerful in people’s perception, that the instinct is to derive meaning from it.

When you are creating an HMI project, your job will be for people to find the meaning from the colors that they see, and be able to take action on their instincts.

HMI color palette

When we are discussing what a color palette means in computing and graphics, it is a full range of colors that can be displayed on a screen or in some cases, a collection of colors and tools for use in paint and illustration programs.

In the world of High-Performance HMI, the color palette is the range of colors that you will use in an HMI project.

So, while your monitor may be a 4K LED that is capable of creating millions of different colors, your HMI application will be limited to the colors in the particular palette of your project, with contrasting colors used for notifications and alarms.

Another very important reason for a color palette is to reduce visual fatigue and illusions from long hours of viewing an HMI that uses bright and contrasting colors that is prevalent in many HMI applications.

Remember that we are designing an HMI that follows a user’s mental model and workflow, so there is minimal need for color as it draws attention and the goal is to reduce the visual clutter that comes with high-intensity colors.

When we are talking about the user experience in an HMI, remember that there are users who are color impaired, thus making the visual differences between red-green, green-yellow, and white-cyan particularly difficult for them.

HMI grayscale palette

The vast majority of High-Performance HMI projects are in grayscale. This particular color palette is suited to a wide variety of applications and processes, and the colors have been developed for optimum system performance and visual appearance.

This palette will typically use a light gray background with dark gray or black lines used to depict process flows. However, when used properly, color adds important value to the HMI and should be limited to alarms, input fields, static data, and live data.

HMI colors standard

When developing the HMI, the use of color should be consistent, standardized, and documented in your style guide.

When selecting the color palette for your project there are some standard guidelines for colors that you should follow.

Alarms should appear as bright and intense colors, but should not share a color with any other object in your HMI.

Live data should use less intense and cool colors such as dark blue or dark green. These colors are not as distracting as an alarm but still will provide separation between live and static data.

The interior of static equipment like tanks should be the same color as your background with dark gray or black outlines.

Remember that static objects should be simplified and not have a high level of detail with only the most relevant information of the static equipment displayed on the project.

As always, gradient fill should never be used when displaying a process device. When depicting the state of an object, the emphasis on color should be less than shape, fill, or static text.

In every project that you create, when color is used it should provide enough contrast with the background so as not to create eye fatigue.

Grayed-out objects on HMI

When you are working on your project and creating conditions for item visibility, it should be designed so that users can view all commands and configurations of an object.

If you are not granting a user group access to modify the configuration of an object, then that object should be grayed out, with the fill of the object matching the screen background and all lines and text should be light enough to just contrast the fill.

An object should not be made invisible because doing so would create confusion if a user or user group is later granted access and sees a new object on their HMI.

Use of animation in HMI

Another important aspect of the use of color in an HMI is the use of animation. Flashing animation or animation that blinks should be used to notify the operator of a condition that requires an immediate response.

The animated object should be legible in both states, so alternating from on/off is not as desirable as alternating shades or colors.

In every case, the text itself should not flash or blink, rather the border or the object next to the text should be animated instead.

If you do use blinking animation, make sure to provide a way for the operator to stop the blinking once the condition is acknowledged.

HMI text

In talking about text on an HMI, it should be clear and easy to read. Text should be consistent in font, with Sans Serif font being a popular choice.

Text should be black or dark gray, and the font size should be relative to the monitor being used.

If the monitor is a large wall mount, then the font size should be larger so that a user can see the text information from a distance. On the other hand, if a monitor is on a desk, then the font size should be reduced.

While there are still many more aspects of the use of color in an HMI project, this lesson should have given you a good understanding of designing a well-thought-out HMI with the proper use of color.

Want to Learn More?

We hope you enjoyed this lesson. We recommend checking the following related articles, if you haven’t already, to have a better understanding of High-Performance HMI:

What is High-Performance HMI? (Part 1 of 4)

High-Performance HMI Design Basics (Part 2 of 4)

Development of High-Performance HMI Philosophy (Part 3 of 4)

Detailed Design Principles of High-Performance HMI Display (Part 4 of 4)

▶ High-Performance HMI Colors | Palettes and Inspiration

If you have any questions about High-Performance HMI or regarding selecting the right HMI panel for your project, add them in the comment section and our automation engineers with 20+ years of experience will surprise you with a detailed in-depth answer to your question.

Got a friend, client, or colleague who could use some of this information? Please share this article.

‍