【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()内部では上記の問題点を考慮して細工しています。

ツイート

「はかる」ということ。

とりあえず『目を通し終えた』ものの、自分程度の理解力ではとても『読んだ』とは言えないレベル。せめて、『わかったつもり』になるためにも再読を要す。

今度は通勤途中じゃなくて腰を据えて。

阪上 孝, 後藤 武  『〈はかる〉科学―計・測・量・謀…はかるをめぐる12話 (中公新書 1918)』 発行 : 中央公論新社  定価 : ￥ 924 ISBN : 4121019180 発行日 : 2007/10

以下、読みはじめる"前"に、「はかる」から連想したメモ書きから。

『不快音数』は、はかれるか？

• 不快音数(造語)。不快指数の音版。観測者が置かれている音場において、百人中何人が不快に感じるか。→同様の概念は既存？
• ホンではかる音量計と同様に、不快音数計の開発。できれば個人で携帯出来るのが理想。
• 快不快はどう決まる？音の高低(周波数)や大きさのみでは割り切れないようにも思う。
  このあたりは、第10章("美"をはかる)にも関連しそう。文化の違い等。
• 列車の中・"耳ざわり"から連想→走行音、アナウンス、話し声(年代別)、泣き声／鳴き声、ゲーム音、電話(ピッポッパ、かしかし、めるめる(?)、着信音、話し声)、ヘッドホンステレオの音もれ、キーボードの打鍵音。
• 会話・電話の応対・独り言→音の質的な違いは？

『世界でいちばん愛してる』って、どのくらい？

• 「愛情を計れる機械なんて、ない方がいいのよね」(典さん)
• "脳内メーカー"ならぬ脳内メーターは原理的に不可能？→「一日中あなたのことを考えている」という言葉の検証。起床している間の何％を特定のことに関する思考に費やしているか、なんてのは、はかれるんじゃという気もしなくもない。
• 脳における単位時間あたりの物流量や温度、電気的信号、脳波などといったものの変化と思考・感情との相関。緊張(リラックス)度計とかって、実はすでにあったりする？
• 「あ、あのときはカッとなって心にもないことを言ってしまったんです。ほんとはそんなこと思ってません」(瞬間値と統計値……なんか違う)。
• 「銀河系一が、両手を広げたスペースより大きいとは限らないのだ」(相対比較と絶対比較……だから違うってば)。

ツイート

「本と恋」がテーマ、だったみたい

風邪で熱っぽいところ、健康診断でレントゲン撮りなおされたり、関西→関東移動してきたりで疲れたので、早めに帰宅(というか、ホテルにチェックイン)。

途中寄った本屋で、最終巻が出ていることに気付いてゲット。

山名 沢湖  『レモネードBOOKS 3 (3) (バンブー・コミックス)』 発行 : 竹書房  定価 : ￥ 700 ISBN : 4812467322 発行日 : 2007/08/27

ありゃ、出たのえらい前だ……全然気付いて無かったよ orz

べ、べつに読みたくて買ってあげたわけじゃないんだからね！かんちがいしないでよねっ！

『つん読』ってこんな感じ？

熱でぼ～っとしている頭が、ちょっと癒された、かも？
これで終わってしまうとは残念……。
今巻のヒット

　ケンカ
　前提で
　つきあって
　下さい

言ってみたい、言われてみたい台詞100にランクインしたとかしないとか。

ツイート

近況的なもの

誕生日前後は身体能力が低下してしまう某吸血鬼のごとく、最近はなんとも調子が悪くて記事を書く気力が湧いてこない風柳です……って、長いな。

まぁ、とりあえず存在証明で。

最近は仕事面が少々繁忙期なので、私の面では本を読む時間をひねり出すのが精一杯って感じですかね。
週末も、土曜は移動で半日潰れ、関西に戻ると、本屋→食事→コンビニで飲食料購入後、帰宅。その後～日曜一杯は外出もせずに本を読むか寝てるか状態、月曜朝にまた関東に移動……というなかなか規則正しいダメっぷりです。

あ、でも先週末は休出になる可能性があったため、関西には移動せず。
結局、休出はいいよとなってホッとしたわけですが、急な予約だったためにホテルの部屋を移らねばならず(禁煙ルームが満室となったため、喫煙ルームへ移動)、掃除の関係で10時～17時頃までは外出することに。
まぁ、どうせだから、ということで、久しぶりに秋葉原に行ってまいりました……台風の中を(泣)。

昼過ぎまでは、バイオリズムのせいなのか、はたまた濡れた傘をもったままで電気屋の中をうろつくのに抵抗があったせいか、店の中に入ってPCやパーツを物色する気にもあんまりならず、かつて学生時代によく通っていたあたりを単に歩き回っただけって感じ。

そういえば、初音ミクなるモノを探そうかとか考えてたような気もしますが、着いたときにはすっかり忘れてました。

ひととおり歩き回った後は、万世でちょっと豪勢に肉を食べ(ヒレ9oz)、とらのあな→ブックタワーと回ってコミックス他を買い込んだあとで、秋葉原を後にしました。
帰りはちょっと寄り道して、前に入居していたマンスリーマンションの最寄り駅へ。
目当ては、ちょっと高めだけれどもなかなか良かった英国式リフレクソロジーの店。
予約を入れて、CD屋＆本屋で時間潰しをした後(しっかりCDも本も買ったが)、ハンド＆フットマッサージを2時間程やってもらう……『お疲れみたいで、ずっとうとうとしてましたね』とは、施術してくれた方の弁。ま、気持ちよければすべてよし。
その後は、蕎麦屋で軽く夕食を済まして、ホテルに戻りました。途中、台風の影響による徐行のため、数十分間駅で電車をまちぼうけていた、というのは内緒です。その間、反対方面は3回くらい来てたんだけどなぁ……。

あ、そういえば、珍しく土曜に2回も食事とってたんだな……。

ちなみに日曜はいい天気……だったみたいでしたが、ほぼ1日、ホテルの部屋でごろごろしつつ買い込んだコミックスなんかを読んでました。夕方5時前にようやく起き出し、近所の本屋でまた何冊か買い込んだ後、中華を食べてホテルに戻った、という特別でないただの一日でした。

あ、でも、珍しく日曜にまともな食事とってたんだな……。

ツイート