カラーコードで使う0xFFFFFFなどの16進数(HEX)からRGBの各数値を計算で取得

HTMLやCSS、javascriptなんかでよく使う色指定のための16進数（16進法）のカラーコード。0xFF0000とか0x0033FFとか0xFF9900。一桁が0から9、そしてABCDEFの16種類の数字とアルファベットで表記される数値です。お馴染みだと思います。

今回はこのHEX値をjavascriptで計算によってRBGそれぞれの値(0から255まで)を取得したいと思います。

background-colorなどの16進法の値を rgb()やrgba()におきかえるときなどに使えそうです。

ちなみに僕は高一の時に数学で赤点をとったくらいなのでこういう計算はとても苦手です。

式

//例えばこのhex値
const hexcolor = 0xe2ccF0

//Rの値を出力
console.log( Math.floor(hexcolor/65536) )
=226

//Gの値を出力
console.log( Math.floor( ( hexcolor%65536)/256) )
=204

//Bの値を出力
console.log( hexcolor%256 )
=240

//RBGを出力
console.log( Math.floor( hexcolor/65536), Math.floor( ( hexcolor%65536)/256), ( hexcolor%256) )
=226, 204, 240

なにをしてるか

Rの値

Rの値を表しているのは 0xe2ccF0 のうち先頭の6,5桁目の0xe20000です。
0xe20000を0x010000(=65536=16*16*16*16)で割ってみます。
答えは0xe2。これは10進法で(14*16)+2で226です。

式で表現すると、

console.log( Math.floor(0xe2ccF0/65536) )

Math.floorで切り捨てしているのは、Rの値には関係ない0x010000(65536)で割り切れない0x00ccF0を捨てているからです。

Gの値

Gの値は上で出た(0xe2ccF0/65536)の小数点以下の数=あまりの数を今度は0x000100の数（=256）で割ることで出しています。ここでも小数点以下は切り捨てます。（%はあまりの数を求めることができます）

Bの値

Bの値はこの256(=0x000100)で割った時のあまりの数になります。
RとGの桁(3-6桁目)の値はすべて256の倍の数になるので、256で割り切れます。

ちなみに

式はこんな感じで16進数で計算することもできます。こちらのほうが覚えやすいかも？

const hexcolor = 0xe2ccF0

//Rの値を出力
console.log( Math.floor(hexcolor/0x010000) )
=226

//Gの値を出力
console.log( Math.floor( ( hexcolor%0x010000)/0x000100) )
=204

//Bの値を出力
console.log( hexcolor%0x000100 )
=240

// R, G, Bの値を出力
console.log( Math.floor( hexcolor/0x010000), Math.floor( ( hexcolor%0x010000)/0x000100), ( hexcolor%0x000100) )
=226, 204, 240

まとめ

JSでは16進数を文字列とし二桁ずつ取り出して10進数に変換する方法もありますが、
今回は計算によって割り出してみました。

計算で行うことによってJavascript以外のプログラムにも流用しやすいのかもしれません。パズルのようで意外とおもしろかったです。

うまく説明するのは難しいのですが、理解のきっかけにしてもらえたら嬉しいです。