操作盤・HMIの配色検討ツールキット

操作盤や HMI の文字・枠・グリッドの色彩とコントラストを検討する。写真からの色取得も可能。各種フォーマットでのコピーも可能。

色と写真はこの端末のままです。サーバーには送りません。

右の各層を選んで、色を決める

写真や画面キャプチャをドロップ
またはクリックしてファイルを選ぶ
JPEG、PNG、WebP、GIF — 最大 8 MB。カタログの色より、実機の写真の方が現場に近い。
HEX
rgb()
0x
RGB565

編集する層

検討画面

計測点をドラッグする。一方を文字の上、もう一方を枠やグリッドの上に置く。

計測点 A

視認性:— 目安

3:1 大きい文字・枠・線 | 4.5:1 通常の文字

計測点 B

視認性:— 目安

3:1 大きい文字・枠・線 | 4.5:1 通常の文字

メーターは目安です。合格の印ではありません。

各層の値。メモやソースに貼る用。

背景

HEX
rgb()
0x
RGB565

文字

HEX
rgb()
0x
RGB565

HEX
rgb()
0x
RGB565

グリッド

HEX
rgb()
0x
RGB565

一度で保存しておきたい場合はこちら

ヒント

16ビットの画面では、色が一段落ちます

産業用のタッチパネルの多くは、色を16ビットで持っています。パソコンで決めた HEX は、実機では少し変わって見えることがよくあります。ソースへ渡す前に、コピー欄の RGB565 も見ておいてください。

警報色だけ変えても、枠が近いと足りません

バナーの色相だけを変えても、枠が同じ系統だと、まだ弱い箇所が残ります。バナーと地だけでなく、枠と地も別の比で見てください。一点では足りません。

カタログのチップより、実機の写真です

現場の照明は、カタログのチップと一致しにくいです。タッチパネルや筐体を撮った写真から地色を取ると、ラインに近い検討になります。

メーターは目安で、合格の印ではありません

照度と見る角度で、見え方は変わります。このメーターは目安です。サイトの適合判定でも、安全標識や盤の規格の合格でもありません。

読みやすい文字は、背景だけでなく枠とも差がある

画面の文字は、背景に対する目立ち方だけで決めると足りません。枠と背景の差が小さいと、文字は読めても盤の形が沈み、文字の見え方も変わります。

操作盤の文字と枠を、背景との2組の比で見た図です。同じ色味でも一方は読めて他方は沈む、ということを説明しています。このコマは盤の地に対し RUN が13.3:1、上枠が1.4:1で、計測点AとBが付いています。
RUN は読める。枠は沈む。

よくある使い方

🖥️

タッチパネルの値表示

タンクレベルや温度を、暗い地の上に置くときです。地色を決めてから値の色を載せ、ラベルと地の比を見て、ラインへ渡す前に足りるかを確認します。

🎛️

操作盤の銘板とランプ

銘板の文字、ランプ、筐体の塗色が、一つの視野に入ります。文字が読めても枠が沈む、という抜けがよくあります。一点では気づけません。

🚨

警報バナー

暗い監視画面の、注意や故障の帯です。帯だけ強くて枠が消える、という抜けに気づけます。バナーと地、枠と地は別の比です。

📸

稼働画面のキャプチャから地色を取る

動いている HMI の写真や画面キャプチャから、地色を取ります。その色の上で文字とグリッドを載せると、カタログ色での検討より現場に近くなります。

🌙

夜間の監視画面

昼の会議室で決めたラベル色は、暗い計器室では沈むことがあります。欧州の夜勤でも、アメリカのプラントの夜でも、実際に使う暗い地色の上で、もう一度比を見てください。

📐

盤の地色の上の図面の線

画面と同じ地の上に、グリッドや引出線を置くときです。線が消える配色なら、印刷した図面でも同じことが起きます。

よくある質問

計測点表示の比は何を表していますか?
W3C が公開している輝度の比です。目安として使ってください。サイトの適合判定でも、安全標識や ISO の合格でもありません。
4.5:1 と 3:1 は何を意味する比ですか?
よく使われる目安の線です。4.5:1 は通常の文字、3:1 は大きい文字・枠・線向けです。メーターは認証ではありません。
写真はサーバーに送られますか?
いいえ。色と写真はこの端末のままです。サーバーには送りません。
計測点が2つなのはなぜですか?
文字と地、枠と地では、見え方が違うことが多いからです。一点だけだと、その差に気づけません。A をラベル、B を枠やグリッドに置いてください。
色を取るだけのページと何が違いますか?
色を取ることが仕事ではありません。操作盤や HMI の上で、文字・枠・グリッドを検討するためのページです。写真から色を取るのは、その検討に渡す手段です。
HEX、0x、RGB565 は何用ですか?
検討の横で、メモやソースに貼るための形式です。16ビットの画面向けには RGB565 もあります。バナーをコメント化する作業は、ASCII のページ側です。