Probe A（）
—
Visibility: —
Guide meter
3:1 large text, bezels, lines | 4.5:1 body text
Operator panel and HMI color review toolkit
Review the colors and contrast of text, bezels, and grids on an operator panel or HMI. You can pick from a photo, and copy several formats.
Colors and photos stay on this device. Nothing is sent to a server.
Select a layer, then mix its color.
Select a layer, then pick a color from the photo.
Drop a photo or a screen capture
or click to choose a file
JPEG, PNG, WebP, or GIF — up to 8 MB. A shot of the actual panel is closer than a catalog chip.
HEX
rgb()
0x
RGB565
Edit layer
Panel preview
Drag the probes. Put one on a label and the other on a bezel or a grid line.
Probe B（）
—
Visibility: —
Guide meter
3:1 large text, bezels, lines | 4.5:1 body text
This meter is a guide. It is not a pass mark.
Layer values for a note or a source file.
Panel background
HEX
rgb()
0x
RGB565
Label text
HEX
rgb()
0x
RGB565
Bezel
HEX
rgb()
0x
RGB565
Grid lines
HEX
rgb()
0x
RGB565
Copy all four layers from here.
Tips
PC colors drop a step on 16-bit screens
Most industrial touch panels store color in 16 bits. HEX you pick on a PC often looks a little different on the unit. Read RGB565 in the copy block before it goes into the source.
An alarm color is not enough if the bezel is close
Change only the banner hue and a weak spot remains when the bezel sits in the same family. Check the bezel against the background as well as the banner against the background — two points, not one.
A photo of the live panel beats a catalog chip
Shop-floor light rarely matches a catalog chip. Take the background from a photo of the touch panel or the enclosure, and the review sits closer to the line.
The meter is a guide, not a pass mark
Light level and viewing angle change what you see. The meter is a guide. It is not a pass stamp for a website, a safety sign, or a panel standard.
Readable text needs a gap from the bezel, not only the background
On-screen text is not decided by how much it stands out against the background alone. When the bezel sits close to the background, the letters can still read while the panel shape sinks, and the text looks different too.
Common Use Cases
Value displays on a touch panel
A tank level or a temperature on a dark background. Set the screen color first, then the value color, and check the label against the background before the screen is copied to the line.
Nameplates and lamp colors on an operator panel
A legend, a lamp, and the enclosure paint sit in one view. Lettering can still read while the bezel sinks — that gap is easy to miss with one check.
Alarm banners
A warn or fault band on a dark watch screen. Check the banner against the background, then the bezel against the same background, or you miss a band that shouts while the bezel disappears.
Background color from a live-screen capture
A photo or a screenshot of the running HMI. Take the background from that shot, then review text and grid on top of that color — closer to the floor than a catalog chip.
Night-shift watch screens
A label that looked fine in a bright meeting room can sink in a dark control room. Check it again on the dark background you actually run — a U.S. plant at night, or a night shift in Europe.
Line colors on a drawing over the panel background
Grid or leader lines on the same background as the screen. If the line disappears here, the printed drawing will too.
Frequently Asked Questions
What does the ratio on each probe mean?
It is a luminance ratio published by the W3C. Treat it as a guide. It is not a website conformance result, and it is not a pass for safety signs or ISO.
What do the 4.5:1 and 3:1 contrast ratios mean?
They are common guide lines. 4.5:1 is for ordinary text. 3:1 is for large text, bezels, and lines. The meter is not a certification.
Does this tool upload my photo?
No. Colors and photos stay on this device. Nothing is uploaded.
Why are there two probes?
Text against the background and a bezel against the background often read differently. One point hides that. Put A on a label and B on a bezel or a grid line.
How is this different from a color picker?
A picker is for taking a color. This page is for reviewing text, bezels, and grids on an operator panel or HMI. Taking a color from a photo is only a way to feed that review.
What are HEX, 0x, and RGB565 used for?
They are formats for a note or a source file next to the review. RGB565 is there for 16-bit screens. Comment wrapping for banners lives on the ASCII pages, not here.