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

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

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

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

ちなみにわたしは、デザインはほとんどしないし、配色ツール等使わずに感覚で適当に色を選ぶ様な 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 のソースコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
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 の コンソールに直接貼付けても実行できます。