このツールについて
HEXカラーをCSSのrgb()形式に変換するツールです。デザインデータ、スタイルシート、開発時の設定で同じ色を使う際に役立ちます。入力を厳密に検証し、正しく解析できた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が同じ色か確認する。
- 赤・緑・青それぞれの成分を整数で確認する。
プライバシーについて
入力、計算、CSSの生成、プレビューはすべてお使いのブラウザー内で完結します。入力内容をアップロードせず、バックエンド、データベース、オンラインAPI、外部CDNも使用しません。入力の自動保存も行いません。
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成分に正確に変換できます。