Edited at

jQueryでrgb(255,255,255)を#FFFFFF形式に変換

More than 5 years have passed since last update.

ちょっと仕事で使ったのでメモ。

jQueryで色を指定したり取得したりすると、rgb(xxx,xxx,xxx)の形式になる。

特定の要素の色を取得して、フォームのvalueとして登録したかったので調べた。

.color{

display:inline-block;
width:1em;
height:1em;
padding:0;
border: 2px solid #CCC;
margin-right:6px;
}

.color_000{
background-color: #000;
}
.color_333{
background-color: #333;
}
.color_666{
background-color: #666;
}
.color_999{
background-color: #999;
}
.color_ccc{
background-color: #CCC;
}
.color_fff{
background-color: #FFF;
}

こんなCSSで、

<p>

<a href="#" class="color_000 color"></a>
<a href="#" class="color_333 color"></a>
<a href="#" class="color_666 color"></a>
<a href="#" class="color_999 color"></a>
<a href="#" class="color_ccc color"></a>
<a href="#" class="color_fff color"></a>
<input type="hidden" value="" name="selected_color" class="selected_color" />
</p>

なHTMLの場合、

jQuery(function(){

$(".color").click(function(){
$(".color").css({"borderColor":"#CCC"});
$(this).css({"borderColor":"blue"});

//クリックされた要素の背景色取得
var bgColor = $(this).css("backgroundColor").toString();
//背景色の余計な文字列削除
bgColor = bgColor.replace("rgb(","");
bgColor = bgColor.replace(")","");
//文字列分割
bgColor = bgColor.split(",");
//10進数を16進数に変換して連結
bgColor = "#"+parseInt(bgColor[0]).toString(16)+parseInt(bgColor[1]).toString(16)+parseInt(bgColor[2]).toString(16);
//inputに値を設定
$(this).nextAll("input[type=hidden]").val(bgColor);
});
});

ミソはココ

parseInt(bgColor[0]).toString(16);

parseInt()で文字列(例えば255)を数値に変換。それをtoString(16)で文字列に変換している。「(16)」は16進数に変換って意味。

toString(16)なんて初めて知った...