RGB→HEX変換
RGBの値をHEXカラーコードに変換します。
ブラウザ内で動作します。入力した内容はどこにも送信されません。
- rgb()やrgba()を貼り付け
- アルファ付き8桁HEX
- 入力するたびに更新
RGBをHEXに変換する方法
- rgb()やrgba()の値を貼り付けるか、各チャンネルを入力します。
- アルファを1未満に設定すると8桁のHEXコードも取得できます。
- HEXコードをコピーします。
RGB→HEX変換例
| RGB | HEX | 備考 |
|---|---|---|
| rgb(255, 136, 0) | #FF8800 | 標準的な変換 |
| rgb(0, 0, 0) | #000000 | 黒 |
| rgba(255, 136, 0, 0.5) | #FF880080 | アルファ分で2桁追加 |
| 255, 136, 0 | #FF8800 | 数値だけの表記でも変換可能 |
アルファがHEXの桁になる仕組み
アルファに255を掛けて最も近い整数に丸め、コードの末尾に2桁の16進数として追加します。
| アルファ | HEXの末尾 |
|---|---|
| 1（不透明） | 不要 |
| 0.75 | BF |
| 0.5 | 80 |
| 0.25 | 40 |
| 0（透明） | 00 |
8桁HEXが使える場所
- CSSはChrome、Firefox、Safari、Edgeなど現行のすべてのブラウザで#RRGGBBAAに対応しています。
- SVGのfillやstroke属性も、最近のブラウザでは8桁のHEXに対応しています。
- 一部の古い画像編集ソフトやデザインツールは6桁のHEXしか読み取れず、アルファ部分を無視するか拒否します。そうしたケースに備えて不透明な6桁版も控えておきましょう。
RGB→HEXのFAQ
RGBをHEXに手計算で変換するには？
各チャンネルを2桁の16進数で表し、つなげます。rgb(255, 136, 0)はFF、88、00となり、#FF8800になります。
不透明度はHEXでどう表記しますか？
アルファ値に255を掛けて四捨五入し、末尾に2桁の16進数として追加します。アルファ0.5は80になるので、rgba(255, 136, 0, 0.5)は#FF880080です。
どの形式を貼り付けられますか？
rgb(255, 136, 0)、rgba(255, 136, 0, 0.5)、新しい記法のrgb(255 136 0 / 50%)、255, 136, 0のような数値だけの表記に対応しています。HEXコードも使えます。
#ff8800と#FF8800は違いますか？
いいえ、HEXカラーの大文字・小文字は区別されません。スタイルガイドで大文字を使う場合は「大文字」にチェックを入れてください。
orangeのような色名を数値の代わりに入力できますか？
いいえ。この変換ツールは数値のrgb()、rgba()、HEXの値のみを読み取ります。CSSの148種類の色名に対応するには別途変換テーブルが必要になるためです。
パーセンテージを入力するとHEXコードが少し変わるのはなぜですか？
rgb(94% 53% 0%)のようなパーセンテージのチャンネルは、各チャンネル256段階のうち最も近い値に変換されるため、丸めによって一部のチャンネルが1だけずれることがあります。
アルファチャンネルの丸め方はどのブラウザでも同じですか？
はい。255を掛けてから整数に丸めるというこの計算方法は標準的で、どのブラウザでも同じ2桁のHEXになります。このページはブラウザのAPIに依存せず、自分で変換処理を行っているためです。
50%のようなパーセンテージ表記のアルファも変換できますか？
はい。rgba(255, 136, 0, 50%)や新しい記法のrgb(255 136 0 / 50%)のどちらにも対応しており、従来の0〜1の小数表記も使えます。