HEX コードは 3つの8ビット値を6桁の16進数に詰め込んだもの。HEX を RGB に変換するにはその6桁を2桁ずつに分け、各ペアを 0〜255 の10進数として読むだけで、CSS や Figma、画像編集ソフトが期待する値になる。
HEX から RGB への変換のしくみ
- 先頭の # を外し、もしコードが3桁なら各桁を重ねる：#f53 は #ff5533 になる。
- 6桁を RR、GG、BB の3つのペアに分ける。
- 各ペアを16進数として読み、10進数に変換する：FF は 255、57 は 87、33 は 51 になる。
- 3つの結果を rgb(R, G, B) の形で書く。
実際の例
HEX #FF5733=RGB rgb(255, 87, 51)
この変換は厳密だよ。HEX と RGB は同じ sRGB 値を別の表記で示しているだけだから、どちらの方向でも丸めや情報の損失は発生しない。
HEX と RGB の解説
HEX とは？
HEX コードは先頭の # の後に続く6桁の16進数で、色の赤・緑・青チャネルを格納する。各2桁が1チャネルを表し、00（なし）からFF（最大）までで、RGB と同じ約1670万色を短い表記で示せる。HEX は CSS、デザインツール、ブランドガイドラインでのデフォルトだ。
- 構文:
- #RRGGBB
- 範囲:
- チャネルごとに 00–FF
- おすすめ用途:
- CSS、デザイン引き渡し、ブランドガイドライン
RGB とは？
RGB は赤・緑・青の3つの光のチャネルで色を表し、それぞれ 0〜255 の値を取る。画面の仕組みをそのまま反映しており、3つすべてが255で白、すべてが0で黒になる。色で計算する必要がある場合は RGB が適切で、rgba() を使えば透明度も追加できる。
- 構文:
- rgb(R, G, B)
- 範囲:
- チャネルごとに 0–255
- おすすめ用途:
- コード、canvas、rgba() を使った透明度
HEX から RGB への参照表
よく使われる CSS の色を HEX から RGB に変換しました。
| 色 | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |