RGBと16進数の変換

RGB形式と16進数形式の色の相互変換

jQuery

$(function () { // 16進数 $('#hex').blur(function() { var str = $(this).val(); $('#color').css('background', str); if (str.length < 6) { // #abcをa,b,cに分割 var hex_3digit = str.match(/^#([0-9a-f]{1})([0-9a-f]{1})([0-9a-f]{1})/); // aa var hex_r = hex_3digit[1] + hex_3digit[1]; // bb var hex_g = hex_3digit[2] + hex_3digit[2]; // cc var hex_b = hex_3digit[3] + hex_3digit[3]; } else { // #abcdefをab,cd,efに分割 var hex_6digit = str.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/); // ab var hex_r = hex_6digit[1]; // cd var hex_g = hex_6digit[2]; // ef var hex_b = hex_6digit[3]; } // 16進数から10進数へ var rgb_r = parseInt(hex_r, 16); var rgb_g = parseInt(hex_g, 16); var rgb_b = parseInt(hex_b, 16); $('#r').val(rgb_r); $('#g').val(rgb_g); $('#b').val(rgb_b); }); // RGB $('#r,#g,#b').blur(function() { var rgb_r = $('#r').val(); var rgb_g = $('#g').val(); var rgb_b = $('#b').val(); // 10進数から16進数へ var hex_r = (parseInt(rgb_r)).toString(16); var hex_g = (parseInt(rgb_g)).toString(16); var hex_b = (parseInt(rgb_b)).toString(16); // 1桁の場合は0をつける hex_r = hex_r.replace(/(^[0-9a-f]{1}$)/, '0$1'); hex_g = hex_g.replace(/(^[0-9a-f]{1}$)/, '0$1'); hex_b = hex_b.replace(/(^[0-9a-f]{1}$)/, '0$1'); var hex = '#' + hex_r + hex_g + hex_b; $('#hex').val(hex); $('#color').css('background', $('#hex').val()); }); });

CSS

article { display: none; } article.selected { display: block; }

HTML

<form> <span id="color" style="background: #1546c3">&nbsp;</span> <input type="text" id="hex" maxlength="7" size="8" value="#1546c3" pattern="^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6})$"> <span>―</span> <label for="r">R</label> <input type="text" id="r" maxlength="3" size="4" value="21" pattern="^(1?[0-9]?[0-9]|2[0-4]?[0-9]|25[0-5])$"> <label for="g">G</label> <input type="text" id="g" maxlength="3" size="4" value="70" pattern="^(1?[0-9]?[0-9]|2[0-4]?[0-9]|25[0-5])$"> <label for="b">B</label> <input type="text" id="b" maxlength="3" size="4" value="195" pattern="^(1?[0-9]?[0-9]|2[0-4]?[0-9]|25[0-5])$"> </form>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について