めずらしく色のお話です！！
色の境界線ってどこなんだろうね？
大量のカラーコードを何種類かに分類したいんですが、何色（何種類）にどうやって分類するのが無難なのか方法を考えてみました！色分割のお話です。
ちなみにわたしは、デザインはほとんどしないし、配色ツール等使わずに感覚で適当に色を選ぶ様な 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色にすることにしました。赤・緑・青の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 で書いてブックマークレットにしました。比率をオリジナルの物に書き換えたりして使ってみてください！（使えそうなら…ｗ）レイアウト等手抜きなので微調整など各自でおこなってくださいｗ 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 の コンソールに直接貼付けても実行できます。
