HEX→RGB変換

HEXカラーコードをRGBの値に変換します。

例：#f80、#ff8800、#ff880080
240赤
138緑
60青
1アルファ

ブラウザ内で動作します。入力した内容はどこにも送信されません。

HEXをRGBに変換する方法

  1. #の有無にかかわらず、HEXコードを入力または貼り付けます。
  2. 入力するとRGB、RGBA、HSLの値がリアルタイムで更新されます。
  3. 必要な値の横にあるコピーボタンをクリックします。

HEX→RGB変換例

HEXRGB備考
#FF8800rgb(255, 136, 0)標準的な6桁のHEX
#F80rgb(255, 136, 0)3桁の省略形、同じ色
#000000rgb(0, 0, 0)黒
#FFFFFFrgb(255, 255, 255)白
#FF880080rgba(255, 136, 0, 0.5)アルファ付きの8桁HEX

省略形とフル表記は、各桁を単純に繰り返しているだけなので、必ず全く同じ色になります。

HEXコードの由来

FigmaやPhotoshopなどのデザインツール、そしてすべてのブラウザのDevToolsは、色を正確にテキストで表す最短の方法であるため、標準でHEX表記を採用しています。

HEXはrgb()やhsl()というCSS関数が登場するはるか以前、1990年代のHTML最初期のカラー属性の時代からWebで使われてきました。その歴史があるため、今も多くのスタイルガイドがHEXを筆頭に挙げています。

HEXコードでよくある間違い

  • HEXコードは3桁、4桁、6桁、8桁のいずれかが必要です。5桁や7桁は無効で変換できません。
  • 一部の古いWindows APIはRGBではなくBGRの順で色を保存するため、古いコードからコピーした値は赤と青が入れ替わっていることがあります。
  • 8桁コードの最後の2桁は4つ目の色チャンネルではなくアルファ値なので、#FF880000は暗いオレンジではなく完全に透明になります。

HEX→RGBのFAQ

HEXをRGBに手計算で変換するには？

コードを2桁ずつ3組に分け、それぞれを16進数から10進数に変換します。#F08A3Cの場合、F0 = 240、8A = 138、3C = 60となり、rgb(240, 138, 60)になります。

3桁のHEXコードとは何ですか？

各桁を2回繰り返す省略記法です。#F80は#FF8800と同じ色で、#000は黒になります。

8桁のHEXコードの最後の2桁は何を意味しますか？

アルファ値、つまり不透明度です。#FF880080は約50%の不透明度のオレンジで、rgba(255, 136, 0, 0.5)と同じです。

コードの先頭に#は必要ですか？

いいえ。#の有無、大文字・小文字を問わず変換できます。

HEXコードが無効と表示されるのはなぜですか？

HEXコードは0-9とA-Fを使った3桁、4桁、6桁、8桁のいずれかである必要があります。5桁や7桁などの長さ、またはその範囲外の文字は変換できません。

var(--brand)のようなCSS変数を貼り付けられますか？

いいえ、実際の色の値を貼り付けてください。ブラウザのDevToolsの「計算済みスタイル」パネルなどで、変数が実際にどの値になるかを先に確認してください。

最も短いHEXコードは何桁ですか？

3桁です。黒なら#000、白なら#fffのようになります。各桁は6桁のフル表記での繰り返しペアを表します。

関連ツール