RGB は 0〜255 の10進チャネルを3つ持つ。HEX に変換すると各チャネルを2桁の16進数に変え、ブラウザやデザインツール、スタイルガイドが理解する1つのコンパクトなトークンに収められる。
RGB から HEX への変換のしくみ
- 赤チャネルを16で割る。商が1つ目の桁、余りが2つ目の桁になる。
- 10〜15の数字はA〜Fの文字で書く — 255はFFになる。
- 緑と青についても同じことを繰り返す。1桁の数字は先頭に0を付けて補う：5は05になる。
- 3組のペアをつなげて先頭に#を付ける。
実際の例
RGB rgb(79, 70, 229)=HEX #4F46E5
チャネルが0〜255の整数であれば正確。rgb(79.5, 70, 229) のような小数は、HEXが中間値を表せないため最初に四捨五入して整数にされる。
RGB と HEX の解説
RGB とは？
RGB は赤・緑・青の3つの光のチャネルで色を表し、それぞれ 0〜255 の値を取る。画面の仕組みをそのまま反映しており、3つすべてが255で白、すべてが0で黒になる。色で計算する必要がある場合は RGB が適切で、rgba() を使えば透明度も追加できる。
- 構文:
- rgb(R, G, B)
- 範囲:
- チャネルごとに 0–255
- おすすめ用途:
- コード、canvas、rgba() を使った透明度
HEX とは？
HEX コードは先頭の # の後に続く6桁の16進数で、色の赤・緑・青チャネルを格納する。各2桁が1チャネルを表し、00（なし）からFF（最大）までで、RGB と同じ約1670万色を短い表記で示せる。HEX は CSS、デザインツール、ブランドガイドラインでのデフォルトだ。
- 構文:
- #RRGGBB
- 範囲:
- チャネルごとに 00–FF
- おすすめ用途:
- CSS、デザイン引き渡し、ブランドガイドライン
RGB から HEX への参照表
よく使われる CSS の色を RGB から HEX に変換しました。
| 色 | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |