16進カラーコードまたは色名を10進に変換するjavascriptコード。
Web Color 以外の色 - 色名指定が可能な色の見本をもとに、16進カラーコードまたは色名を10進に変換するjavascriptコードを書いた。
String.prototype.toDecColorCode || (function(){ var name = { white : { red : 255 , green : 255 , blue : 255 }, /* 〜以下、名前指定できる色一覧〜 */ }; function range( value, minimum, maximum ) { if( value > maximum ) return maximum; else if( value < minimum ) return minimum; return value; } String.prototype.toDecColorCode = (function(){ var str = (this+'').toLowerCase().replace(/#/,''); if( /^[0-9a-fA-F]{3}$/.test(str) ) { return { red : parseInt( str.charAt(0) + str.charAt(0), 16 ), green : parseInt( str.charAt(1) + str.charAt(1), 16 ), blue : parseInt( str.charAt(2) + str.charAt(2), 16 ), alpha : 0 }; } else if( /^[0-9a-fA-F]{6}$/.test(str) ) { return { red : parseInt( str.substr(0,2), 16 ), green : parseInt( str.substr(2,2), 16 ), blue : parseInt( str.substr(4,2), 16 ), alpha : 0 }; } else if( str.match(/([0-9]{1,3})[^0-9]*([0-9]{1,3})[^0-9]*([0-9]{1,3})[^0-9.]*([0-1]?.?[0-9]{1,})/) ) { return { red : range( parseInt(RegExp.$1,10), 0, 255 ), green : range( parseInt(RegExp.$2,10), 0, 255 ), blue : range( parseInt(RegExp.$3,10), 0, 255 ), alpha : range( parseFloat('0'+RegExp.$4,10), 0, 1 ) }; } else if( str.match(/([0-9]{1,3})[^0-9]*([0-9]{1,3})[^0-9]*([0-9]{1,3})/) ) { return { red : range( parseInt(RegExp.$1,10), 0, 255 ), green : range( parseInt(RegExp.$2,10), 0, 255 ), blue : range( parseInt(RegExp.$3,10), 0, 255 ) }; } else { for( n in name ) if( str == n ) return name[n]; return ''; } }); })();
使い方
// color1,color2,color3,color4はいづれも、{ red: 0, green: 0, blue: 0 }となる。 var color1 = toDecColorCode( "black" ); var color2 = toDecColorCode( "#000" ); var color3 = toDecColorCode( "#000000" ); var color4 = toDecColorCode( "rgb(0,0,0)" ); // アルファチャンネルが指定されている場合はアルファチャンネルも返す。 var color5 = toDecColorCode( "rgba(0,0,0,0.5)" ); // color5 = { red: 0, green: 0, blue: 0, alpha: 0.5 }
応用：
例えば、下記のような構成があったとする。
/* style.css */ #foo { background: #000; }
<html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <p id="foo">text</p> </body> </html>
要素fooの文字色に背景色の反対色を設定したいとする。
背景色の取得は下記のようにできる。
// 外部スタイルシート反映済みの完全なスタイル設定を取得するコード。 var getStyle = (function(target, cssProperty){ var style = target.currentStyle || document.defaultView.getComputedStyle(target, ''); return style[cssProperty]; }); // 背景色を取得。 var target = document.getElementById('foo'); var bg = getStyle( target, "backgroundColor" );
しかし、せっかく取得した背景色bgの値はブラウザによって変わってくる。
例えば、Firefoxであれば「"rgb(0, 0, 0)"」、IEであれば「"#000"」となる。
ここで、
// 背景色を取得。 var bg = getStyle( target, "backgroundColor" ); bg = target_bgcolor.toDecColorCode();
とすると、target_bgcolorはかならず「{ red:0, green:0, blue:0 }」となる。
文字色に反対色を設定するならば、
// 背景色を取得。 var bg = getStyle( target, "backgroundColor" ); bg = bg.toDecColorCode(); // 反対色を生成。 var color = "rgb("+ (255-bg.red ) +","+ (255-bg.green) +","+ (255-bg.blue ) +")"; // 設定。 target.style.color = color;
洗練さにかけるけどとりあえず動くからよし。
そのうち直す。
