【JavaScript】各種色指定用の文字列を16進カラーコード(#xxxxxx)に変換
JavaScript(CSS)で色を扱おうとすると、同じ赤色でも"red"・"#ff0000"・"#f00"・"rgb(255,0,0)"といった様々な表記が可能です。
指定する分にはいろんな書き方が出来るのは便利でよいのですが、逆のケース、つまり既に指定されている色を取得する場合に、どのフォーマットで返ってくるかわからない、というのでは、少々困ってしまいます。
そこで、色指定用の各種の文字列を、16進カラーコード(#xxxxxx)形式に変換する関数を作ってみました。
function colorToHex(color) {
color=color.replace(/\s/g,'').toLowerCase();
if (color.match(/^rgb\((\d{1,3})%?,(\d{1,3})%?,(\d{1,3})%?\)$/)) {
// 'rgb(r,g,b)' => '#xxxxxx'
var r=RegExp.$1,g=RegExp.$2,b=RegExp.$3;
if (color.match('%')) {
r=~~(255*r/100); g=~~(255*g/100); b=~~(255*b/100);
}
return (b|(((g|(r|1<<8)<<8))<<8)).toString(16).replace(/^1/,'#');
}
if (!isNaN('0x'+color)) color='#'+color; // 'x'(hexadecimal) => '#x'
if (color.match(/^#([a-f\d])([a-f\d])([a-f\d])$/)) {
// '#rgb' =>'#rrggbb'
var r=RegExp.$1,g=RegExp.$2,b=RegExp.$3;
return '#'+r+r+g+g+b+b;
}
try {
// (any format) => '#xxxxxx'
var fg=document.fgColor;
document.fgColor=color; color=document.fgColor;
document.fgColor=fg;
}
catch(e){
}
return color;
} // end of colorToHex()
指定する分にはいろんな書き方が出来るのは便利でよいのですが、逆のケース、つまり既に指定されている色を取得する場合に、どのフォーマットで返ってくるかわからない、というのでは、少々困ってしまいます。
そこで、色指定用の各種の文字列を、16進カラーコード(#xxxxxx)形式に変換する関数を作ってみました。
color=color.replace(/\s/g,'').toLowerCase();
if (color.match(/^rgb\((\d{1,3})%?,(\d{1,3})%?,(\d{1,3})%?\)$/)) {
// 'rgb(r,g,b)' => '#xxxxxx'
var r=RegExp.$1,g=RegExp.$2,b=RegExp.$3;
if (color.match('%')) {
r=~~(255*r/100); g=~~(255*g/100); b=~~(255*b/100);
}
return (b|(((g|(r|1<<8)<<8))<<8)).toString(16).replace(/^1/,'#');
}
if (!isNaN('0x'+color)) color='#'+color; // 'x'(hexadecimal) => '#x'
if (color.match(/^#([a-f\d])([a-f\d])([a-f\d])$/)) {
// '#rgb' =>'#rrggbb'
var r=RegExp.$1,g=RegExp.$2,b=RegExp.$3;
return '#'+r+r+g+g+b+b;
}
try {
// (any format) => '#xxxxxx'
var fg=document.fgColor;
document.fgColor=color; color=document.fgColor;
document.fgColor=fg;
}
catch(e){
}
return color;
} // end of colorToHex()
ソース修正(2009/07/06)→colorToHex.js
- colorToRGB()追加(結果を'rgb(r, g, b)'で返す)。
- Safari、Google Chrome対応。
- 速度改善のためIFRAMEを使うようにしたので、document.bodyが出来てからコールすること。
【colorToHex()の使い方】サンプルはこちら。
引数に色指定用の文字列を指定してコールしてやれば、#xxxxxx形式のカラーコードを返します。
例1) var hexColor=colorToHex('rgb(0, 23, 255)'); // #0017ff
例2) var hexColor=colorToHex('cadetblue'); // #5f9ea0
IE6 SP2、Sleipnir 2.5.12(Trident/Gecko)、Firefox 2.0.0.10、Opera
9.10でのみ確認。
最初に「きっと似たような処理を行うものは沢山転がっているはず」と思って検索をかけてみました。
とりあえず、RGB color parser in JavaScriptにあったRGBColor()(rgbcolor.js)で同様のことが出来そう、というのはわかりましたが、'red'等の色名については変換テーブルを自前で用意していたりするのでコードが300行近くあり、少々重そうなのが玉に傷。もうちょっとシンプルに出来ないものか……。
とりあえず、RGB color parser in JavaScriptにあったRGBColor()(rgbcolor.js)で同様のことが出来そう、というのはわかりましたが、'red'等の色名については変換テーブルを自前で用意していたりするのでコードが300行近くあり、少々重そうなのが玉に傷。もうちょっとシンプルに出来ないものか……。
それで、色々試しているうちに、偶然、『document.fgColorに"red"等の色名を設定してから、改めてdocument.fgColorを参照すると、"#xxxxxx"形式に変換されている』ことを発見(document.xxColor系ならどれでもそうなる模様)。
これを利用することで、30行弱のコードで当該機能が実現出来るようになったのでした……ブラウザ依存性が高いかもしれませんが(汗)。
これを利用することで、30行弱のコードで当該機能が実現出来るようになったのでした……ブラウザ依存性が高いかもしれませんが(汗)。
ちなみに、IE6(Tridentエンジン)の場合には、fgColorを使う手法で"rgb(d,d,d)"フォーマットも"#xxxxxx"に変換可能ですが、FirefoxやOperaではNGでした(Firefoxは"rgb(d,d,d)"のまま、Operaでは"")。
また、IE6(Trident)やOperaの場合、同手法では"#xyz"がなぜか"#0x0y0z"に変換されてしまいます……Firefoxでは正しく"#xxyyzz"になるのですが。
また、IE6(Trident)やOperaの場合、同手法では"#xyz"がなぜか"#0x0y0z"に変換されてしまいます……Firefoxでは正しく"#xxyyzz"になるのですが。
colorToHex()内部では上記の問題点を考慮して細工しています。
« 「はかる」ということ。 | トップページ | りんくぽっぷ:いまみてるページのリンクリストを表示するブックマークレット/Greasemonkey/SeaHorse »
「パソコン・インターネット」カテゴリの記事
- Twitter 原寸びゅー:PC版ブラウザ用・Twitterの画像閲覧と保存がはかどる拡張機能の紹介(2016.02.12)
- スマートフォンをPC上の音楽を再生するためのリモコンとして使いたい(2016.01.10)
- BIGLOBE光ネクスト(大阪)の通信速度問題 - プロバイダ選びは難しい……(2015.08.13)
- BOOK☆WALKER さんに関して最近経験した不安と不満(2015.08.10)
- 『#鳥獣戯画制作キット』が楽しい(2015.07.01)
「おもいつき」カテゴリの記事
- ココログをTwitterカードに対応させてみる(2016.11.23)
- 神使の兎 ~宇治神社にて~(2016.07.10)
- Twitter 原寸びゅー:PC版ブラウザ用・Twitterの画像閲覧と保存がはかどる拡張機能の紹介(2016.02.12)
- スマートフォンをPC上の音楽を再生するためのリモコンとして使いたい(2016.01.10)
- 【覚書】風柳亭(ココログプロ)をレスポンシブWebデザイン化(Bootstrap3使用)(2015.10.09)
「覚書」カテゴリの記事
- 鍛高譚 ~ カレイにまつわる物語(2018.05.25)
- ココログをTwitterカードに対応させてみる(2016.11.23)
- 神使の兎 ~宇治神社にて~(2016.07.10)
- Twitter 原寸びゅー:PC版ブラウザ用・Twitterの画像閲覧と保存がはかどる拡張機能の紹介(2016.02.12)
- スマートフォンをPC上の音楽を再生するためのリモコンとして使いたい(2016.01.10)
« 「はかる」ということ。 | トップページ | りんくぽっぷ:いまみてるページのリンクリストを表示するブックマークレット/Greasemonkey/SeaHorse »
コメント