このツールについて
HEXカラーをCSSのrgb()形式に変換し、デザインデータやスタイルシートで同じ色を使えます。色のプレビューと赤・緑・青の値を確認してコピーしてください。無効な値には修正を促すメッセージが表示されます。
使い方
- #FF5733、#09fなど、3桁または6桁のHEXを入力します。#は省略できます。
- 自動更新される結果を確認するか、「変換」をクリックします。
- 色のプレビューとRGBの各成分を確認し、「RGBをコピー」をクリックします。
- 「クリア」で入力を削除するか、「サンプルを読み込む」で例の色に戻します。
使用例
- #FF5733 → rgb(255, 87, 51)。正規化したHEXは#ff5733です。
- #09f → rgb(0, 153, 255)。正規化したHEXは#0099ffです。
- #fff → rgb(255, 255, 255)、#000000 → rgb(0, 0, 0)。
計算の仕組み
6桁のHEXでは、2桁ずつが1つの色成分を表します。それぞれを16進数から0～255の整数に変換します。3桁の場合は各桁を2回繰り返して展開するため、#09fは#0099ffになります。このページでは不透明なRGBのHEXだけを受け付け、アルファ値を含む4桁・8桁形式には対応していません。
主な用途
- デザインの色指定をRGB形式のスタイルに変換する。
- 短縮HEXと6桁のHEXが同じ色か確認する。
- 赤・緑・青それぞれの成分を整数で確認する。
プライバシーについて
入力内容と結果はブラウザー内でのみ処理され、アップロードや自動保存はされません。残したい結果はコピーして保存してください。
FAQ
HEXとは何ですか？
RGBの3つの成分を16進数で表したものです。6桁形式では赤・緑・青の順に、各成分を2桁で記述します。
#fffと#ffffffは同じ色ですか？
はい。3桁の短縮表記は各桁を2回繰り返して展開するため、#fffを正規化すると#ffffffになります。
#12345や#gg0000でエラーになるのはなぜですか？
このページでは3桁または6桁の16進数だけを受け付けます。使用できる文字は0～9とa～fで、大文字・小文字のどちらも使えます。
HEXをRGBに変換すると精度は落ちますか？
いいえ。不透明な3桁・6桁のHEXは、整数のRGB成分に正確に変換できます。