名前の付いたカラー
「Basic Colors」と「SilverlightのColors」
| RGB |
| 0x0 |
black |
Black |
| 0xff |
blue |
Blue |
| 0x8000 |
green |
Green |
| 0xffff |
aqua |
Cyan |
| 0x800080 |
purple |
Purple |
| 0x808080 |
gray |
Gray |
| 0xff0000 |
red |
Red |
| 0xff00ff |
fuchsia |
Magenta |
| 0xffff00 |
yellow |
Yellow |
| 0xffffff |
white |
White |
| 0x80 |
navy |
|
| 0x8080 |
teal |
|
| 0xff00 |
lime |
|
| 0x800000 |
maroon |
|
| 0x808000 |
olive |
|
| 0xc0c0c0 |
silver |
|
| 0xa52a2a |
|
Brown |
| 0xa9a9a9 |
|
DarkGray |
| 0xd3d3d3 |
|
LightGray |
| 0xffa500 |
|
Orange | HTMLページを作る際に記述する色は、W3Cに「X11 colors」、「SVG 1.0 color keyword names」として掲載があります。
いずれも147色で、掲載順序にわずかに差があるだけで、同じ色名、同じ値を収録しています。
このほかに、Basic Colors 17色があります。
すべて、小文字で名前が付けられています。
また、同じRGB値の色が含まれます。これは gray と grey の両方を収録していることや、aqua やcyan のように良く使われる名前が含まれることによります。
WPF 、SilverlightのRGB表記は、Alphaを含む4バイトの値で、Colors には Transparent （0x00ffffff）が含まれます。Colors の他の値は、Alpha が0xff です。また、色名は名前を構成する単語の先頭を大文字に（SlateGrayのように）しています。
WPFのColors や、SilverlightのXAML編集時のコード補完の 141色のうち、Transparent を除く 140色は、大文字小文字の差を無視し、Alphaを除いて比較すれば X11 Colors と同名で同じRGB値です。
X11 colors は、slategray と slategrey のような、gay 、gey の同色が6つあり、WPFのColors と色数の差もありません。
Silverlight のColorsは、Transparent を含む、16色で、Basic Colors とは独立に決められたもののようです。大文字小文字の差異を除けば、どの色もWPFのColors 、X11 colors に同名で収録されています。
１．名前の付いたカラーの概観
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 です。これがその組み合わせです。
パソコンのモニタと言うことなのか、明るさ方向の距離とは同じに見えないようですが目安にはなりそうです。
|
