【jQuery】要素のCSSからhexカラーコードを取得する方法

2019年4月13日jQuery

CSSで設定した値がhexカラーコードでもjQueryのcss()で取得可能なカラーコードはrgb(rgba)です

hex16進数表記のカラーコードを使いたい場合は、css()でrgbコードを取得後にhexに変換する必要があります

取得したrgbからhexカラーコードに変換する方法

JavaScript、jQueryで関数は用意されていないので、rgbからhexに変換関数をコード内に定義します

See the Pen rgbtohex by yochans (@yochans) on CodePen.

検索するとrgbからhexへの変換処理の書き方は色々と出てきますが、透過度が含められたrgbaコード時の処理にも対応したものが良いですね

HTML

<div id="box"></div>
<p id="rgb"></p>
<p id="hex"></p>

CSS

#box{
  width:50px;
  height:50px;
  background: #008080;
}

jQuery

//rgbからhexに変換
function rgbtohex(orig){
 var rgb = orig.replace(/\s/g,'').match(/^rgba?\((\d+),(\d+),(\d+)/i);
 return (rgb && rgb.length === 4) ? "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : orig;
}
  
//ボックスのrgbカラーコードを取得
let rgbColor = $('#box').css('background-color');
  
//rgbtohex()でhexに変換
let hexColor = rgbtohex(rgbColor);
  
//表示用
$('#rgb').html('RGB : ' + rgbColor );
$('#hex').html('HEX : ' +  hexColor );

サンプルコードではrgbaの場合、透過度(Alpha値)が反映されないので注意です

透過度を保持したい場合、8桁hexの#RRGGBBAAに変換する必要がありますが、現状でのRRGGBBAAの記述はChromeやfirefoxなどではAlpha値も反映されますが、edgeでは6桁部分も含めて無視されてしまいます

またCSS3でも#RRGGBBAA記述は非推奨とのことですので、再度要素に反映させる場合はrgbaに戻すのが良さそうです

2019年4月13日jQuery

Posted by ヨウスケ