カラーコードにどっぷり!赤とオレンジの境界線を求めて…

赤とオレンジのグラデーション
めずらしく色のお話です!!

色の境界線ってどこなんだろうね?

大量のカラーコードを何種類かに分類したいんですが、何色(何種類)にどうやって分類するのが無難なのか方法を考えてみました!色分割のお話です。

ちなみにわたしは、デザインはほとんどしないし、配色ツール等使わずに感覚で適当に色を選ぶ様な Web デザインは素人です!(エンジニア寄り)

16,777,216 色に泣かされる!

フルカラーチャート

モニターは知りませんが、ブラウザのカラーコードで表示出来る色数って、256 × 256 × 256 で 16777216 ですよね。16777216 って数の物量、数値的に見てなんとなく多いとは思っていたんですが、漠然としていて捕えにくかったので、ブラウザに全色表示して見てみたいと思いました。

縦横 1px の div に背景色を指定して 16777216 色を一気に表示出来る様に JavaScript でサクっと書いてみました。実行結果は、いつまでも終わらないレンダリング、増え続けるブラウザの使用メモリ、タブのメモリが 900M 超えたあたりで断念しました!

この時点で 16777216 のフルカラーって上に貼付けた様なイメージ程度だと思い込んでいたんですね…。浅い、あさいよ…。

16,777,216 色ってどの位の幅になるんだろうね?

フルカラーチャート風?

カラーピッカーとかでたまに見かけるこのフルカラーっぽいカラーチャート、この形式で 16,777,216 色を表示出来るのか不明ですが、もし表示したとしたら横幅どの位になるのかって考えたんです。

縦が明度 256 段階、彩度 256 段階で合計 512 で 16,777,216 割る 512 が 32,768 になります。(厳密に考えたら違うんだけど、大体を把握したいからこれでいきます)

横幅 32,768 をピクセルで表示したとして、横幅 1440px の解像度のモニターで表示した場合、約23台必要なんです。ひぇー

16,777,216 色ってすごい量なんだなーと。なんとなく感じられました?

12色で分類したい!

カラーチャートを12分割

何色で分類するか考えた結果、この12色にすることにしました。赤・緑・青の3色では少なすぎるし、その中間色を足した赤・黄・緑・シアン・青・桃の6色でも少ないと感じたので。さらに中間を出して12色。(色と名前合ってるのか自信なし)

色分類時の比率

肝心の計算方法は、各色のRGBの比率を出して計算するしかないって思いました。RGB の 16進数のカラーコードを256段階のRGBに変換してみると比率出しやすいです。

赤だと #ff0000 で rgb(255,0,0) で比率は、256:0:0 です。
黄だと #ffff00 で rgb(255,255,0) で比率は、256:256:0 です。
じゃぁ、中間のオレンジは、#ff7f00 で rgb(255,127,0) で比率は、256:128:0 です。

色分類時の比率(赤・オレンジ・黄)

分かりやすい様に比率を落としました。
このままだと、各色のど真ん中のカラーコードのみしか判別出来ないので、幅を持たせます。

赤の比率

赤だとこんな感じにしました。
「16:0:4.5 〜 16:0:0 〜 16:4.5:0」の間なら赤と判定。
オレンジは、「16:4.6:0 〜 16:8:0 〜 16:12.5:0」といった感じで、各12色の比率の範囲を決めていきました。(比率は結構適当)

カラーコードの分類比率例

比率表を Google Docs のスプレッドシートに書いて共有してありますので、詳しくはそちらより確認してみてください。
https://docs.google.com/spreadsheet/ccc?…

計算方法

適当にカラーコードを選んで色判定の過程を書いてみます。

#cf6722 の場合
1. RGB16進数のカラーコードを数値のRGBに変換します。
#cf6722 → rgb(208,104,35)

2. rgb(208,104,35) を先程の比率に変換します。一番大きな 208 を 16 とします。
104 / 208 × 16 = 8
35 / 208 × 16 = 2.692307692307692
16 : 8 : 2.692307692307692

3. 先程の比率表の範囲に当てはめます。1番小さい数値は無視します。
オレンジ(橙)の「16:4.6:0 〜 16:12.5:0」の範囲なので、#cf6722 はオレンジになります。ちゃんちゃん。

ブックマークレットにしたよ!

毎回、手作業で計算したり面倒なので JavaScript で書いてブックマークレットにしました。比率をオリジナルの物に書き換えたりして使ってみてください!(使えそうなら…w)レイアウト等手抜きなので微調整など各自でおこなってくださいw Chrome でしか動作確認していません!

色分類のブックマークレット
(※ JavaScript の書き方が悪かったのか上手く登録できません、あとで修正します。修正しました。)

カラーコード分類ブックマークレット

