HEXをRGBに変換
「HEXからRGBへの変換」は、hexカラーコードを3つの10進チャンネルに分解します。hexの2桁の組がそれぞれ1つのチャンネルで、16進で書かれています。#FF8800ならrgb(255 136 0)です。4桁・8桁のhexには4番目の組としてアルファが付き、rgba()では0–1の値で出てきます。変換はどちらの向きも正確です。色が失われることはありません。どちらの表記も同じ3バイトを記述しているからです。
左側に色を入力してください。# の有無を問わない16進数の値、 rgb(), hsl(), oklch() および CSS の色名に対応しています。
HEXをRGBに変換はどう動きますか？
hexカラーコードは、16進で書かれた3バイトです。各バイトは1つのチャンネル——赤、緑、青——で、0から255の値を持ちます。これはちょうどhex2桁分です。16²が256だからです。変換の全体は、2文字を読んで16進として解釈するだけです。
hexの1桁の読み方
桁は0–9、続いてa–fで、aは10、fは15です。左の桁が16の個数、右の桁が余りを表すので、88は8×16 + 8 = 136、ffは15×16 + 15 = 255になります。大文字小文字は問いません。#FF8800と#ff8800は同じ色で、CSSはかつて一度も両者を区別したことがありません。
3桁hex。丸めではない理由
#f80は#ff8800の省略形です。各桁をゼロで埋めるのではなく、2倍します。ここが重要です。2倍ならfはff = 255、つまり真の最大値に対応します。ゼロ埋めならf0 = 240となり、省略形の色はすべてわずかに暗くなっていたでしょう。この省略形で表せるのは、チャンネルの組が偶然2倍の形になっている4,096色だけです。だから#fffのような手早い値では生き残り、設計されたものからは消えるのです。
4番目の組はアルファ
CSS Color 4で4桁と8桁のhexが加わりました。最後の組は不透明度で、同じ0–255スケールです。#ff880080はrgb(255 136 0 / 0.5)になります。0x80は128で、128/255は0.502だからです。このわずかな不正確さは本質的なものです。CSSのアルファは分数で、hexはその256段階しか格納できないため、rgba()で0.5と書いた値は、hexを経由すると0.502で戻ってきます。
どちらの構文を書くか
現代のCSSはチャンネルを空白で区切り、アルファをスラッシュで書きます——rgb(255 136 0 / 50%)です。rgb()がアルファを直接受け付けるようになったため、rgba()は互換性のために残されたレガシーな別名です。カンマ区切りの形式は今もすべてのブラウザで動作し、この先も動きます。非推奨にはならないので、スタイルシートを書き直す理由はありません。このページでは両方の形式を出力するので、コードベースで既に使っているほうを貼り付けてください。
hexカラーコード
#ff8800
RGBチャンネル
rgb(255 136 0) ff → 255 (15 × 16 + 15) 88 → 136 (8 × 16 + 8) 00 → 0 (0 × 16 + 0)
HEXをRGBに変換が対応するオプションとエッジケースは？
| パラメータ | 型 | デフォルト | 動作とエッジケース |
|---|---|---|---|
| #rgb | 3桁 | 省略形 | 各桁が2倍になります: #f80 は #ff8800 と同等です。この形式で表現できるのは4,096色のみです。 |
| #rgba | 4桁 | 省略形 | 同じく2倍になりますが、4桁目がアルファチャンネルです。#f808 は #ff880088 と同等です。 |
| #rrggbb | 6桁 | 標準 | 各チャンネルに1バイト、0-255の値。約1670万色を表現できます。 |
| #rrggbbaa | 8桁 | CSS Color 4 | 4バイト目がアルファ値です。現在のブラウザではすべてサポートされており、非常に古いブラウザでは不透明としてフォールバックされます（無視されるのではありません）。 |
| 大文字/小文字 | — | 無視 | #FF8800 と #ff8800 は同じです。一般的には小文字が慣例として使われます。 |
| rgb(r g b) | 現行 | スペース区切り | 現在の構文です。アルファ値はスラッシュの後に続きます: rgb(255 136 0 / 50%)。 |
| rgba(r,g,b,a) | 旧式 | カンマ区切り | どこでも有効で非推奨ではありません。現在、rgb() と rgba() は同じ関数です。 |
| パーセント | 0–100% | 許可 | rgb(100% 53.3% 0%) は同じ色を表します。パーセント値は255ではなく100を基準として解釈されます。 |
よくある質問
手作業でhexをRGBに変換するには？
6桁を3組に分け、各組を16進として読みます。左の桁が16の個数、右が余りです。88なら8×16 + 8 = 136です。英字は数を続けます。aは10、bは11、fまで行けば15です。したがってffは15×16 + 15 = 255です。3組が3つの数になり、変換はそれで終わりです。
#f80と#ff8800は同じ色ですか？
同じです。3桁hexは各桁をゼロ埋めではなく2倍するので、#f80は#ff8800に展開されます。この2倍のおかげで#fffが純白を意味できます。ゼロ埋めなら#fffは#f0f0f0になり、省略形はどれもわずかに暗い色になっていたはずです。
8桁hexでアルファはどう扱われますか？
最後の2桁は不透明度で、カラーチャンネルと同じ0–255スケールです。#ff880080なら0x80 = 128で、128/255 = 0.502のアルファになります。hexは256段階しかないため、rgba()で0.5と書いたアルファは、hexを経由すると0.502で戻ってきます。この違いは画面では見えませんが、文字列を比較すれば現れます。
rgb()とrgba()、どちらを使うべきですか？
rgb()です。今はアルファを受け付けるため、rgba()は同じ関数のレガシーな別名になっています。どちらも非推奨ではなく、どちらもあらゆる環境で動くため、既存コードを書き直す理由はありません。新しいコードでは、rgb(255 136 0 / 50%)が現在の構文です。
同じhexなのにデザインツールのRGBの数値が違うのはなぜですか？
ほとんどの場合、カラープロファイルのせいです。hexはカラースペース内の値であり、ドキュメントがsRGBではなくDisplay P3やAdobe RGBとしてタグ付けされていると、同じ3バイトが別の色を表します。ツールは生の数値の代わりに、sRGB相当の値を表示しているかもしれません。このページはhexをsRGBとして扱います。CSSでブラウザがそう扱うのと同じです。
RGBの値をCSSのカスタムプロパティで使うには？
rgb()を外した3つのチャンネルを保存します——--brand: 240 84 30;の形です。そして単色にはcolor: rgb(var(--brand))、その半透明のtintにはbackground: rgb(var(--brand) / 0.12)と書きます。1つの変数が色とそのあらゆる透明度をまかなえるため、デザインシステムは完成した色の文字列ではなくチャンネルを保存するのです。