16進トリプレット(HEX)ウェブカラーRGBカラー変換

今回カラーについてのお話です。

ウェブで作成するときのウェブカラーは16進トリプレット(HEX)という16進数の値で表現します。
例えば#FF0000(赤)とか#0000FF(青)、#FFFFFF(白)などですね。
因みにウェブカラーのショートコードは例えば#FF00FFのように2ケタが同じ場合だと#F0Fと省略した記述ができます。

それからフォトショップなどで作成している写真などの色は光の三原色RGB(Red[赤]、Green[緑]、Blue[青])で形成されています。テレビやモニターで表現されている色はRGBですね。


スポンサーリンク


ウェブカラーはRGB(0~255までの値)でも表すことができるんです。
#を除いた最初の2つの数字がRed。
その次の2つの数字がGreen。
最後の2つがBlue。
それでその2ケタの英数字が16進数で表現されているので10進数に変換すればできるのです。
因みに以下が16進数256個(00~FFの数値)
00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 2A, 2B, 2C, 2D, 2E, 2F, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 3A, 3B, 3C, 3D, 3E, 3F, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 4A, 4B, 4C, 4D, 4E, 4F, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 5A, 5B, 5C, 5D, 5E, 5F, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 6A, 6B, 6C, 6D, 6E, 6F, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 7A, 7B, 7C, 7D, 7E, 7F, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 8A, 8B, 8C, 8D, 8E, 8F, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 9A, 9B, 9C, 9D, 9E, 9F, A0, A1, A2, A3, A4, A5, A6, A7, A8, A9, AA, AB, AC, AD, AE, AF, B0, B1, B2, B3, B4, B5, B6, B7, B8, B9, BA, BB, BC, BD, BE, BF, C0, C1, C2, C3, C4, C5, C6, C7, C8, C9, CA, CB, CC, CD, CE, CF, D0, D1, D2, D3, D4, D5, D6, D7, D8, D9, DA, DB, DC, DD, DE, DF, E0, E1, E2, E3, E4, E5, E6, E7, E8, E9, EA, EB, EC, ED, EE, EF, F0, F1, F2, F3, F4, F5, F6, F7, F8, F9, FA, FB, FC, FD, FE, FF

256x256x256 = 16,777,216通りの色があります!

計算式方法

例えば
R 12
G 123
B 234

だとしましょう。

x ÷ 16 = A あまり B
という式になります。

あまり計算機はこちらで確認できます!

Rは12ですね。10が「0A」なのでこれは計算しなくても値を見れば12が「0C」なので
0Cです。

次に123

123 ÷ 16 = 7 あまり 11
10以上の数字をアルファベットに置き換えます。
10=A、11=B、12=C、13=D、14=E 15=F
ですので「7B」ですね。

234 ÷ 16 = 14 あまり 10
となると「EA」になりますね。

すべて合わせると「#0C7BEA」となります。

ウェブカラーからRGBは逆にすれば計算できますよね。
#0C7BEAを見てみると、

赤:0CはCが12なので12
緑:数字の7かける16ですね。右側のBは11なのでたす11で123
青:Eは14なので14かける16。Aは10なのでたす10で234ですね。

となりますね。

これPHPで作るとめちゃ簡単!だって関数があるんですから。
hexdec(16進数の文字列)で10進数
dechex(10進数値)で16進数がでます。

自分でも確認用に作りましたので色変換で役立てれば幸いです。

デモサイト

Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です