カラーコード変換
変換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 でも使用できます。
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. 入力した色はどこかに送信されますか？
A. 送信されません。すべての変換処理はブラウザ内で完結しており、入力した色コードが外部のサーバーに送られることはありません。安心してお使いください。
活用シーン
WebデザインでのCSS記述
FigmaやAdobe XDなどのデザインツールで取得した色をCSSに使える形式に変換したいとき。HEX・RGB・HSLを素早く切り替えられます。
デザイナーとエンジニアの連携
デザインデータとコード間でカラーコードの形式が合わないときに素早く変換したいとき。認識のズレを防げます。
ブランドカラーの管理
決まったブランドカラーをHEX・RGB・HSLの複数形式で把握しておきたいとき。あらゆる場面で正確な色を使い回せます。
Figmaなどのデザインデータをコードに変換
FigmaやAdobe XDが出力するHEXカラーをRGBやHSLに変換してコードで使いたいとき。デザインツールとコードの間でカラー形式が異なる場合に即座に変換できます。
色の調整・確認作業
カラーピッカーで直感的に色を選んで、HEXやRGBのコードを調べたいとき。コードがわからなくてもビジュアルで色を選べるため、デザイン経験が少ない方にも使いやすいです。