Demo

2012年12月 3日

ディスプレイの表示を確認する簡易カラーチャート

ディスプレイの個体差による表示クセを簡易チェック

ディスプレイの色を厳密に調整するには、それなりのツールを使い、出力目的に応じたカラープロファイルを作る必要があります。PCであれば簡易的でもカラー調整する設定がありますが、スマートフォン、タブレット端末のディスプレイでは調整をする方法がありません。せめて、少し赤みがかっているとか、輝度が低めなど表示状態を確認できたらと思い、手頃なカラーチャートを作ってみました。出先のお客様環境でディスプレイを使ったプレゼンやプレビューする際、簡易チェックにも使えるかなとも思いまして。

グレーチャートで、明るさと色味の偏りを見る

[使用方法]

  • ●上のリンクからグレーチャートを開き、ブラウザを画面いっぱいに広げて表示させます。次にブラウザの「再読込」をしてください。
  • ●画面の明るさ(輝度)を確認します。真っ黒(#000000)から真っ白(#FFFFFF)まで11段階に分かれています。きちんと区切りが認識できるかどうか見てください。
    白に近い2つのコマ、黒に近い2つのコマが繋がってみえる場合は、ディスプレイの輝度が明るすぎか暗すぎ、もしくは経年劣化している可能性があります。
  • ●色味を確認します。グレー要素だけで作られたチャートです。ちょっと黄色っぽい、青っぽいなど色味がないかチェックしてください。

カラーチャートで色の差を確認する

このカラーチャートは、写真撮影現場で使われているカラーチャートをブラウザ内で再現したものです。
画像の場合、プロファイルに応じて各ブラウザでの表示に差違が生じます。ここでは純粋にブラウザでの表示差を確認するため、画像でなくHTMLの色指定でチャートを再現しました。(RGB値は「x-riteColorChecker(24)」で公開されている数値を使用しています)

[使用方法]

  • ●上のリンクからカラーチャートを開き、ブラウザを画面いっぱいに広げて表示させます。次にブラウザの「再読込」をしてください。
  • ●いくつかのディスプレイがある場合、発色にどの程度の差があるか比較の基準にしてください。
  • ●手元に写真用撮影チャートがあれば、画面の色とチャートを見比べてください。(これはWebブラウザでの表示色です)
  • ●カラーチャートが写し込まれた写真素材がある場合、色調整の参考にしてください。
No. Name RGB 16進法
Dark Skin 115, 82, 68 #735244
Light Skin 194, 150, 130 #c29682
Blur Sky 98, 122, 157 #627a9d
Foliage 87, 108, 67 #576c43
Blue Flower 133, 128, 177 #8580b1
Bluish Green 103, 189, 170 #67bdaa
Orange 214, 126, 44 #d67e2c
Purplish Blue 80, 91, 166 #505ba6
Moderate Red 193, 90, 99 #c15a63
10 Purple 94, 60, 108 #5e3c6c
11 Yellow Green 157, 188, 64 #9dbc40
12 Orange Yellow 224, 163, 46 #e0a32e
No. Name RGB 16進法
13 Blue 56, 61, 150 #383d96
14 Green 70, 148, 73 #469449
15 Red 175, 54, 60 #af363c
16 Yellow 231, 199, 31 #e7c71f
17 Magenta 187, 86, 149 #bb5695
18 Cyan 8, 133, 161 #0885a1
19 White 243, 243, 242 #f3f3f2
20 Neutral 8 200, 200, 200 #c8c8c8
21 Neutral 6.5 160, 160, 160 #a0a0a0
22 Neutral 5 122, 122, 121 #7a7a79
23 Neutral 3.5 85, 85, 85 #555555
24 Black 52, 52, 52 #343434
RGB Black 0, 0, 0 #000000