名前の付いたカラー
１．名前の付いたカラーの概観
WPF や Silverlight のプログラミングでは、XAML中に名前で色が指定できます。
140色あり、左図はこれを図示したものです。
各色を L*a*b 表色系で表しています。
右下の大きな枠は、L の + 側から見た図で、明るさを無視して色相によって並んでいます。
上の枠は、b の +側から見た図です。
左の枠は、a の +側から見た図です。
a=0,b=0 は、グレースケールなので、この近傍に多くのカラーが集まって重なって図示されます。
これを、選択し易いように図示する方法を考えます。
下の左の図は、(0,0)-(a,b)とa軸との角度で並べたものです。角度も L も整数に丸めた上で描画しました。
Lは、70ランク、角度は31ランクが使われています。
ここでは、a軸との角度を色相だと考えています。
| 100 |
色相の使われ方 |
最初の色の選択肢の表示 |
| L |
 |
 |
| 0 |
(a,b)のa軸となす角度 |
|
２．2つの色の関係を確かめるサンプル
下図のような、2色の関係を確認するプログラムにして見ました。図をクリックすると、ポップアップウインドウを開いて実行します。
使い方は、色見本の丸いマークをクリックして2色を選んで、「表示」ボタンを押します。
「色1」、「色2」の前の丸いボタン（ラジオボタン）で、どちらかを選んでから、色見本の丸いマークをクリックしてください。
選択した色の情報は、下段に表示されます。ここから、色名なり、RGBコードなりをコピーして使います。
(右ボタンメニューは、「Silverlight」と表示されますが、CTRL-X や CTRL+Insert でコピーできます。)
色見本の丸いマークは、明るいカラーから暗いカラーへと上から下に並んでいます。
各行は近い明るさのカラーです。
行内では、(a,b)の原点からの距離順に並んでいます。同じ距離なら、a軸との角度順になります。
したがって、左の列はグレースケールを表します。
ListView や DataGrid で、グリッドの背景色を交互に変えてて見易くするには、上から2，3行目から選べば良さそうです。
これは文字が黒で描かれる前提ですが、文字が白なら下の方から選ぶことになります。
これは、文字と背景色の距離が100の組み合わせです。しかも、白も黒も a=0,b=0 なので、この距離は L の差になります。
良くあるのは、この明るさの差、コントラストを使って文字を見易くすることです。
a、b（色相）が作る距離はどうでしょうか。
距離で色を並べるプログラムを作ってみます。
３．ある色からの距離で並べるサンプル
1つの色を選ぶと、その色からの距離で、残りの名前の付いた色を並べて表示します。図をクリックすると、ポップアップウインドウを開いて実行します。
使い方は、色見本の丸いマークをクリックします。クリックしたマークの色を背景に、残りの色を並べて、下段に表示します。
下段で、色のマークをクリックすると、中ほどに色名やRGBコードが表示されます。
中ほどの2行の表示は、上が最初に選んだ背景色の情報で、下が下段から選んだ色の情報です。
上の段の色見本の一番長い行から、SteelBlue を選んで、下段の色をなぞると距離が表示されるので 100近傍の、良く聞く色を探します。Blue が 116 です。これがその組み合わせです。
パソコンのモニタと言うことなのか、明るさ方向の距離とは同じに見えないようですが目安にはなりそうです。
|
インデクス
