【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の場合、同手法では"#xｙz"がなぜか"#0x0y0z"に変換されてしまいます……Firefoxでは正しく"#xxyyzz"になるのですが。

colorToHex()内部では上記の問題点を考慮して細工しています。