[PHP] 16進数カラーコードをRGBに変換する方法

CSS, PHP10進数, 16進数

CSSで使用する #000000のような16進数のカラーコードをRGBに変更する方法について考えてみました。

#000000 -> R:0 G:0 B:0

のような感じですね。

16進数とは

十六進法（じゅうろくしんほう、 英: hexadecimal）とは、16を底（てい）とし、底およびその冪を基準にして数を表す方法である。

https://ja.wikipedia.org/wiki/%E5%8D%81%E5%85%AD%E9%80%B2%E6%B3%95

Wikipediaにはこのように書かれていますが、よくわかりませんので深くは考えません。

下記の16個の数字(文字)を使用して表します。

0 1 2 3 4 5 6 7 8 9 A B C D E F

一番小さい数が0、一番大きい数がFになります。

とりあえず、CSSで使用する分にはこれ以上の理解は不要と思いますのでこれで終了。

16進数のカラーコード

#を除いた6つの数字で色を表現しています。

このように一番小さい数字となる#000000は黒、一番大きい数字となる#FFFFFFは白が表示されます。

その他の色はこの範囲内の数字で表現されます。

RGBとは

RGB（またはRGBカラーモデル）とは、色の表現法の一種で、赤 (Red)、緑 (Green)、青 (Blue) の三つの原色を混ぜて幅広い色を再現する加法混合の一種である。RGBは三原色の頭文字である。

https://ja.wikipedia.org/wiki/RGB

とあるように、三原色の配合で色を表現します。

カラーコードをRGBに変換する

変換するといってもどうすればよいか分かりませんが、カラーコードとRGBの関係性を考えると16進数のカラーコードがどのように構成されているかが分かります。

#000000 -> R:0 G:0 B:0

#FFFFFF -> R:255 G:255 B:255

16進数のカラーコードは6つの数字、RGBはR,G,Bとそれぞれ三つの要素で構成されています。

しかし、これではわかりにくいので三原色に変えて試します。

三原色をそれぞれ16進数のカラーコードで表すと以下のようになります。

R – #FF0000

G – #00FF00

B – #0000FF

ということで、それぞれが以下のようにカラーコードの2文字で表現されていることが分かります。

ここでようやく本題。

PHPを利用して16進数のカラーコードをRGBに変換するには、以下の手順になります。

  1. 16進数カラーコードの数字を2桁ずつに分解
  2. 分解した3組の数字を10進数に変換

16進数カラーコードの数字を2桁ずつに分解

文字列を特定の文字数で分割するにはstr_splitを使用します。

str_split — 文字列を配列に変換する

str_split(strings, int)

文字列(strings)を指定された文字数(int)で分割し配列で返します。

今回はカラーコードを2文字ずつに分割するので以下のようになります。

$strings = "FF0000";
$v = str_split($strings,2);
var_dump($v);
//array(3) { [0]=> string(2) "FF" [1]=> string(2) "00" [2]=> string(2) "00" }

FF 00 00 に分割されました。

次はそれぞれの数字を16進数から10進数に変換します。

分解した3組の数字を10進数に変換

16進数から10進数に変換を行う場合、hexdecを使用します。

hexdec — 16 進数を 10 進数に変換する

hexdec(int)

使用方法は非常にシンプル。()内に変換対象の数字を入力するだけです。

$n1 = hexdec($v[0]); 
$n2 = hexdec($v[1]); 
$n3 = hexdec($v[2]); 

echo "R:" .$n1. " G:" .$n2. " B: " .$n3;
//R:255 G:0 B: 0

以上で完成です。

以前に進数の変換について書いた記事があるので参考までに

CSS, PHP10進数, 16進数