16進数カラーコードから RGB への変換
#FF5733 のような16進数カラーコードを RGB 値に変換する方法を解説。6桁の16進数が赤・緑・青チャンネルに対応する仕組みと3桁の省略記法も学べます。
Hexadecimal (Base 16) → RGB (Decimal Triplet)Encoding
詳細な説明
16進数カラーコードは、Web 開発で色を指定する最も一般的な方法です。#FF5733 のような6桁の16進数カラーは、赤、緑、青のチャンネルそれぞれに8ビットの値をエンコードしています。
ステップごとの例 --- #FF5733 を RGB に変換:
- 3つの2桁ペアに分割:
FF,57,33 - 各ペアを16進数から10進数に変換:
- Red:
FF = 15×16 + 15 = 255 - Green:
57 = 5×16 + 7 = 87 - Blue:
33 = 3×16 + 3 = 51
- Red:
- 結果:
rgb(255, 87, 51)
3桁の省略記法:
CSS は各桁を2つ重ねる3桁の省略記法に対応しています: #F53 は #FF5533 に展開されます。つまり:
#FFF=#FFFFFF=rgb(255, 255, 255)（白）#000=#000000=rgb(0, 0, 0)（黒）#F00=#FF0000=rgb(255, 0, 0)（赤）
アルファチャンネル付き8桁の16進数:
最新の CSS は #RRGGBBAA 形式にも対応しており、最後の2桁が不透明度を表します: #FF573380 はその色を50%の不透明度で表示します（80₁₆ = 128₁₀、128/255 = 0.502）。
背景にある数学:
各色チャンネルは1バイト（8ビット）として格納され、0 から 255 の値を取ります。2桁の16進数は1バイトを完璧に表現します: 00 から FF。色空間全体には 256³ = 16,777,216 通りの色が含まれます。16進数が好まれる表記法であるのは、各バイトをちょうど2文字でコンパクトに表現し、個々の色チャンネルを読み取ったり操作したりしやすいためです。
ユースケース
Web デザイナーは、ブランドスタイルガイドの16進数カラーコードを RGB 値に変換し、色に透明度を追加するための CSS rgba() 関数で使用します。