Just another Windows perl site

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

2018/04/30
 
この記事を書いている人 - WRITER -
*会社職務経歴  ・本店・安全・品質部長(2年)  ・ラインマン(送電線建設・保守)(30年)  ・情報システム(3年)

Contents

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

スポンサードリンク

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

色の基本を説明。

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

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

色が変化する理屈

色の違いを色相と言います。
色相を変化させるのは、中間色の役目です。
色相を変化させるのは、以下の6色相変化パターンがあります。
*(白~グレー~黒は r=g=b のパターンしか無いので割愛します。)
それぞれ、中間色を変化させると、色が色が変化します。
赤を「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)にすると、紫色から赤色に変化。
この順(パターン)は、虹色パターンでもあり、連続パターンでもあります。
注意点は、中間色の変化方向が、「1色相変化パターンおき」に交互に変わるところです。

色を変化させる計算式の汎用化(簡略化)

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

色の3原色の役割

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

色の基本12色とスペック

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

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

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

スポンサードリンク

色相順のポイント

「色が変化する理屈」で述べたパターンで、並べます。
中間色の変化方向が交互に変わるため、少し面倒です。
基本は、max を 255 で考えます。
色の発色は min が 0 の時と、0->255 と変化する場合と、2パターンに分けます。
1) min が 0 の場合
max が 255 の場合は  255> mid > 0 と表せ、
mid を変化させるだけなので、簡単です。
2) min が 0 -> 255 の場合
max が 255 の場合は  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 が逆パタンになる
}}}

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

同色順のポイント


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

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

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

フルカラー(1600万色、16 million colors)を見るために必要な5つのポイント!

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

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

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

まとめ

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

スポンサードリンク


この記事を書いている人 - WRITER -
*会社職務経歴  ・本店・安全・品質部長(2年)  ・ラインマン(送電線建設・保守)(30年)  ・情報システム(3年)

- Comments -

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Copyright© 仕事の進め方の効率化ブログ , 2017 All Rights Reserved.