Skip to end of banner
Go to start of banner

HMI Colors

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

Below are groups of colors used for safety signs as well as HMI displays.

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

  • No labels