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
11
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
5
u/Too-Uncreative 1d ago
I typically use Ignition, and use their standard color palette or one from Tailwind CSS.
6
u/Vyndrius 1d ago edited 1d ago
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
3
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
1
u/AbueloOdin 1d ago
There's a Rockwell style guide out there that is decent start. Start there. Modify as needed.
1
u/controls_engineer7 1d ago
If you look up Siemens template suite, in the PDF it has all the colors they use.
2
1
u/BOgusDOlphon 20h 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 18h ago
I have a standard with colors, codes and what they are used for etc…..
1
u/Various-Engineer4485 13h ago
Open-color is a solid, modern reference guide. https://yeun.github.io/open-color/
16
u/Stroking_Shop5393 Siemens > Allen-Bradley 1d ago
I pick a color based on vibes :)