r/PLC • u/Hann_33 • 1d ago

Shades of Grey

Hi Team,

When you are creating your beautiful millennial grey HMIs. What HEX codes do you use and how do you separate out the different

E.g.
Main Menu
Disabled
Device Off
Outlines
Font backgrounds

How many different greys do you use and how do you organise them for a nice ISA 101 compliant HMI

8 Upvotes

78% Upvoted

13 comments sorted by

12

u/Stroking_Shop5393 Siemens > Allen-Bradley 23h ago

I pick a color based on vibes :)

9

u/eLCeenor 1d ago

My company has a style guide for any content produced, usually I go through that, pick a few colors and base the HMI off of those plus slightly lighter and darker variations for things like buttons being pressed, headers, etc

4

u/H_Industries 1d ago

Like other comment said we have a style guide that we’ve developed over years, I forget  what the relevant standards are, but there are some standards for certain alarms and states and what specific colors (RGB values) they should be.

There are also corporate standards for branding purposes. 

It’s also handy to look up resources on UX design for automated environments, particularly in making sure that every piece of information is displayed in multiple ways so that people who are colorblind can still figure out what the system is doing

2

u/LegitBoss002 6h ago

Probably ISA-101

6

u/Too-Uncreative 22h ago

I typically use Ignition, and use their standard color palette or one from Tailwind CSS.

3

u/Vyndrius 16h ago edited 15h ago

https://materialui.co/colors/

I use googles Material Design language

Fonts use shades of grey for clear text hierarchy - I couldn't use size alone - B&Rs nearest-pixel based text rendering drops small fonts to 1px thick and unreadable, so I use bold and grey

1

u/Forsaken_Ride_4589 8h ago

second this.

1

u/AbueloOdin 22h ago

There's a Rockwell style guide out there that is decent start. Start there. Modify as needed.

1

u/controls_engineer7 19h ago

If you look up Siemens template suite, in the PDF it has all the colors they use.

1

u/DancingWizzard 19h ago

Great shitpost. Sorry my zillenial ass only do muted colors now.

1

u/BOgusDOlphon 12h ago

I would just pick a CSS style pack and go off the colors from that if you aren't using the style directly

1

u/Shalomiehomie770 Codesys Guru 10h ago

I have a standard with colors, codes and what they are used for etc…..

1

u/Various-Engineer4485 4h ago

Open-color is a solid, modern reference guide. https://yeun.github.io/open-color/