Google で使ってみました!16進数のカラーコード(# + 6桁)しか対応していませんが、入力すると比率を見て分類の色を表示してくれます。

JavaScript のソースコード

javascript:(function(d){
	var frm = d.createElement('div');
	frm.setAttribute('style','position:absolute;width:260px;height:160px;background-color:#333;z-index:99999;right:20px;top:20px;box-shadow:#222 0px 0px 5px;padding:20px;');
	frm.innerHTML = '<input id="hexcode" type="text" value="#" maxlength="7"><br /><p id="codeinfo" style="padding:10px;width:238px;height:98px;background-color:#fff;border:1px dashed #ccc;"></p>';
	d.body.insertBefore(frm,d.body.firstChild);

	setInterval(function(){
		var f = d.getElementById('hexcode').value;
			if(f.match(/^#/)){ colorCoding(f); }
	},1000);

	function colorCoding(hex){
		if(hex==='#'){return;}
		var r = parseInt(hex.substring(1,3),16),
		g = parseInt(hex.substring(3,5),16),
		b = parseInt(hex.substring(5,7),16),
		iro = color = ratio = "";

		// 1-0
		if(g===b && r>g){
			color = '#ff0000';
			iro = '赤';
		// 3-0
		}else if(r===g && r>b){
			color = '#ffff00';
			iro = '黄';
		// 5-0
		}else if(r===b && g>r){
			color = '#00ff00';
			iro = '緑';
		// 7-0
		}else if(g===b && g>r){
			color = '#00ffff';
			iro = 'シアン';
		// 9-0
		}else if(r===g && b>r){
			color = '#0000ff';
			iro = '青';
		// 11-0
		}else if(r===b && b>g){
			color = '#ff00ff';
			iro = '桃';
		}else if(r>g && g>b){
			// 1-2 G:0 ~ 4.5
			if(g/r*16 > 0 && g/r*16 <= 4.5){
				color = '#ff0000';
				iro = '赤';
			}
			// 2-1,2-2 G:4.6 ~ 12.5
			else if(g/r*16 > 4.5 && g/r*16 <= 12.5){
				color = '#ff7f00';
				iro = 'オレンジ';
			}
			// 3-1 G:12.6 ~ 16
			else if(g/r*16 > 12.5 && g/r*16 <= 16){
				color = '#ffff00';
				iro = '黄';
			}
		}else if(g>r && r>b){
			// 3-2 R:16 ~ 12.6
			if(r/g*16 > 12.5 && r/g*16 <= 16){				
				color = '#ffff00';
				iro = '黄';
			}
			// 4-1,4-2 R:12.5 ~ 4.6
			else if(r/g*16 > 4.5 && r/g*16 <= 12.5){
				color = '#7fff00';
				iro = '黄緑';
			}
			// 5-1 R:4.5 ~ 0
			else if(r/g*16 > 0 && r/g*16 <= 4.5){
				color = '#7fff00';
				iro = '黄緑';
			}
		}else if(g>b && b>r){
			// 5-2 B:0 ~ 4.5
			if(b/g*16 > 0 && b/g*16 <= 4.5){
				color = '#00ff00';
				iro = '緑';
			}
			// 6-1,6-2 B:4.6 ~ 12.5
			else if(b/g*16 > 4.5 && b/g*16 <= 12.5){
				color = '#00ff7f';
				iro = '青緑';
			}
			// 7-1 B:12.6 ~ 16
			else if(b/g*16 > 12.5 && b/g*16 <= 16){
				color = '#00ffff';
				iro = 'シアン';
			}
		}else if(b>g && g>r){
			// 7-2 G:16 ~ 12.6
			if(g/b*16 > 12.5 && g/b*16 <= 16){
				color = '#00ffff';
				iro = 'シアン';
			}
			// 8-1,8-2 G:12.5 ~ 4.6
			else if(g/b*16 > 4.5 && g/b*16 <= 12.5){
				color = '#007fff';
				iro = '水';
			}
			// 9-1 B:4.5 ~ 0
			else if(g/b*16 > 0 && g/b*16 <= 4.5){
				color = '#0000ff';
				iro = '青';
			}
		}else if(b>r && r>g){
			// 9-2 R:0 ~ 4.5
			if(r/b*16 > 0 && r/b*16 <= 4.5){
				color = '#0000ff';
				iro = '青';
			}
			// 10-1,10-2 R:4.6 ~ 12.5
			else if(r/b*16 > 4.5 && r/b*16 <= 12.5){
				color = '#7f00ff';
				iro = '紫';
			}
			// 11-1 B:12.6 ~ 16
			else if(r/b*16 > 12.5 && r/b*16 <= 16){
				color = '#ff00ff';
				iro = '桃';
			}
		}else if(r>b && b>g){
			// 11-2 B:16 ~ 12.6
			if(b/r*16 > 12.5 && b/r*16 <= 16){
				color = '#ff00ff';
				iro = '桃';
			}
			// 12-1,12-2 B:12.5 ~ 4.6
			else if(b/r*16 > 4.5 && b/r*16 <= 12.5){
				color = '#ff007f';
				iro = '赤紫';
			}
			// 1-1 B:4.5 ~ 0
			else if(b/r*16 > 0 && b/r*16 <= 4.5){
				color = '#ff0000';
				iro = '赤';
			}
		}else{
			color = '#9f9f9f';
			iro = 'モノトーン';
		}
		d.getElementById('codeinfo').style.backgroundColor = color;
		d.getElementById('codeinfo').innerHTML = hex+'は、rgb('+r+','+g+','+b+')'+'で、分類は「'+iro+'」です。';
	}
})(document);

ブックマークレットの中身です。改変ご自由に!!
コピーして Chrome の コンソールに直接貼付けても実行できます。