HEX・RGB・HSL のカラーコードをリアルタイムで相互変換。カラーピッカーで視覚的に色を選択できます。
クリックして色を選択
使い方
- 上の色のプレビューエリア（スウォッチ）をクリックするとカラーピッカーが開きます。
- ピッカーで選んだ色が HEX・RGB・HSL の 3 形式でリアルタイムに表示されます。
- 各入力欄に直接カラーコードを入力しても、他の形式が即時更新されます。無効な値はエラー表示されます。
- 各行右端の「コピー」ボタンでその形式の値をクリップボードにコピーできます。
カラーコードについて
HEX（16進数）は #RRGGBB の形式で、赤・緑・青の各成分を 00〜FF の 16 進数 2 桁で表します。CSS や HTML で広く使われる最も一般的な形式です。
RGBは rgb(R, G, B) の形式で、赤・緑・青の各成分を 0〜255 の整数で表します。プログラミングや画像編集ソフトでよく使われます。
HSLは hsl(H, S%, L%) の形式で、色相（Hue）・彩度（Saturation）・明度（Lightness）で色を表します。人間の直感に近い指定方法で、CSS でも使用できます。
HEX と RGB は同じものを別の書き方で表しているだけです。たとえば #0891b2 は 08 / 91 / b2 の3つに区切れます。16進数の 08 は10進数で 8、91 は 145、b2 は 178 なので、そのまま rgb(8, 145, 178) になります。桁数が固定されているのは、各成分が 0〜255 の256段階＝16進数2桁ちょうどで表せるためです。
HSL だけは考え方が違います。色相・彩度・明度という人が色を捉えるときの感覚に近い軸で表すため、「この色の少し暗いバージョン」を作りたいときに便利です。色相と彩度をそのままにして明度（L）だけ 10% 下げれば、色味を保ったまま暗い色が得られます。ホバー時の色や無効状態の色を、目分量ではなく規則的に決められるのが利点です。
ただし HSL への変換には丸め誤差があります。このツールを含め、一般的な HSL 表記は数値を整数に丸めるため、RGB → HSL → RGB と往復すると元の値に戻らないことがあります。実際、#0891b2 は hsl(192, 91%, 36%) になりますが、これを RGB に戻すと rgb(8, 142, 175) となり、緑と青が少しずれます。見た目でわかるほどの差ではありませんが、色の正解は HEX か RGB で管理し、HSL は調整のための一時的な表現として使うのが安全です。
WebやアプリのUIを作るとき、デザインツール・コードエディタ・ブラウザなど、ツールによってカラーの表現形式が異なります。このツールを使えばHEX・RGB・HSLを即座に相互変換でき、コピーボタンでそのままCSSに貼り付けることができます。カラーピッカーから直感的に色を選ぶこともできます。
よくある質問
Q. どの形式間で変換できますか？
A. HEX・RGB・HSLの3形式を相互に変換できます。どの入力欄に値を入力しても、他の2形式が即時更新されます。
Q. カラーピッカーから色を選べますか？
A. はい。色のプレビューエリア（スウォッチ）をクリックするとカラーピッカーが開きます。選んだ色がHEX・RGB・HSLの3形式でリアルタイムに表示されます。
Q. CSSにそのまま貼り付けられますか？
A. はい。HEX（例：#1a2b3c）・RGB（例：rgb(26, 43, 60)）・HSL（例：hsl(210, 40%, 17%)）はすべてCSS・HTMLで直接使用できる形式です。各行のコピーボタンでワンクリックでコピーできます。
Q. 透明度（アルファ値）には対応していますか？
A. 現在は非対応です。RGBAやHSLAのようなアルファ値を含む形式は扱いません。
Q. #FFF のような3桁のHEXは入力できますか？
A. 3桁のHEX（例：#FFF）は、各桁を2回繰り返した6桁（例：#FFFFFF）として解釈して変換します。
Q. HEXとRGBはどちらを使えばいいですか？
A. どちらもCSSで使えますが、HEXは記述が短くデザイン現場でよく使われます。RGBは値を数値で扱いやすく、透明度（RGBA）を加えたい場合の基準にもなります。HSLは明るさや鮮やかさを調整したいとき直感的に扱えます。用途に合わせて使い分けてください。
Q. HSLに変換して戻したら値が変わりました
A. 丸め誤差によるものです。HSL は色相・彩度・明度を整数で表すため、RGB のすべての組み合わせをぴったり表せません。たとえば #0891b2 は hsl(192, 91%, 36%) になり、これを戻すと rgb(8, 142, 175) と数値が少しずれます。目で見て違いがわかる差ではありませんが、正確さが必要なブランドカラーなどはHEX か RGB を基準として管理し、HSL は調整用と考えてください。
Q. HSL の色相（H）の値はどの色に対応しますか？
A. 0〜360 の角度で色相環を1周します。おおよそ 0 が赤、60 が黄、120 が緑、180 がシアン、240 が青、300 がマゼンタです。0 と 360 は同じ赤を指します。彩度（S）を 0% にすると色相の値にかかわらず灰色になります。
Q. red や skyblue のような色名を入力できますか？
A. 色名の入力には対応していません。HEX・RGB・HSL のいずれかの形式で入力してください。また rgb(0 0 0 / 50%) のようなスラッシュを使う新しい CSS の記法にも対応していないため、rgb(0, 0, 0) の形で入力してください。
Q. 入力した色はどこかに送信されますか？
A. 送信されません。すべての変換処理はブラウザ内で完結しており、入力した色コードが外部のサーバーに送られることはありません。安心してお使いください。
活用シーン
WebデザインでのCSS記述
FigmaやAdobe XDなどのデザインツールで取得した色をCSSに使える形式に変換したいとき。HEX・RGB・HSLを素早く切り替えられます。
デザイナーとエンジニアの連携
デザインデータとコード間でカラーコードの形式が合わないときに素早く変換したいとき。認識のズレを防げます。
ブランドカラーの管理
決まったブランドカラーをHEX・RGB・HSLの複数形式で把握しておきたいとき。あらゆる場面で正確な色を使い回せます。
Figmaなどのデザインデータをコードに変換
FigmaやAdobe XDが出力するHEXカラーをRGBやHSLに変換してコードで使いたいとき。デザインツールとコードの間でカラー形式が異なる場合に即座に変換できます。
色の調整・確認作業
カラーピッカーで直感的に色を選んで、HEXやRGBのコードを調べたいとき。コードがわからなくてもビジュアルで色を選べるため、デザイン経験が少ない方にも使いやすいです。
ホバー色・無効状態の色を決める
基準色から派生した色を規則的に作りたいとき。HEXをHSLに変換し、色相と彩度はそのままで明度（L）だけ上下させれば、色味の揃った濃淡が作れます。決めた値をHEXに戻してCSSに書けば、目分量で選ぶより統一感が出ます。
既存サイトの配色に合わせる
ブラウザの開発者ツールで拾った色を別の形式で使いたいとき。開発者ツールはRGB形式で表示することが多いため、HEXに変換してデザインツールへ渡す、といった橋渡しに使えます。