jQueryで色を16進数で受け取る

jQueryで色を受け取ると、ブラウザごとにばらばらの形式で値をわたされます。ブラウザ間の差異などについては、こちらのサイトで説明してくれているのですが、Operaは16進数、chromeやIE、firefoxはRGBで色がわたされます。

で、同じRGBでもIEとchromeやfirefoxでは微妙に形式が違うと。けっこう面倒ですな。

var color = $("#foo").css( "background-color" );

こうやった時に、背景色の値を16進数で受け取りたかったわけです。で、なんかないかなーと探したら、2つ候補が見つかった。

下の方がいろいろな機能が盛り込まれていて高機能ですが、今回はRGBから16進数に変換したいだけなので、上のjquery-color-utilsを使わせていただくことにします。

使い方は簡単で、$.fmtColor()に値を渡すだけ。rgbで渡した場合は16進数で、16進数で渡した場合はrgbで戻してくれる。16進数の場合、#000みたいな省略した書き方でもOK。

var rgb = $(this).css("background-color");
alert(rgb);		//rgb(255,0,0)

var color = $.fmtColor( rgb );
alert( color );	//#FF0000

こいつは便利だ。ありがたいことです。