HMI Colors
- Tim Williams
Below are groups of colors used for safety signs as well as HMI displays.
Colors[edit]
These are the colors specified in ISO Standard 3864-4 in RAL color standard.[5][4]
Meaning | RAL Name | RAL Number | RGB Hex[6] | Example of Color |
|---|---|---|---|---|
Warning | Signal Yellow | 1003 | #F9A800 |
|
Prohibition/Fire Equipment | Signal Red | 3001 | #9B2423 |
|
Mandatory | Signal Blue | 5005 | #005387 |
|
Safe Condition | Signal Green | 6032 | #237F52 |
|
Backgrounds and Symbol | Signal White | 9003 | #ECECE7 |
|
Symbol | Signal Black | 9004 | #2B2B2C |
|
In addition, ISO standard 3864-2:2016 lays out the following colors that correspond to levels of risk.[2] This standard adds "Orange" as an incremental color to the palette above.
Meaning | Background color of panel | Contrast color | Definition | RGB Hex | Example of Colour |
|---|---|---|---|---|---|
Low level of risk | Yellow | Black | RAL 1003 (per ISO 3864-4) | #F9A800 |
|
Medium level of risk | Orange | Black | RAL 2010, Munsell 2,5YR6/14G, or Munsell 5YR6/15G | #D05D29 |
|
High level of risk | Red | White | RAL 3001 (per ISO 3864-4) | #9B2423 |
|
ISO Safety Colors
Safety colors are defined in ISO 3864-4.
Color | hex | Color | Meaning |
|---|---|---|---|
Yellow | #F9A900 | RAL 1003 Signal Yellow | Low level of risk |
Orange | #D05D29 | RAL 2010 Signal Orange | Medium level of risk |
Red | #9B2423 | RAL 3001 Signal Red | High level of risk |
Blue | #005387 | RAL 5005 Signal Blue | Mandatory |
Green | #237F52 | RAL 6032 Signal Green | Safe Condition |
White | #ECECE7 | RAL 9003 Signal White | Backgrounds and Symbol |
Black | #2B2B2C | RAL 9004 Signal Black | Symbol |
ANSI Safety Colors
Color | hex | Color | Meaning |
Red | #bd2024 | ANSI Safety Red |
|
Orange | #ff7900 | ANSI Safety Orange |
|
Yellow | #ffe100 | ANSI Safety Yellow |
|
Blue | #004488 | ANSI Safety Blue |
|
High Performance HMI color palette
Display Color Use | Color Name | Definition |
Display Background (no tabs) | Light Gray 224 | R224 G224 B224 #E0E0E0 |
Tab Panel Background | Light Gray 224 | R224 G224 B224 #E0E0E0 |
Display Background behind tabs (with tabs) | Silver 192 | R192 G192 B192 #C0C0C0 |
Static Object Color Use | Color Name | Definition |
Title Foreground | Dark Gray 63 | R063 G063 B063 #3F3F3F |
Group Heading Foreground | Dark Gray 63 | R063 G063 B063 #3F3F3F |
Column Heading Foreground | Dark Gray 63 | R063 G063 B063 #3F3F3F |
Separator Line Color | Light Gray 216 | R216 G216 B216 #D8D8D8 |
Process and Connector lines | Gray 160 | R160 G160 B164 #A0A0A4 |
Equipment Border | Gray 160 | R160 G160 B164 #A0A0A4 |
Grouping Box | Light Gray 232 | R232 G232 B232 #E8E8E8 |
Notification Color Use | Color Name | Definition |
Low Priority Alarm | Magenta | R145 G106 B173 #916AAD |
Low Priority Alarm Foreground | White | R255 G255 B255 #FFFFFF |
Medium Priority Alarm | Yellow | R245 G225 B027 #F5E11B |
Medium Priority Alarm Foreground | Dark Gray 63 | R063 G063 B063 #3F3F3F |
High Priority Alarm | Orange | R236 G134 B041 #EC8629 |
High Priority Alarm Foreground | White | R255 G255 B255 #FFFFFF |
Urgent Priority Alarm | Red | R226 G032 B040 #E22028 |
Urgent Priority Alarm Foreground | White | R255 G255 B255 #FFFFFF |
Program Error/Bad Configuration | Black | R000 G000 B000 #000000 |
Program Error/Bad Configuration Foreground | White | R255 G255 B255 #FFFFFF |
Fault Condition Background | Black | R000 G000 B000 #000000 |
Fault Condition Foreground | White | R255 G255 B255 #FFFFFF |
Warning Condition Background | Dark Gray 63 | R063 G063 B063 #3F3F3F |
Warning Condition Foreground | White | R255 G255 B255 #FFFFFF |
Prompts and Attention Background | Light Gray 224 | R224 G224 B224 #E0E0E0 |
Prompts and Attention Foreground | Black | R000 G000 B000 #000000 |
Testing or Simulation Background | Light Gray 224 | R224 G224 B224 #E0E0E0 |
Testing or Simulation Foreground | Black | R000 G000 B000 #000000 |
Other Abnormal State Background | Light Gray 224 | R224 G224 B224 #E0E0E0 |
Other Abnormal State Foreground | Black | R000 G000 B000 #000000 |
If the normal state can appear in a control showing a notification, then the colors used for the normal state shall follow either State or Dynamic Data color uses standards |
|
|
Element State Color | Color Name | Definition |
Off/De-energized/Idle/Stopped/Closed |
|
|
Off/De-energized/Idle/Stopped/Closed | Gray | R128 G128 B128#808080 |
On/Energized/Running/Closed | Off White | R240 G240 B240 #F0F0F0 |
Disabled/Out of Service | Gray | R128 G128 B128 #808080 |
Manual Operations (Jogging) | Light Blue | R147 G194 B228 #93C2E4 |
Transition (Starting, Stopping, Accelerating, Decelerating, Opening, Closing) | Light Blue | R147 G194 B228 #93C2E4 |
Data Entry Color | Color Name | Definition |
Label Foreground | Dark Gray 63 | R063 G063 B063 #3F3F3F |
Engineering Unit Foreground | Light Gray 91 | R145 G145 B145 #919191 |
Input Field Foreground (edits allowed) | Dark Gray 63 | R063 G063 B063 #3F3F3F |
Checkbox Foreground (edits allowed) | Dark Gray 63 | R063 G063 B063 #3F3F3F |
Radio Button Foreground (edits allowed) | Dark Gray 63 | R063 G063 B063 #3F3F3F |
Input Field Foreground (edits prohibited) | Gray | R192 G192 B192 #C0C0C0 |
Checkbox Foreground (edits prohibited) | Gray | R192 G192 B192 #C0C0C0 |
Radio Button Foreground (edits prohibited) | Gray | R192 G192 B192 #C0C0C0 |
Input Field, Checkbox, Radio Button Background (edits allowed) | White | R255 G255 B255 #FFFFFF |
Input Field, Checkbox, Radio Button Background (edits prohibited) | Light Gray | R224 G224 B224 #E0E0E0 |
Dynamic Data Display Color | Color Name | Definition |
Label Foreground | Dark Gray 63 | R063 G063 B063 #3F3F3F |
Engineering Unit Foreground | Light Gray 91 | R145 G145 B145 #919191 |
Data Foreground | Blue | R071 G092 B167 #475CA7 |
Data Border (for diagrams only) | Light Gray | R192 G192 B192 # C0C0C0 |
Primary State Indicator Foreground | Blue | R071 G092 B167 #475CA7 |
Primary State Indicator Background | Light Gray | R212 G212 B212 #D4D4D4 |
Navigation Button | Color Name | Definition |
Foreground (Fill) | Light Gray 198 | R198 G198 B198 #C6C6C6 |
Border (Outline) | Gray 170 | R170 G170 B170 #AAAAAA |
Label | Dark Gray 63 | R063 G063 B063 #3F3F3F |