« 「はかる」ということ。 | トップページ | りんくぽっぷ:いまみてるページのリンクリストを表示するブックマークレット/Greasemonkey/SeaHorse »

2007/11/29

【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()
ソース修正(2009/07/06)→colorToHex.js
  1. colorToRGB()追加(結果を'rgb(r, g, b)'で返す)。
  2. Safari、Google Chrome対応。
  3. 速度改善のため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行近くあり、少々重そうなのが玉に傷。もうちょっとシンプルに出来ないものか……。
それで、色々試しているうちに、偶然、『document.fgColorに"red"等の色名を設定してから、改めてdocument.fgColorを参照すると、"#xxxxxx"形式に変換されている』ことを発見(document.xxColor系ならどれでもそうなる模様)。
これを利用することで、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"になるのですが。
colorToHex()内部では上記の問題点を考慮して細工しています。

« 「はかる」ということ。 | トップページ | りんくぽっぷ:いまみてるページのリンクリストを表示するブックマークレット/Greasemonkey/SeaHorse »

パソコン・インターネット」カテゴリの記事

おもいつき」カテゴリの記事

覚書」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

« 「はかる」ということ。 | トップページ | りんくぽっぷ:いまみてるページのリンクリストを表示するブックマークレット/Greasemonkey/SeaHorse »

戻るリンク追加

カレンダー

2020年3月
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        

ココログカレンダーPlus(旧2)

検索


    • Web全体 サイト内
    • 蔵書のISBNを入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

コメントリストツリー化

無料ブログはココログ