Hex カラーを RGB に変換
#FF5733 や短縮の #F53 などの Hex を貼り付けてください。透明度付きの #RRGGBBAA にも対応し、ブラウザ上ですぐスウォッチと rgb()/rgba() を表示します。
例
行をクリックすると入力に反映して変換します
| 入力 | 出力 | — |
|---|---|---|
デザインでは Hex が主流でも、CSS や一部 UI キットではチャンネル指定の RGB が欲しいことがあります。このページはすぐプレビューでき、短縮形と 8 桁アルファにも対応します。
「Hex を十進に直す」数値変換とは別物です。色以外の基数変換は データ変換 へ。
Hex を RGB にするには
- #FF5733、短縮の #F53、透明度付き #RRGGBBAA などを貼り付け
- カラーピッカーで選んでもOK。必要なら透明度も調整
- rgb()/rgba() をコピーし、プレビュー色と一致するか確認
こんなときに向いています
- デザインの Hex を CSS の rgb()/rgba() に落とす
- 3 桁の短縮 Hex を正式なチャンネル値に展開する
- 透明度付き 8 桁 Hex をそのまま扱う
よくある使い方
- Figma の色を CSS 変数へ書き起こす
- 半透明オーバーレイの実チャンネルを確認する
- コントラストチェック とセットで読みやすさを確認する
ちょっとした注意
- 短縮は各桁が倍増します（#F53 → #FF5533）
- 逆方向は RGB を Hex に
- HSL が必要なら Hex を HSL に
よくある質問
- 短縮の #F53 は使えますか？
- 使えます。各桁が倍増され（#F53 → #FF5533）、そのうえで RGB に変換されます。
- アルファ（透明度）はどう扱われますか？
- 8 桁 Hex #RRGGBBAA は、アルファ 0〜1 の rgba() になります。プレビューも半透明を表示します。
- Hex→十進の数値変換と同じですか？
- 違います。色ツールは Hex を RGB チャンネルとして扱います。任意の数値の基数変換にはデータ変換ツールを使ってください。