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

2021-06-03jQuery 取得,jQuery

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

CSSで設定した文字色や背景色の値が#000000などのhexカラーコードだったとしてもjQueryのcss()で取得されるカラーコードはrgb(0,0,0)の様に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に戻すのが良さそうです。

jQuery 取得,jQuery

Posted by Yousuke.U