HEX RGB 変換ツール
HEX、RGB、HSLカラーコードを瞬時に変換します。
カラープレビュー
HEX
RGB
HSL
HEX・RGB・HSLとは？
HEX・RGB・HSLはWeb開発で色を表現する3つの方式です。HEXは6桁の16進数コード、RGBは赤・緑・青の値（0〜255）、HSLは色相（0〜360°）・彩度・明度（0〜100%）で色を表します。
HEX vs RGB vs HSL — 使い分け
HEX
最もコンパクトな形式。CSSの静的カラーやデザインツールで広く使われます。例: #ff5733
RGB
rgba()で透明度を制御したい場合に便利です。画面の色チャンネルに直接対応します。例: rgb(255, 87, 51)
HSL
人間が直感的に理解しやすい形式。明度や彩度をプログラムで調整しやすく、テーマ設計に最適です。例: hsl(11, 100%, 60%)
カラーコードの変換方法
カラーピッカーをクリックするか、HEX・RGB・HSLの入力欄に直接値を入力してください。他のフォーマットが即座に更新されます。コピーボタンで各フォーマットをクリップボードにコピーできます。
よくある質問
HEXカラーコードとは何ですか？
HEXカラーコードは#ff5733のような6桁の16進数で、赤・緑・青の各成分を00〜ffの範囲で表します。
HEXをRGBに変換するには？
6桁のHEXを2桁ずつ3組に分け、それぞれを16進数から10進数に変換します。例: #ff5733 → R:255, G:87, B:51
HSLカラーとは何ですか？
HSLは色相（Hue, 0〜360°）、彩度（Saturation, 0〜100%）、明度（Lightness, 0〜100%）を表します。人間が色を直感的に調整しやすいフォーマットです。
CSSではどのカラー形式を使うべきですか？
3つすべてCSS有効です。静的な色はHEX、テーマシステムはHSL、透明度が必要な場合はrgba()が一般的です。
3桁のHEXコードも変換できますか？
はい。#f53のような3桁HEXは#ff5533の短縮形です。各桁を2回繰り返して6桁に展開します。
グレー系でHSLの色相が0になるのはなぜですか？
グレーは彩度が0%のため色相が意味を持たず、デフォルトの0が表示されます。これは正常な動作です。
変換結果は正確ですか？
はい。標準的な数式を使用しており、有効な色入力に対して正確な結果を返します。