インストーラ [ ColorCodeResearcher_Install.exe ] を zip圧縮形式 で ダウンロード
本体画面 | 参考-RGB3原色 | 色一覧 |
• [文字色]と[下地色] | • 歴史と展望 | • 基本色 |
• グラデーション | • [連動]によるグレースケール | • 色名 |
• RGB3原色 | • WEBカラー標準16色 | • チャート |
• コピー機能 | • 基本の8色とWEBセーフカラー | • RGB |
• RGB横/RGB縦 | ||
• コレクション |
横方向分割・縦横分割・色相環分割 | 色立体シミュレーション | 色調整ツール | 文字列編集 |
• [明暗]-横 | • HSV | • RGB (RGBA) | • 基本色, 色名, コレクション |
• [濃淡]-横 | • HSL | • HSV, HSL, HSI | |
• [混色]-横 | • 色相環の選択 | • CMYK | |
• [明暗]-縦横 | • XYZ, Lab | ||
• [濃淡]-縦横 | • YUV, YCbCr, YPbPr | ||
• [混色]-縦横 | • Y(709), Y(601), Y(NTSC-J) | ||
• 色相環分割 | • 備考:輝度と白黒変換 |
画面左下では、[文字色]と[下地色]とで、2つの色の選択を切り替えできるようになっています。 (左画像では[下地色]、右画像では[文字色]を選択。)
画面右上には常に、画面左下で選択したほうの「色の情報」が 文字列として表示され、下段側にはRGB3原色の数値とグラフが表示されます。
([文字色]と[下地色]の選択を切り替えても、画面左上の、文字と下地の「色」は変わりません。 文字と下地の「色」を入れ替えたい場合は、[入替]ボタンを押せば入れ替わります。) ([入替]ボタンを押したところ。今度は先程とは逆に、左画像では[文字色]、右画像では[下地色]を選択しています。)
[文字色]は、文字の部分だけの色であり、下地色に比べて面積が狭いため、混乱する場合があるので 通常は、わかりやすい[下地色]を選んでおくのが良いでしょう。
画面右下には「標準」「補色」「反転色」のボタンがあります。(「標準」ボタンの右にあるチェックボックスは、マウスのポインタ矢印を重ねると表示されるツールチップヒントの要/不要を切り替えます。)
「標準」ボタンを押すと、Windowsで標準的な「色の設定」画面(カラーダイアログ)が表示されます。カラーダイアログの操作に慣れている場合は、こちらで欲しい色を選んだり作ったりすることもできます。
「作成した色」欄の初期値は、「下地色」または「文字色」の どちらが選択色になっているかで変わります。右下部分に見えている 赤・緑・青 は、括弧内の表記が R,G,U になっていますが、R,G,B の値がそのまま入っていますので、同じと捉えていいようです。
• 選択色が「下地色」の場合 • 選択色が「文字色」の場合
その隣の 色合い(E)・鮮やかさ(S)・明るさ(L) の各欄については、HSL の 色相(H)・彩度(S)・輝度(L) を [0-255] の範囲で表現した値となっています。
(カラーダイアログの特徴となっている、HSL の [0-255] 表現については、後述の「色調整ツール」でも対応しています。)
なお、下地色を変更して 文字色に近くなると 見づらくなるため、文字色を変更する必要が出てくる、などの場合があります。
そのような場合には、現在の文字色の「補色」または「反転色」を、新たな文字色とするのが簡単です。
ちなみに「補色」とは、色相環において反対側に対置される色のことで、一般にもよく使われます。RGBでの典型例は以下です。
#FF0000 (255, 0, 0) Red | ←補色→ | #00FFFF (0, 255, 255) Cyan | |
#00FF00 (0, 255, 0) Lime | ←補色→ | #FF00FF (255, 0, 255) Magenta (Fuchsia) | |
#0000FF (0, 0, 255) Blue | ←補色→ | #FFFF00 (255, 255, 0) Yellow |
↗ 反転色 元の色 → ↘ 補色 | #AA94D0 (170, 148, 208) #556B2F (85, 107, 47) DarkOliveGreen #452F6B (69, 47, 107) | #8000FF (128, 0, 255) #7FFF00 (127, 255, 0) Chartreuse #8000FF (128, 0, 255) |
画面右側中段には、2色のうち選択中の色を使った [明暗][濃淡][混色]の、連続的な グラデーションが、常に表示されています。 (三段目の[混色]は、選択色と もう一方の 非選択色 とを交えた[混色]です。次の4例では いずれも[下地色]を選択しています。)
DarkOliveGreen (文字色=Chartreuse) |
Chartreuse (文字色=DarkOliveGreen) |
Red (文字色=Chartreuse) |
Red (文字色=Blue) |
RGB3原色のグラフは、小さな ▲▼ ボタンで増減でき、数値を直接入力してもよく、あるいは マウスのドラッグ操作により、左右に動かすこともできます。
Red Green Blue | 85, 107, 47 #556B2F DarkOliveGreen |
↓ | → |
• 連動なし (通常) | |||
基準 #556B2F | |||
• R,G,B とも連動 | • R,G のみ連動 (B は保留) | ||
左端 | #263C00 | 左端 | #00162F |
右端 | #E9FFC3 | 右端 | #E9FF2F |
• G,B のみ連動 (R は保留) | • R,B のみ連動 (G は保留) | ||
左端 | #553C00 | 左端 | #266B00 |
右端 | #55FFC3 | 右端 | #FF6BD9 |
• 基準色 | • 反転色 | ||
基準 | #556B2F | 反転 | #AA94D0 |
基準 | #000000 black | 反転 | #FFFFFF white |
基準 | #FF0000 red | 反転 | #00FFFF cyan |
基準 | #00FF00 lime | 反転 | #FF00FF fuchsia |
基準 | #0000FF blue | 反転 | #FFFF00 yellow |
当アプリでは、すべての色の表現は【クリックでコピー】を実現し「クリックすればコピーできる」ようになっています。 コピーのための選択肢は、本体画面の下段側を切り替えると右下に見えるコンボボックスで、次のように切替できます。 初期値では「R,G,B」形式が選択されています。「画像」形式については もちろん文字情報ではありませんのでご注意ください。 (色情報を不用意にコピーしてしまうことを避けたい場合は、事前に「しない」に切り替えておかれることをお奨めします。)
使い方は、たとえば「色一覧」に表示されている色の情報をコピーする場合は、表示された色をクリックするだけです。 この【クリックでコピー】は「横方向分割」「縦横分割」「色相環分割」「色立体シミュレーション(HSV/HSL)」など 色が格子状に区切られる仕組みの画面については、どれも同様に利用できます。(「色調整ツール」には固有の方式があります。)
コピーした色情報は好きな場所へ貼り付けできますし、受け取り側のアプリ次第で、色情報の活用方法は異なってきます。 次の表は「色一覧」を使い、上の画像のように特定の色を選択した場合の、コピーされた結果の選択肢による違いを示しています。
選択肢 | しない | R,G,B | #16進 | 16進 | 色名 | 画像 |
初期値の文字色と同じ色 | - | 127, 255, 0 | #7FFF00 | 7FFF00 | Chartreuse | |
初期値の下地色と同じ色 | - | 85, 107, 47 | #556B2F | 556B2F | DarkOliveGreen | |
RGB横より任意-1 | - | 255, 51, 119 | #FF3377 | FF3377 | ffff3377 | |
RGB横より任意-2 | - | 255, 153, 204 | #FF99CC | FF99CC | ローズ | |
RGB横より任意-3 | - | 102, 51, 255 | #6633FF | 6633FF | 北越急行ほくほく線 パープル |
ニュートンの実験 | ヤング=ヘルムホルツの 三色説(模式図) | RYB色相環 | マンセルの色相環 (マンセル・カラー・システム) | |
プリズムを用いて白色光を7色に分光 (色の数は音階の数に合わせた) | 初期のRYBカラーモデル (減法混色・色域が狭い) | 赤黄青(RYB)と紫橙緑(VOG) (美術・美術教育・絵画) | 赤,黄,緑,青,紫 (R,Y,G,B,P) の5色と 中間に YR,GY,BG,PB,RP を設ける |
桁位置 | 8 | 7 | 6 | 5 | 4 | 3 | 2 | 1 | ||
各桁の重み(指数表記) | 2⁷ | 2⁶ | 2⁵ | 2⁴ | 2³ | 2² | 2¹ | 2⁰ | 8桁の2進数における最大値: 11111111 8桁計:(128+64+32+16+8+4+2+1=)255 | |
各桁の1の値(10進表記) | 128 | 64 | 32 | 16 | 8 | 4 | 2 | 1 |
色 | 黒 black | 灰色 gray | 白 white | ||||||
RGB | R | G | B | R | G | B | R | G | B |
2進数(各8桁=8ビット) | 00000000 | 00000000 | 00000000 | 10000000 | 10000000 | 10000000 | 11111111 | 11111111 | 11111111 |
10進数(0~255の整数値) | 0 | 0 | 0 | 128 | 128 | 128 | 255 | 255 | 255 |
2桁の16進数(00~FF) | 00 | 00 | 00 | 80 | 80 | 80 | FF | FF | FF |
16進表現(8×3=24ビット分) | #000000 | #808080 | #FFFFFF |
(This file is licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license. Click to original page. Author : BenRG and cmglee)
0, 0, 0 #000000 black | 64, 64, 64 #404040 | 128, 128, 128 #808080 gray | 192, 192, 192 #C0C0C0 silver | 255, 255, 255 #FFFFFF white |
32, 32, 32 #202020 | 96, 96, 96 #606060 | 160, 160, 160 #A0A0A0 | 224, 224, 224 #E0E0E0 |
|
255, 0, 0 #FF0000 red | 128, 0, 0 #800000 maroon | 255, 0, 255 #FF00FF fuchsia | 128, 0, 128 #800080 purple |
0, 255, 0 #00FF00 lime | 0, 128, 0 #008000 green | 255, 255, 0 #FFFF00 yellow | 128, 128, 0 #808000 olive |
0, 0, 255 #0000FF blue | 0, 0, 128 #000080 navy | 0, 255, 255 #00FFFF cyan | 0, 128, 128 #008080 teal |
255, 255, 255 #FFFFFF white | 192, 192, 192 #C0C0C0 silver | 128, 128, 128 #808080 gray | 0, 0, 0 #000000 black |
0, 0, 0 #000000 black | 0, 0, 255 #0000FF blue | |
| 0, 255, 0 #00FF00 lime | 0, 255, 255 #00FFFF cyan |
255, 0, 0 #FF0000 red | 255, 0, 255 #FF00FF fuchsia | |
255, 255, 0 #FFFF00 yellow | 255, 255, 255 #FFFFFF white |
#000000 black #00FF00 lime #00FFFF cyan #FFFFFF white #FFFF00 yellow #0000FF blue #FF00FF fuchsia #FF0000 red |
0, 0, 0 #000000 black | 0, 0, 128 #000080 navy | 0, 0, 255 #0000FF blue | |
0, 128, 0 #008000 green | 0, 128, 128 #008080 teal | 0, 128, 255 #0080FF | |
0, 255, 0 #00FF00 lime | 0, 255, 128 #00FF80 | 0, 255, 255 #00FFFF cyan | |
| 128, 0, 0 #800000 maroon | 128, 0, 128 #800080 purple | 128, 0, 255 #8000FF |
128, 128, 0 #808000 olive | 128, 128, 128 #808080 gray | 128, 128, 255 #8080FF | |
128, 255, 0 #80FF00 | 128, 255, 128 #80FF80 | 128, 255, 255 #80FFFF | |
255, 0, 0 #FF0000 red | 255, 0, 128 #FF0080 | 255, 0, 255 #FF00FF fuchsia | |
255, 128, 0 #FF8000 | 255, 128, 128 #FF8080 | 255, 128, 255 #FF80FF | |
255, 255, 0 #FFFF00 yellow | 255, 255, 128 #FFFF80 | 255, 255, 255 #FFFFFF white |
以下は抜粋です。
• RGB系4 |
• RGB12 |
• RYB12 |
• CMYK12 |
• マンセル系20A |
• マンセル系20B |
• PCCS系24 |
• オストワルト系24 |
以下は抜粋です。(この中の[.NET141](S)は本体画面のコンボボックス(.NET174色)から部品用の色を除外した標準色です。)
• 和465 |
• 洋285 |
• Wiki723 |
• HTML140 |
• カナ140 |
• 鉄道 |
標準的なカラーチャートなどを収録しています。
• Basic16 |
• typical24 |
• Office40 |
• Rainbow600 |
RGB 基本の8色をもとに、R,G,B 互いの中間値を単純な割り算によって求めた色です。括弧内は数値の差(10進数)です。
• 8色 |
• 27色 |
• 64色 |
• 216色[WEBセーフカラー] |
• 4096色(先頭側) |
• 4096色(末尾側) |
こちらでは RGB に基づく HSV の 六角錐モデル を上から見下ろして 上から順に、水平方向にスライスしていくような格好をとっています。
最上面の六角形の中央は白であり、六角形の平面をなす6つの頂点は、ひとつおきに、赤(R),緑(G),青(B) の3色と その中間色(反対側の位置は補色)となる シアン(C),マゼンタ(M),イエロー(Y) の3色の、計6色となっています。
自由に色を収集できる「コレクション」のページは「パレット」や「配色」に使えるかと思います。
当アプリでは ある色をもとにした 色相環の角度を変えた色 なども自由に作り出せます。 コレクションでは、それらの色を使って自由な配置に並べ、色彩の組み合わせがもたらす「配色」効果を確認しやすくできます。 配色に関する色相環の使い方などは こちらのページ を参考にされるとわかりやすいでしょう。
• 編集 (画面右下のチェックボックス) チェックが入っていると、各セルの色は、ドラッグ&ドロップによる編集(色の上書き)操作に対応します。 チェックを外すと色が固定されるので「パレット」的な使い方に適します。セルの横幅については自由に調節できます。
• 現在地 現在のセル位置を太枠で示します。チェックを外すと次のように太枠が消えます。
• 枠線 各セルのあいだに格子状に引かれるグレーの枠線の有無です。チェックを外すと枠線が消え「配色」の確認に適します。 (この画像では「枠線」に加えて「現在地」のチェックも外れています。)
さらに 行または列の操作として 次の4種類(×2)の機能があります。(以下の画像は冒頭に示した初期状態からの操作結果です。) • 行(列)の追加 • 最終行(列)を複製 • すべての行(列)を複製 • 最終行(列)の削除
その他の機能(ボタン)
• 読み込み 以前「保存」したテキストファイルの内容を読み込んで、コレクション画面に色として再表示できます。 (「読み込み」ボタンを押すと、既存ファイルの選択画面が表示されます。) • 保存 コレクションに集めた色は既定のテキストファイルに保存されますが 別途に自由なファイル名をつけて保存することもできます。 色の用途別の組み合わせなどで、ファイル名を分けて保存し、前項「読み込み」機能と併用すれば 複数の系統をもつ自分専用パレットとして、切り替えて使うことも可能になります。 (「保存」ボタンを押すと、新たに保存するファイル名の入力用画面が表示されます。)
(「読み込み」ボタンで表示される、ファイル選択画面) |
(「保存」ボタンで表示される、ファイル名入力画面) |
メイン画面の [選択色] を基準にした「明暗」グラデーションを、横方向へ等間隔に分割します。
画面最上段の「明暗」の右側に描かれたグラデーションをもとに、各行の分割数で両端から等間隔に採った色が配置されます。 基準の [選択色] の初期位置は、横方向分割では [中央] に置かれ、最上段のグラデーションの中央に三角形の印(▼)が示されます。
画面右下の「同一色を選択」のチェックにより、各行で[選択色]と一致する色があれば「選択」された状態になります。 (上画像の例示色ではグラデーション描画による誤差のため [中央] の位置には同一色がない模様です。)
「明暗」というのは、基準となった [選択色] を途中に置き、基本的には 最も暗い色である[黒]から [選択色]を経由して 最も明るい色である[白]までの間を変化させたグラデーション、ということです。([選択色]については、グラデーション描画に伴って発生する整数値の誤差収束により、分割結果の各行には必ずしも置かれない場合があります。)
左端:暗(最小値:黒) 選択色(元の色) 右端:明(最大値:白) 0, 0, 0 Black
#000000◀ 85, 107, 47 DarkOliveGreen
#556B2F▶ 255, 255, 255 White
#FFFFFF
(左端の[黒]と右端の[白]についての正確性は、画面右上のチェックボックス(縦横分割でいう[明確化]チェックボックス)により確保されています。)
本項では、メイン画面の右側中段に3つあるグラデーションの、1番目 [明暗] が、考え方の基本になっています。
85, 107, 47 #556B2F DarkOliveGreen | ◀◀◀ [明暗] ◁◁◁ [濃淡] ◁◁◁ [混色] |
左端:濃(最小値) | 選択色(元の色) | 右端:淡(最大値) | |||
0, 0, 0 Black #000000 | ◀ | 222, 184, 135 BurlyWood #DEB887 | ▶ | 255, 255, 255 White #FFFFFF | |
左端:濃(最小値) | 選択色(元の色) | 右端:淡(最大値) | |||
0, 0, 0 Black #000000 | ◀ | 128, 0, 128 Purple #800080 | ▶ | 255, 255, 255 White #FFFFFF |
左端:濃(最小値) | 選択色(元の色) | 右端:淡(最大値) | ||
38, 60, 0 #263C00 | ◀ | 85, 107, 47 DarkOliveGreen #556B2F | ▶ | 233, 255, 195 #E9FFC3 |
87, 49, 0 #573100 | ◀ | 222, 184, 135 BurlyWood #DEB887 | ▶ | 255, 217, 168 #FFD9A8 |
128, 0, 128 #800080 | ◀ | 128, 0, 128 Purple #800080 | ▶ | 255, 127, 255 #FF7FFF |
選択色 | RGB | 最小値 | 元の値 | 最大値 | (元の値-最小値)÷(最大値-最小値)→ | 相対位置 | |||||||||
85, 107, 47 #556B2F DarkOliveGreen | R G B | 38 60 0 | 85 107 47 | 233 255 195 | ( ( ( | 85 107 47 | - - - | 38 60 0 | )÷( )÷( )÷( | 233 255 195 | - - - | 38 60 0 | )→ )→ )→ | 24.10 % 24.10 % 24.10 % | |
222, 184, 135 #DEB887 BurlyWood | R G B | 87 49 0 | 222 184 135 | 255 217 168 | ( ( ( | 222 184 135 | - - - | 87 49 0 | )÷( )÷( )÷( | 255 217 168 | - - - | 87 49 0 | )→ )→ )→ | 80.36 % 80.36 % 80.36 % | |
128, 0, 128 #800080 Purple | R G B | 128 0 128 | 128 0 128 | 255 127 255 | ( ( ( | 128 0 128 | - - - | 128 0 128 | )÷( )÷( )÷( | 255 127 255 | - - - | 128 0 128 | )→ )→ )→ | 0.00 % 0.00 % 0.00 % |
左端:暗=黒(最小値) | 選択色(元の色) | 右端:明=白(最大値) | ||
0, 0, 0 Black #000000 | ◀ | 85, 107, 47 DarkOliveGreen #556B2F | ▶ | 255, 255, 255 White #FFFFFF |
0, 0, 0 Black #000000 | ◀ | 222, 184, 135 BurlyWood #DEB887 | ▶ | 255, 255, 255 White #FFFFFF |
0, 0, 0 Black #000000 | ◀ | 128, 0, 128 Purple #800080 | ▶ | 255, 255, 255 White #FFFFFF |
選択色 | RGB | 元の値 | ÷ | 最大値 → | 相対位置 | → | 3値平均 | |
85, 107, 47 #556B2F DarkOliveGreen | R G B | 85 107 47 | ÷ ÷ ÷ | 255 255 255 | → → → | 33.33 % 41.96 % 18.43 % | ↘ → ↗ | 31.24 % |
222, 184, 135 #DEB887 BurlyWood | R G B | 222 184 135 | ÷ ÷ ÷ | 255 255 255 | → → → | 87.06 % 72.16 % 52.94 % | ↘ → ↗ | 70.72 % |
128, 0, 128 #800080 Purple | R G B | 128 0 128 | ÷ ÷ ÷ | 255 255 255 | → → → | 50.19 % 0.00 % 50.19 % | ↘ → ↗ | 33.46 % |
ガンマ補正「あり」(標準・再掲) | ガンマ補正「なし」 | |
[中央] | ||
[輝度] | ||
[相対] |
グラデーション基準「有効」(前出右側より再掲) | グラデーション基準「無効」 | |
[中央] | ||
[輝度] | ||
[相対] |
メイン画面の [選択色] を基準にした「濃淡」グラデーションを、横方向へ等間隔に分割します。
画面最上段の「濃淡」の右側に描かれたグラデーションをもとに、各行の分割数で両端から等間隔に採った色が配置されます。 基準の [選択色] の初期位置は、横方向分割では [中央] に置かれ、最上段のグラデーションの中央に三角形の印(▼)が示されます。
上の画像の例示色では、画面右下の「同一色を選択」のチェックにより 基準の [選択色] と同じ色が、各行で「選択」された状態になっています。
「濃淡」というのは、基準となった [選択色] の RGB値の割合は保ったままで RGB値の 最小値(0)から最大値(255)までの間を変化させたグラデーション、ということです。両端の色は、メイン画面の RGB値を、「連動」ボタンを押した状態で、トラックバーを左右に動かした場合と同じになります。RGBの範囲は 0~255 の間ですので、系統色の範囲はおのずと明らかです。
左端:濃(最小値) 選択色(元の色) 右端:淡(最大値) 38, 60, 0
#263C00◀ 85, 107, 47 DarkOliveGreen
#556B2F▶ 233, 255, 195
#E9FFC3
([選択色]については、グラデーション描画に伴って発生する整数値の誤差収束により、分割結果の各行には必ずしも置かれない場合があります。)
(左端の[濃]と右端の[淡]についての正確性は、画面右上のチェックボックス(縦横分割でいう[明確化]チェックボックス)により確保されています。)
本項では、メイン画面の右側中段に3つあるグラデーションの、2番目 [濃淡] が、考え方の基本になっています。
85, 107, 47 #556B2F DarkOliveGreen | ◁◁◁ [明暗] ◀◀◀ [濃淡] ◁◁◁ [混色] |
左端:濃(最小値) | 選択色(元の色) | 右端:淡(最大値) | |||
87, 49, 0 #573100 | ◀ | 222, 184, 135 BurlyWood #DEB887 | ▶ | 255, 217, 168 #FFD9A8 | |
左端:濃(最小値) | 選択色(元の色) | 右端:淡(最大値) | |||
128, 0, 128 #800080 | ◀ | 128, 0, 128 Purple #800080 | ▶ | 255, 127, 255 #FF7FFF | |
(選択色がPurpleの場合は、当初から RGB値に[0]が含まれるため、左側の範囲に余裕が無い ということになります。) |
127, 255, 0 Chartreuse #7FFF00 | ◁ | 127, 255, 0 Chartreuse #7FFF00 | ▷ | 127, 255, 0 Chartreuse #7FFF00 | ◁◁◁ [明暗] ◀◀◀ [濃淡] ◁◁◁ [混色] |
本項「濃淡」 | 前項「明暗」 |
メイン画面の [文字色] と [下地色] の2色を使った「混色」グラデーションを、横方向へ等間隔に分割します。
「混色」というのは、メイン画面の [文字色] から [下地色] へと至る、単純な2色間のグラデーションです。(画面最下段の左端に表示された[文字色]と右端の[下地色]についての正確性は、
左端:文字色 右端:下地色 127, 255, 0 #7FFF00
Chartreuse~ 85, 107, 47 #556B2F
DarkOliveGreen
画面右上のチェックボックス(縦横分割でいう[明確化]チェックボックス)により確保されています。)
本項では、メイン画面の右側中段に3つあるグラデーションの、3番目 [混色] が基本になっています。
85,107,47 #556B2F DarkOliveGreen | ◁◁◁ [明暗] ◁◁◁ [濃淡] ◀◀◀ [混色] |
85, 107, 47 #556B2F DarkOliveGreen | 127, 255, 0 #7FFF00 Chartreuse | 127, 255, 0 #7FFF00 Chartreuse | 255, 0, 0 #FF0000 Red |
メイン画面の [選択色] を基準にした「明暗」グラデーションを、縦横の等間隔に分割します。
横方向分割でも説明しましたが、「明暗」というのは、基準となった [選択色] を途中に置き、基本的には
最も暗い色である[黒]から、[選択色]を経由して、最も明るい色である[白]までの間を変化させたグラデーション、ということでした。
縦横分割では、四隅が[黒]または[白]の 固定色であり、上辺の途中に[選択色]を置く 格子状の分割グラデーションになっています。縦横分割では、前述の横方向グラデーションが 平面の上辺にきており、[選択色]はその途中にある、というようになっています。
左端:暗(最小値:黒) 選択色(元の色) 右端:明(最大値:白) (上辺) 0, 0, 0 Black
#000000 85, 107, 47 DarkOliveGreen
#556B2F 255, 255, 255 White
#FFFFFF(下辺) 0, 0, 0 Black
#000000 128, 128, 128 Gray
#808080 255, 255, 255 White
#FFFFFF左端:暗(最小値:黒) 中間色(灰色) 右端:明(最大値:白)
平面の左上から左下、すなわち左辺は、つねに純粋な [黒]1色 であり、右側の右辺も、つねに純粋な [白]1色 です。
平面の下辺は、純粋な[黒]から純粋な[白]までのグラデーション、いわゆる「グレースケール」となっています。
(左辺の[黒]と右辺の[白]についての正確性は、[明確化]チェックボックスにより確保されています。)
本項では、メイン画面の右側中段に3つあるグラデーションの、1番目 [明暗] が、平面の上辺の考え方の基本になっています。
85, 107, 47 #556B2F DarkOliveGreen | ◀◀◀ [明暗] ◁◁◁ [濃淡] ◁◁◁ [混色] |
左端:暗(最小値:黒) | 選択色(元の色) | 右端:明(最大値:白) | |
(上辺) | 0, 0, 0 Black #000000 | 222, 184, 135 BurlyWood #DEB887 | 255, 255, 255 White #FFFFFF |
(下辺) | 0, 0, 0 Black #000000 | 128, 128, 128 Gray #808080 | 255, 255, 255 White #FFFFFF |
左端:暗(最小値:黒) | 中間色(灰色) | 右端:明(最大値:白) |
左端:暗(最小値:黒) | 選択色(元の色) | 右端:明(最大値:白) | |
(上辺) | 0, 0, 0 Black #000000 | 128, 0, 128 Purple #800080 | 255, 255, 255 White #FFFFFF |
(下辺) | 0, 0, 0 Black #000000 | 128, 128, 128 Gray #808080 | 255, 255, 255 White #FFFFFF |
左端:暗(最小値:黒) | 中間色(灰色) | 右端:明(最大値:白) |
222, 184, 135 #DEB887 BurlyWood | ◀ ◁ ◁ | 128, 0, 128 #800080 Purple | ◀ ◁ ◁ | |||
[中央] | ||||||
([中央]の位置で選択色の近似値を得るには、分割数を奇数にするのが近道です。) | ||||||
[輝度] | [L=70.00%](選択色の▼は右寄り) | [L=25.10%](選択色の▼は左寄り) | ||||
[相対] | [相対位置=80.36%](選択色の▼は右寄り) | [相対位置=0.00%](選択色の▼は左端) |
縦・横とも有(再掲) | 横あり・縦なし |
横なし・縦あり | 縦・横とも無 |
標準([中央]・再掲) | 捻転([中央]) |
標準(選択色の位置▼[100.00%]・再掲) | 捻転(選択色の位置▼[100.00%]) |
メイン画面の [選択色] を基準にした「濃淡」グラデーションを、縦横の等間隔に分割します。
横方向分割でも説明しましたが、「濃淡」というのは、基準となった [選択色] の RGB値の割合は保ったままで
RGB値の 最小値(0)から最大値(255)までの間を変化させたグラデーション、ということでした。
縦横分割では、上辺に 最小値の[濃]から[選択色]を経由して最大値の[淡]へと至るグラデーション、
下辺に 最も暗い色である[黒]から最も明るい色である[白]へのグレースケールをとった、格子状の分割グラデーションになります。平面上辺の両端の色は、メイン画面の RGB値を、「連動」ボタンを押した状態で、トラックバーを左右に動かした場合と同じです。平面の下辺は、純粋な[黒]から純粋な[白]までのグラデーション、いわゆる「グレースケール」となっています。
左端:濃(最小値) 選択色(元の色) 右端:淡(最大値) (上辺) 38, 60, 0
#263C00 85, 107, 47 DarkOliveGreen
#556B2F 233, 255, 195
#E9FFC3(下辺) 0, 0, 0 Black
#000000 128, 128, 128 Gray
#808080 255, 255, 255 White
#FFFFFF左端:暗(最小値:黒) 中間色(灰色) 右端:明(最大値:白)
(左上の[濃]と右上の[淡]、および左下の[黒]と右下の[白]の、四隅についての正確性は、[明確化]チェックボックスにより確保されています。)
本項では、メイン画面の右側中段に3つあるグラデーションの、2番目 [濃淡] が、平面の上辺の考え方の基本になっています。
85, 107, 47 #556B2F DarkOliveGreen | ◁◁◁ [明暗] ◀◀◀ [濃淡] ◁◁◁ [混色] |
左端:濃(最小値) | 選択色(元の色) | 右端:淡(最大値) | |||
(上辺) | 87, 49, 0 #573100 | 222, 184, 135 BurlyWood #DEB887 | 255, 217, 168 #FFD9A8 | ||
(下辺) | 0, 0, 0 Black #000000 | 128, 128, 128 Gray #808080 | 255, 255, 255 White #FFFFFF | ||
左端:暗(最小値:黒) | 中間色(灰色) | 右端:明(最大値:白) | |||
左端:濃(最小値) | 選択色(元の色) | 右端:淡(最大値) | |||
(上辺) | 128, 0, 128 #800080 | 128, 0, 128 Purple #800080 | 255, 127, 255 #FF7FFF | ||
(下辺) | 0, 0, 0 Black #000000 | 128, 128, 128 Gray #808080 | 255, 255, 255 White #FFFFFF | ||
左端:暗(最小値:黒) | 中間色(灰色) | 右端:明(最大値:白) | |||
(選択色がPurpleの場合は、当初から RGB値に[0]が含まれるため、左側の範囲に余裕が無い ということになります。) |
222, 184, 135 #DEB887 BurlyWood | ◁ ◀ ◁ | 128, 0, 128 #800080 Purple | ◁ ◀ ◁ | |||
[中央] | ||||||
([中央]の位置で選択色の近似値を得るには、分割数を奇数にするのが近道です。) | ||||||
[輝度] | [L=70.00%](選択色の▼は右寄り) | [L=25.10%](選択色の▼は左寄り) | ||||
[相対] | [相対位置=80.36%](選択色の▼は右寄り) | [相対位置=0.00%](選択色の▼は左端) |
標準([中央]・再掲) | 捻転([中央]) |
メイン画面の [文字色] と [下地色] の2色を使った「混色」グラデーションを、縦横の等間隔に分割します。
横方向分割でも説明しましたが、「混色」というのは、メイン画面の [文字色] から [下地色] へと至る、単純な2色間のグラデーション、ということでした。
縦横分割では、上辺に [文字色] から [下地色] への単純な2色間グラデーション、
下辺に [黒] から [白] へのグレースケールをとった、格子状の分割グラデーションになっています。(左上の[文字色]と右上の[下地色]、および左下の[黒]と右下の[白]の、四隅についての正確性は、[明確化]チェックボックスにより確保されています。)
左端:文字色 右端:下地色 (上辺) 127, 255, 0 #7FFF00
Chartreuse 85, 107, 47 #556B2F
DarkOliveGreen(下辺) 0, 0, 0 Black
#000000 255, 255, 255 White
#FFFFFF左端:暗(最小値:黒) 右端:明(最大値:白)
本項では、メイン画面の右側中段に3つあるグラデーションの、3番目 [混色] が、平面の上辺の基本になっています。
85,107,47 #556B2F DarkOliveGreen | ◁◁◁ [明暗] ◁◁◁ [濃淡] ◀◀◀ [混色] |
標準(再掲) | 捻転 |
標準(入替後) | 捻転(入替後) |
コントロール部を切り替えたときに「機能」の中央にある「分割」ボタンは、色相環のグラデーションを縦横の等間隔に分割します。 色相環の色調は「基本色」と同様に切替でき、分割数も「縦横」と同様に変更できます。
HSV色空間 は 360度の色相(Hue)と、白から色相色までの彩度(Saturation)、および黒から白までの明度(Value)で表現されます。
HSV では、色相環が上面に配置され、円の中心は白です。また図では見えていませんが、円筒モデルの底面は黒一色です。
理論の説明には下側の黒を頂点とする下向きの円錐モデルが使われますが、ここでは平面で切り取るため円筒モデルにしています。
色相の選択
色相は、色相環を使うと角度であらわすことができます。左上の図では、円筒部分の上面にある色相環の中心から円周部へ引かれる半径が、色相を選ぶ角度を示しています。
基準の 0度は、中心から右へ水平に伸ばしたところで[赤:R]です。そこから時計回りに 120度で[緑:G]、240度で[青:B]となります。また、色相環の中心の白色点から、図では見えていない黒一色の底面の中心へ伸びる芯線は、白から黒へのグラデーション(グレースケール)になっています。
この芯線と上下面の半径および外周部の縦線で構成される、四角形の面で円筒内部を切り取った色の状況が、面になったグラデーションで右上および下側に表示されていることになります。それらの右上隅には色相環の角度で選択した色相の色、左上隅はつねに色相環の中心にある白、下辺は底面の黒一色となります。このため左辺は白から黒へのグレースケールとなっており、また選んだ色相の色は画面左下にも表示されます。
(四角形を斜めに横切る点線は、理論の説明に使われる円錐モデルの場合の斜面をあらわしています。)
円筒の画像域でクリックすると、色相環の中心からマウスのポインタ矢印の位置へ向けた別の点線が表示され、この切り取り面の中心に対する角度が、マウスの動きに応じて変化するようになります(左画像の状況)。マウスでもう一度クリックすればその角度で固定されますし、画像域からポインタ矢印が出た場合もその時の角度に固定されます。
角度は円筒画像の下にある入力域へ 0~360°の範囲で小数部を含む数値を直接入力しても良く、右側中段のトラックバーの上にある虹色の線型スペクトルの画像域でも、円筒部と同様のクリック操作により、小数部を含む角度の数値で簡単に選択できます。角度を小数部なしの整数値にしたい場合は、トラックバーを使うのが簡単です。
2面のグラデーション
右上の面状のグラデーション(初期値で256×256の大きさ)は、下辺の黒一色を除いて、多くのピクセルで色が異なっています。下側に表示されている格子状のグラデーションは、右上の面状のグラデーションをもとに、縦横とも等間隔に分けた位置から採った色を、個別に扱いやすいよう単一色のセルにして配置したものです。
どちらも、マウスのポインタ矢印を重ねるだけで、その位置の色の情報が最下段部分に表示されます。また、クリックすればその位置の色が選択され、同時に色の値もメイン画面で選択した様式でクリップボードにコピーされるようになっています。このため選択した色を他所ですぐに活用することができます。なお画面右下の「反映」ボタンは、選択した色をメイン画面の選択色に反映させる場合に使います。
格子の数は自由に変更可能で、最下段の分割数の欄に直接入力もできますし、トラックバーでの指定もできます。四隅のセルについては前述の決まった色となりますが、その他のセルは分割数によって各セルの参照位置が変わります。参照位置が割り切れない場合(255÷2=127.5→127/128)などのために、数値の内側/外側も選択できるようにしています。
その他
色相を指定するスペクトル画像域やトラックバーが、基準の 0度(赤)の周辺で使いづらいなどの場合は、シフトのチェックボックスにチェックを入れて
180度分ズラして使うこともできます。次の図は、左側が赤の前後で両端に分かれて使いづらい場合、右側がシフトのチェックで赤を中央に置いた場合です。シフトにチェックが入ると、赤の位置が中央にズレるのと同時に、360°の手前側はマイナスの数値で表現されるようになります。
上図の配置ではわかりにくいかもしれませんので念のため、並びを縦に変更したものも再掲しておきます。なお当アプリでは色相の角度をもとに RGBの整数値(sRGB)を算出して色として使いますが、色の情報用には色として確定した sRGB値をもとに再び HSV等の値を算出し直しているため、指定した角度と色の情報としての色相(Hue)値との間には sRGBの整数換算に伴う誤差が生じる場合があります。
HSL色空間 は 360度の色相(Hue)と、灰色~色相色(純色)の彩度(Saturation)、および黒~白の輝度(Luminance)で表現されます。
HSL では、色相環が上下の中段に配置され、立体の上端は白、下端は黒です。中段にある色相環の円の中心は、常に灰色となります。
理論の説明には上下に頂点を持つ双円錐モデルが使われますが、ここでは円筒モデルのため、上下の白と黒は面になっています。
HSVとの違い
HSL は HSV の改良版とされます。共通点も多いため、基本的な操作などの理解には前項 HSV の説明をご参照ください。
前項の HSV では、選べる色相の色に対する、白および黒との位置関係は、白の側の面積が狭く、あたかも黒が優勢なようになっていました。このことは円錐モデルでもほぼ同様なのですが、これを白と黒との中間に置こうとするのが HSL の考え方です。そのため理論的には白と黒を上下に分けた2つの頂点を持つ双円錐モデルが選ばれます。
HSL の円筒モデルでは、円筒の上面が白、底面が黒なので、上下の円の中心を縦に貫く芯線は、やはり HSV と同様にグレースケールです。ただし HSV とは異なり、上下を貫く芯線のちょうど真ん中に色相環が位置しますので、色相環の中心の色は、白ではなく灰色になっています。
このため右上と下側の2つの平面グラデーションは、上辺が白一色、下辺が黒一色となります。さらに上下の真ん中の高さで左右を見ると、左辺側はつねに灰色で、選択した色相の色は、右辺側の真ん中にくる、というようになっています。
下段の格子状のグラデーションでは格子の分割数を変更できますが、上下の真ん中で左右の基準色を明示できるのは、分割数が奇数の場合だけです。このため偶数の場合は仮想的に、右上の平面グラデーションの右辺中央に色相の色があるものとします。
また円筒の図は HSV と同様に斜め上から見下ろしている状況ですが、色相環が HSV では上面にあるのに対し、HSL では3段の中段にあるため透視図のように図示しており、見下ろす角度も HSV とは変えてあります。さらに色相環の高さが上面と中段で異なりますので、画像域内で角度を指定する中心の位置も、HSVとHSLとでは異なっています。
このため、たとえば画像で示しているように、マウスのポインタ矢印を円筒画像域の右上隅付近に置いたときの、中心からの相対的な角度は、HSVとHSLとで、かなり違ってきています。
どちらの円筒モデルも角度はマウスで感覚的に指定できるようになっていますが、選択した角度が違えば色相の色の違いとなってあらわれますのでご注意ください。なお、HSVとHSLとの切替時には、角度の数値を基準に切り替わりますので、相対的な角度はあらためて図示され、色相の色にも影響しないようになっています。
HSV と HSL は、ともに CIE(国際照明委員会)が定めた RGBモデルによるものが標準であり基準なのですが 当アプリでは [選択]のチェックボックスにチェックを入れると 他の色相環を使った場合の 擬似的な HSV, HSL 方式による 色立体シミュレーションも 利用できるようにしています。
HSV の場合。(左:RGBモデルに基づく標準形式、右:「マンセル系20A」を選択)
HSL の場合。(左:RGBモデルに基づく標準形式、右:「マンセル系20A」を選択)
ちなみに、本来のマンセル表色系での色立体は こちら や こちら の説明にあるように、色相・明度・彩度 を基準にしており 色相と明度によって異なる最大値をとる彩度が、最大値までの範囲に等しい値で並ぶように構成されるものです。 ここでは色相に基づく単純な平面グラデーションを分割しただけのものになっていますのでご注意ください。
また、各種の色相環に変更した場合は、色相環の違いに伴う色だけでなく、2つの平面グラデーションも 本来の RGB によるものとは描画手法が異なる、擬似的なグラデーションになります。
この描画手法では、平面グラデーションの重心ともいうべき中央部分の位置を、[左][中][右] で選択できるようにしています。 色相環で選んだ色相色の、平面グラデーションにおける配分の微妙な違いは、次のようになります。(下段部分の画像は省略)
HSV方式・[左] |
HSV方式・[中] |
HSV方式・[右] |
HSL方式・[左] |
HSL方式・[中] |
HSL方式・[右] |
この画面の背景色は、現在操作中の色をあらわしており 最上段には [#]つき16進のRGBカラーコードが常に表示されます。 (はじめに表示されるのはメイン画面の選択色となります。) 画面下部の表示域には、上に16進コードで示された背景色の情報が 最下段のコンボボックスで選んだ様式で表示されます。(下表参照) メイン画面の選択色をこちらへ反映させるには「受け取り」ボタン、 こちら側の現在の背景色をメイン画面の選択色に反映させる場合は 「送り出し」ボタンを押します。 操作中のリアルタイムな色の変化を常に反映させたい場合は 「常に受け取り」または「常に送り出し」にチェックを入れます。 (このチェックはどちらか一方のみとなります。) RGB では、メイン画面と同様に「連動」機能も利用できます。 数値の切り替え RGB(RGBA) では、10進数に加えて 16進数での指定も可能です。 (不)透明度を示すアルファ値(A)にある [A]/[B] の切り替えは [0~255]/[0~100%] の表記を切り替えます。 HSV, HSL, HSI についても [A][B][a][b][c] などの選択肢で 各種アプリに対応した数値の表記法などに切り替えできます。 (HSLの[W]は、Windows標準のカラーダイアログ対応用です。) HSV 以降の数値については「細かく」のチェックボックスで 小数部の数値の有無を選択できます。(HSLの[W]は整数値のみ) |
選択肢(1/2) | 表示例 | 選択肢(2/2) | 表示例 | ||||
RGB: 十進(実数)表記-カンマ空き | 85, 107, 47 | CSS-rgba: 十進(実数)表記-空白区切り/割合 | rgba(85 107 47 / 1) | ||||
RGB: 十進(実数)表記-カンマ詰め | 85,107,47 | CSS-rgba: 十進(実数)表記-空白区切り/% | rgba(85 107 47 / 100%) | ||||
RGB: 十進(実数)表記-空白区切り | 85 107 47 | CSS-hsl(解析): カンマ空き | hsl(82, 39%, 30%) | ||||
RGB: 十進(実数)表記-タブ区切り | 85 | 107 | 47 | CSS-hsl(解析): カンマ詰め | hsl(82,39%,30%) | ||
ARGB: 十進(実数)表記-カンマ空き | 255, 85, 107, 47 | CSS-hsl(解析): 空白区切り | hsl(82 39% 30%) | ||||
ARGB: 十進(実数)表記-カンマ詰め | 255,85,107,47 | CSS-hsla(解析): カンマ空き_割合 | hsla(82, 39%, 30%, 1) | ||||
ARGB: 十進(実数)表記-空白区切り | 255 85 107 47 | CSS-hsla(解析): 空白区切り/割合 | hsla(82 39% 30% / 1) | ||||
ARGB: 十進(実数)表記-タブ区切り | 255 | 85 | 107 | 47 | CSS-hsla(解析): 空白区切り/% | hsla(82 39% 30% / 100%) | |
RGB/CSS: #16進表記-小文字 | #556b2f | CSS-hsl(指定): カンマ空き | hsl(82, 39%, 30%) | ||||
RGB/CSS: #16進表記-大文字 | #556B2F | CSS-hsl(指定): カンマ詰め | hsl(82,39%,30%) | ||||
CSS-rgb: 十進(実数)表記-カンマ空き | rgb(85, 107, 47) | CSS-hsl(指定): 空白区切り | hsl(82 39% 30%) | ||||
CSS-rgb: 十進(実数)表記-カンマ詰め | rgb(85,107,47) | CSS-hsla(指定): カンマ空き_割合 | hsla(82, 39%, 30%, 1) | ||||
CSS-rgb: 十進(実数)表記-空白区切り | rgb(85 107 47) | CSS-hsla(指定): 空白区切り/割合 | hsla(82 39% 30% / 1) | ||||
CSS-rgb: 百分率(%)表記-カンマ空き | rgb(33%, 42%, 18%) | CSS-hsla(指定): 空白区切り/% | hsla(82 39% 30% / 100%) | ||||
CSS-rgb: 百分率(%)表記-カンマ詰め | rgb(33%,42%,18%) | NTSC-Luminance: 加重平均法-% | 36.69% | ||||
CSS-rgba: #16進表記-小文字 | #556b2fff | NTSC-Luminance: 加重平均法-255 | 93.56 | ||||
CSS-rgba: #16進表記-大文字 | #556B2FFF | .NET-ARGB | Color [A=255, R=85, G=107, B=47] | ||||
CSS-rgba: 十進(実数)表記-カンマ空き_割合 | rgba(85, 107, 47, 1) | 各種色名 | DarkOliveGreen |
RGB は、赤(R),緑(G),青(B) の3原色ごとに 暗(黒)~明(白) を256の階層に分け、10進表現で 0~255 の整数値をとるものです。この3原色の 0~255 の整数値は、2桁の16進数に直すと 00~FF の範囲になります。
それを RGB の順に繋いで6桁とし、先頭に[#]を置くと、広く使われている 16進のカラーコードになります。
(RGB の具体的な定義はいくつかありますが、ここでいう RGB は、パソコン仕様の [sRGB] を指しています。)
RGBA は、透明度を示す アルファ値(A) を RGB に追加して、様々な背景に「上塗り」できる [半透明な色] を表現するものです。RGBA は もとの色の RGB値を保ったまま半透明にし、背景との混色などに際して便利に使えるようにするもので、色空間とは異なる概念です。
アルファ値(A) も 10進表現で 0~255 の整数値ですが、表現するのは 透明(0)~不透明(255) のため「不透明度」と捉えるとわかりやすくなります。
なお、対応するアプリ等によっては、ARGB の順序で記述する場合があるので注意を要します。半透明を表現するため、当アプリでは透明度が上がると 最背面に 黒と白との正方形が交互に並ぶ「市松模様」が浮かび上がります。(例示色は[lime])(透明度が変わると背景は変化しますが、本来の色の RGB値はそのままなので、最上段の色もそのままですし、RGB以外の項目の値にも変化がありません。)
完全に不透明 半透明 完全に透明 不透明度=100%
透明度=0%不透明度=75%
透明度=25%不透明度=50%
透明度=50%不透明度=25%
透明度=75%不透明度=0%
透明度=100%
HSV(HSB) | : | 色相(Hue)…360度、 | 彩度(Saturation)…白色から色相色(純色)、 | 明度(Value/Brightness)…黒から白 |
HSL(HLS) | : | 色相(Hue)…360度、 | 彩度(Saturation)…灰色から色相色(純色)、 | 輝度(Luminance/Lightness)…黒から白 |
HSI | : | 色相(Hue)…360度、 | 彩度(Saturation)…白色から色相色(純色)、 | 輝度(Intensity:強度)…R,G,B の平均値 |
CMYK は、シアン(Cyan), マゼンタ(Magenta), イエロー(Yellow), ブラック(BlacK, 正しくは KeyPlate(=[版]) の K) の4色からなり インクによる印刷結果など、物質的な反射色により構成される「減法混合」を成すよう表現されます。つまりは「プリンタや印刷機などでのインクの配合などを考慮に入れた、印刷用途に向いた色の表現」と言えますが
パソコンなどの一般的なプリンタにおいては「カラーマネジメントシステム」を介して印刷されるため
パソコン側では「普通に(発光表示画像イメージのRGB=加法混合のままで)印刷を指示」するだけで
プリンタ側では「実際に(反射光印刷インク配合のCMYK=減法混合へ自動的に変換して)印刷してくれる」ようになっています。
(昨今のプリンタで一般ユーザーが実際の印刷時に確認すべきことの中では、専用インクと印刷用紙が量的に足りていることの確認のほかには
選択した用紙に対する各種の指定--普通紙/インクジェット紙/写真用紙/等々の紙質選択、用紙の大きさ・向き・表裏・部数などの指定--が、
たまにしか使わない/慣れないうちは、特に面倒で間違えやすい作業になっているといえます。)
そのため「CMYKへの変換」は事実上不要ですし、またプリンタによっては CMY の中間色のインクも用いて色再現性を高めている機種もあります。
したがって、ここで得られる CMYK の値はあまり意味がなく「参考程度にとどめておくものだ」という理解で十分だろうと思われます。
(数値表現に B/b を選択(黄色)、右下チェックボックス=[0-255]:初期状態) [YUV]と[YCbCr]は、パーセント表示(左図、比率・割合)では同じになりますが 具体的な値(右図)では表現範囲(下表)が異なるため [Y]以外は違う値になります。 | (数値表現に A/a を選択(黄色)、右下チェックボックス=[割合] に変更) 数値表現の選択が変わっても トラックバーの位置は変わっていないことに注目。 Y(709)=YPbPrの[Y]、Y(601)=YUV/YCbCrの[Y] となっていることにも注意。 |
選択肢 | XYZ | Lab | YUV | YCbCr | YPbPr | |||||||||||
A/a (右図) | A | X | 0~0.9505 | a (整数値) | L | 0~100 | a | Y | 0~0.9505 | Y | 0~1.0 | Y | 0~1.0 | |||
Y | 0~1.0 | a | -128~0~+127 | U | -0.436~0~+0.436 | Cb | -0.5~0~+0.5 | Pb | -0.5~0~+0.5 | |||||||
Z | 0~1.089 | b | -128~0~+127 | V | -0.615~0~+0.615 | Cr | -0.5~0~+0.5 | Pr | -0.5~0~+0.5 | |||||||
B/b (左図) | B | X | 0~100% | b | L | 0~100% | b | Y | 0~100% | Y | 0~100% | Y | 0~100% | |||
Y | 0~100% | a | -100%~0~+100% | U | -100%~0~+100% | Cb | -100%~0~+100% | Pb | -100%~0~+100% | |||||||
Z | 0~100% | b | -100%~0~+100% | V | -100%~0~+100% | Cr | -100%~0~+100% | Pr | -100%~0~+100% |
XYZ は、RGBとともに国際照明委員会(CIE)が1931年に定義した「CIE 1931色空間」のひとつです。人間の目の網膜で色を感じる3種類の錐体細胞の反応を示す三刺激値に基づいて、平均的なヒトが知覚することができるすべての色を包含し
RGBよりも広い範囲の物理的な色を、目の色覚を表す客観的な表現に置き換える、デバイス非依存の標準的な色表現となっています。
XYZ は正式には「CIE 1931 XYZ色空間」(RGBは「CIE 1931 RGB色空間」)といい、[Y]は輝度、[X][Z]は色度をあらわします。
正直なところ難解で、わかりやすく説明するのも至難の業なのですが、こちら や こちら の説明が正確で確実なようです。
次の2つの図は、どちらも「CIE 1931 xy色度図」を用いて「CIE 1931色空間」をあらわしたものです。色の付いた部分が 人間が知覚できる可視光の色域です。(表示色は[sRGB]による便宜的な表現であり不正確)
内側の三角形は「CIE 1931 RGB色空間」の範囲 内側の三角形は「sRGB」の範囲(再掲)
その外側の 色の無い部分は、紫外線や赤外線といった 不可視光の波長域をあらわしています。さらに可視光と不可視光の境界にあたる
外周の曲線部分は「スペクトル軌跡」と呼ばれ、プリズム分光によって得られる「スペクトル」 が表現されています。
Lab は、補色空間の一種で、明度を意味する次元 L と補色次元の a および b を持ち
CIE XYZ 色空間の座標を非線形に圧縮したものに基づいています。Lab は、マスターの色空間である CIE 1931 XYZ 色空間から派生したもので、XYZよりも知覚的に均等になっており
RGBやCMYKは人間の知覚よりも出力機器の都合が優先されているのに対し、Lab色空間は人間の視覚を近似するよう設計されています。
用語としては[Hunter 1948 L, a, b 色空間]と[CIE 1976 (L*, a*, b*) 色空間](CIELAB)の2つを指しますが
Adobe Photoshop 等では後者の CIELAB D50 を使っており、当アプリで扱っているのも後者です。
YUV, YCbCr, YPbPr は、輝度信号[Y]と 2つの色差信号を使って表現される色空間です。 ビデオ機器などの映像系分野で、おもに色差コンポーネント信号として使われています。色差信号は、輝度を先に求めておき、(青-輝度)、(赤-輝度) に一定の定数を掛けて求められます。
輝度[Y]の計算に用いる定数は、YCbCr には YUV と同じ定数を用いるのが基本のようです。YPbPr の定数は YUV/YCbCr とは異なります。
色差の計算には、それぞれの方式ごとに特有の定数が用いられます。
このため当アプリでも、YUVの輝度[Y] と YCbCrの輝度[Y] は まったく同じ値となりますが、YPbPrの輝度[Y] は 異なる値になります。
また、YUV と YCbCr の色差については、具体的な値(選択肢:a)は 異なりますが、パーセント表示(選択肢:b、割合)で見た場合には 同じになります。
YCbCr, YPbPr は YUV をもとに ITU-R からの勧告(BT.601, BT.709)に基づき派生した方式ですが、これらの使い分けには明確な基準はない模様です。
次の表は ウィキペディアの記述 を参考に まとめたものです。
色空間 輝度 色差 ITU-R
勧告PAL,SECAM用
コンポーネント信号アナログ デジタル 色差コンポーネント成分 ARIB
(日本)SMPTE(米国) デジタル伝送
HDMI青系 赤系 SD映像用 HD映像用 アナログ デジタル YUV Y U V ○ YCbCr Y Cb Cr BT.601 ○ ○ ○ ○ YPbPr Y Pb Pr BT.709 ○ ○ ○ ○
ITU-R は 国際電気通信連合(ITU) の 無線通信部門(Radiocommunication Sector) のことです。(ITU-R 勧告の一覧は こちら)
勧告 BT.601(1982-2011)は アナログビデオ信号をデジタルビデオに符号化するための、標準画質テレビ(SDTV)と同等の規格です。
勧告 BT.709(1990-)は 16:9 のアスペクト比をもつ ハイビジョンテレビ(HDTV)の対応規格です。
ARIB(アライブ:電波産業会)は 日本のデジタルテレビ規格 の代名詞で 地上デジタル放送(地デジ) や ワンセグ放送 などの標準規格を策定しています。
SMPTE は 米国映画テレビ技術者協会(1916年~) のことで 映像技術に関する様々な標準規格(SMPTEタイムコード,アナログNTSC等)を策定しています。
(日米ほかのアナログテレビで使われた NTSC は、輝度と2つの色度を用いる方式(YIQ)であり、YUVなどの色差方式とは本質的に異なるものです。)
Y(709) は、ITU-R 勧告 BT.709 に基づく YPbPr での 輝度信号[Y] の表現です。ITU-R は 国際電気通信連合(ITU) の 無線通信部門(Radiocommunication Sector) のことです。(ITU-R 勧告の一覧は こちら)
勧告 BT.709(1990-)は 16:9 のアスペクト比をもつ ハイビジョンテレビ(HDTV)の対応規格です。
(超高精細4K,8Kテレビ(UHDTV)の規格は 勧告 BT.2020、2K,4K,8K向け高ダイナミックレンジ(HDR)ビデオの規格は 勧告 BT.2100 となっています。)
(当アプリでは YPbPr の輝度[Y] に対応しており、数値表現の選択肢を揃えれば 同じ値で表示されます。)
輝度[Y]の計算式(RGB値からYPbPrの輝度[Y]を求める): Y = 0.2126 × R + 0.7152 × G + 0.0722 × B
Y(601) は、ITU-R 勧告 BT.601 に基づく YCbCr(YUV) での 輝度信号[Y] の表現です。勧告 BT.601(1982-2011)は アナログビデオ信号をデジタルビデオに符号化するための、標準画質テレビ(SDTV)と同等の規格です。
あたかもそれがデジタル的に符号化されたアナログコンポーネントビデオ信号であると見なすことができるものです。
(輝度[Y]は 標準のNTSC方式(YIQ)にも用いられました。カラーエンコーディングシステムは [YCbCr 4:2:2] としても知られます。)
(当アプリでは YCbCr および YUV の輝度[Y] に対応しており、数値表現の選択肢を揃えれば 同じ値で表示されます。)
輝度[Y]の計算式(RGB値からYCbCr(YUV,YIQ)の輝度[Y]を求める): Y = 0.299 × R + 0.587 × G + 0.114 × B
Y(NTSC-J) は、日本のNTSC方式(NTSC-J) で広く使われる、加重平均法 で求めた 輝度信号[Y] の表現です。NTSC は、日本やアメリカのアナログテレビで使われた コンポジット映像信号の仕様および標準規格で、輝度と2つの色度(YIQ)であらわします。
輝度0%の表現(黒)には、標準のNTSC規格(RS-170A/SMPTE-170M)では 7.5 IREを用いますが、NTSC-J では 0 IRE(=0V)が用いられました。
輝度100%の表現(白)には、標準のNTSC規格では色温度 6500K(標準光源D65)を用いますが、NTSC-J では業界標準の 9300K(D93)が用いられました。
NTSC-J の輝度[Y]の計算には、それらの要素を加味した定数が用いられるようです。(NTSC/NTSC-J(YIQ)の色度(I,Q)については当アプリでは未対応)
輝度[Y]の計算式(RGB値からNTSC-Jの輝度[Y]を求める): Y = 0.298912 × R + 0.586611 × G + 0.114478 × B
表記は 右側にあるチェックボックスで [0-255], [割合], [percent] の3種類から選べるようになっています。次の表は、例示画像の背景色(#556B2F=85,107,47=DarkOliveGreen)の場合で 3種類の表記を比べたものです。
画像 チェックボックスの状態 Y(709) Y(601) Y(NTSC-J)
□ [0-255]
97.99 93.58 93.56
☑ [割合]
0.3843 0.3670 0.3669
■ [percent]
38.43% 36.70% 36.69%
文字列編集は、当アプリで固定的に扱っている 16進表記で記載された色を、自由に変更できる機能です。 「基本色」「色名」「コレクション」の3つのボタンから編集します。(元に戻したい場合には「初期化」もできます。)
例として「基本色」を選ぶと次のようになります。(「基本色」のほか「色名」「コレクション」も基本的に同様) (はい:初期化、いいえ:編集、キャンセル)
初期化する場合 | 編集する場合 |
(初期化の選択肢は慎重にお選びください。) | ([OK]で 以下のように「メモ帳」が開きます。) |
基本色 | 色名 | コレクション |
BasicColors.txt | NamedColors.txt | CorrectedColors.txt |
基本色 | 色名 | コレクション |
区分:[RGB3]~[NCS系40] | 区分:[抜粋]~[鉄道] | (表示中の全域) |
(エラー発生後の表示) | |
メイン画面の操作に戻りますので、編集結果を確認できます。 | (コレクションについては 編集結果が即座に反映されます。) |
インストーラ [ ColorCodeResearcher_Install.exe ] を zip圧縮形式 で ダウンロード