色の並べ方と、色をきれいに並べる４つのポイント

色の並べ方と、色をきれいに並べる４つのポイント。

色々な色を綺麗に並べるのって、大変です。
でも、色（赤：緑：青、rgb)の立方体で、色々なことが分かります。
色の並べ方が分かると、色を綺麗に並べたり、色マップが作れます。
色の並べ方が分かると、色の名前も理解が早くなります。
色の原則は、色のコードが関係しています。
色コードの意外な４つのポイントを説明します。

色の基本を説明。

色は立方体で表わされ、色は「カラーコード」で表現します。

光の色は、色の３原色「赤（red）、緑（green）、青（blue）」の立方体で説明されています。
色を表すパソコンなどのコードを「カラーコード」といいます。
「カラーコード」は、１６進数法と１０進数法があります。
ここでは、色のコードは十進法を使います。
十進法のほうが、数値の分かり易さや計算の利便性等が有るからです。
十進法は「（赤、緑、青）」を０～２５５の大きさで書く表記法です。
“例えば「赤」なら、（255,0,0,）で表記します。”
色の発色順序は、例えば赤は、赤のみ発色させ、緑、青を発色させないと、赤になります。
黄色は、赤と緑を発色させ、青を発色させないと、黄色になります。
白は、赤と緑と青を発色させ、黒は、赤と緑と青を発色させないと、黒になります。

色が変化する理屈

色の違いを色相と言います。
色相を変化させるのは、中間色の役目です。
色相を変化させるのは、以下の６色相変化パターンがあります。
＊（白～グレー～黒は r=g=b のパターンしか無いので割愛します。）
それぞれ、中間色を変化させると、色が色が変化します。
赤を「ｒ」、緑を「ｇ」、青を「ｂ」とすると
r>=g>=b　は、中間[g]を(0->255)にすると、赤色から黄色に変化。
g>=r>=b　は、中間[r]を(255->0)にすると、黄色から緑色に変化。
g>=b>=r　は、中間[b]を(0->255)にすると、緑色から空色に変化。
b>=g>=r　は、中間[g]を(255->0)にすると、空色から青色に変化。
b>=r>=g　は、中間[r]を(0->255)にすると、青色から紫色に変化。
r>=b>=g　は、中間[b]を(0->255)にすると、紫色から赤色に変化。
この順（パターン）は、虹色パターンでもあり、連続パターンでもあります。
注意点は、中間色の変化方向が、「１色相変化パターンおき」に交互に変わるところです。

色を変化させる計算式の汎用化（簡略化）

上記「６色相変化パターン」の計算式を簡略化してみました。
最大をmaximum(max)、中間をmiddle(mid)、最小をminimum(min)とすると。
max>=mid>=min と表せ
max、mid、min、に順次、ｒ、ｇ、ｂ　の数値を入力すれば良いことになります。
この式は３次元ですが、max　を２５５等に固定すれば、２次元の表になります。

色の３原色の役割

色の３原色の役割が決まっています。
max：0->255：黒から艶やかな色に変化する（彩度）
mid：0->255：色が変化する（色相）
mini：0->255：艶やかな色から白へ変化する（明度）
このような理屈を知っていると、色の理解が簡単になると思います。

色の基本１２色とスペック

・基本的な色の名前は、１２分割までは明確です。

・１２分割超過の名称付けの体系は不明確で、個々の色に名前が付くことが多いです。
一番多い色の名前は物の名前（動植物、鉱物等）です。
・私が調べた限りでは、約２７００余色まで名前が有りますが、後は名前が付いていません。

色を並べる４つのポイント

色相順のポイント

「色が変化する理屈」で述べたパターンで、並べます。
中間色の変化方向が交互に変わるため、少し面倒です。
基本は、max を 255 で考えます。
色の発色は min が 0 の時と、0->255　と変化する場合と、２パターンに分けます。
１） min が 0 の場合
max が　２５５　の場合は　　255> mid > 0 と表せ、
mid を変化させるだけなので、簡単です。
2) min が 0 -> 255 の場合
max が　２５５　の場合は　　255> mid > min と表せます。
明度順に変化させるなら mid より先に min を変化させる必要があります。
スクリプト例：perl の場合
foreach $max (255) {
foreach $min (0 .. $max) {
foreach $mid (0 .. $min) {
$mid_reverse = $max – $mid;
$code_rgb = “#$max,$mid,$min”;
$code_grb = “#$mid_reverse,$max,$min”; #mid が逆パタンになる
}}}

注意点は、中間色の変化方向が、「１色相変化パターンおき」に交互に変わるところです。

同色順のポイント

同色順とは、例えば「橙（オレンジ）」の場合、カラーコードは（255,127,0)です。
この「橙（オレンジ）」を暗くしたり（彩度の低減）、白くしたり（明度の増加）させることです。
暗くりたり、白くしたりするときは、変化の傾きが変わらないようにする必要があります。
暗くする時の傾き（tanθ）= mid / maxです。
白くする時の傾き（tanθ）= (max -mid) /(max – min)です。
これさえ分かっていれば、あとは簡単です。

３次元ベクトル順に並べるポイント

＊３次元での説明は、下記を参照してください。

フルカラー（１６００万色、16 million colors）を見るために必要な５つのポイント!

任意の色を並べるポイント

任意の色を並べるには、色相順がお勧めです。
任意の色と言えば、やはり「色名」が一番でしょう！
私が、こんな事？始めたのも色名の画像が綺麗に並ばなかったからです。
・エクセルで色コード、色画像、色名、色相角度を順に並べた物を掲載。
こんな画像になりました。（７８色、実際は２９００色）

・発色順番は彩度毎、明度毎、色相毎です。
この順番が、一番きれいに並ばせることができました。
・max、min、 は 0～255までを１０分割し、％表示にしてあります。
・max、min、 は 0～255までを１００分割し、％表示にしてあります。
・並べるための計算と色画像。（エクセルを添付しておきます。）
・7zip で圧縮してあるので、解凍してください。
・色画像は[perl imagemagick]で作成したものを張り付けました。
色名、コード、色画像と並びの計算.7z

まとめ

当初は色の事を簡単に考えていましたが、だんだん深みにはまっていきました。
色の立方体を考える頃が一番混乱していました。
色を２次元の平面で表せるようになり、だんだん色の事が明確になって来ました。
３原色の役割が分かって、すっきりしました。