カラーコード変換
色をHEX・RGB・HSLで相互に変換します。カラーピッカーで選ぶか、コードを直接入力すると、ほかの形式がライブで更新されます。ブラウザだけで動くので、選んだ色は外に出ません。
例（クリックで試す）
上の入力欄は #hex / rgb() / hsl() のどれを貼っても形式を自動判定します。どの欄を編集しても、ほかの形式が自動で同期します。HEXは #RGB / #RRGGBB に対応。
カラーコード変換の使い方
カラーピッカーで色を選ぶか、HEX・RGB・HSLのいずれかの欄にコードを入力すると、残りの形式がその場で更新されます。各出力欄のコピーボタンでコードをクリップボードに保存できます。
- カラーピッカー：ブラウザ標準のピッカーで色を選びます。選んだ色がプレビューと各コードに反映されます。
- HEX：
#RGB（3桁の短縮形）と#RRGGBB（6桁）の両方を受け付けます。「#」は省略しても構いません。 - RGB：
rgb(234, 99, 121)の形式。各チャンネルは0〜255です。234, 99, 121のように数値だけの入力も読み取ります。 - HSL：
hsl(351, 76%, 65%)の形式。色相は0〜360、彩度・明度は0〜100%です。
例：HEXをコピペして3形式を一度に得る
上の「色コード」欄は形式を自動判定します。たとえばデザインカンプの #ea6379 を貼り付けると、ほかの欄が次のように同期します。
- 入力：
#ea6379 - → RGB：
rgb(234, 99, 121) - → HSL：
hsl(350, 76%, 65%)
逆に rgb(132, 207, 160) や hsl(45, 100%, 51%) をそのまま貼っても、形式を判定してHEXなどに変換します。あとは使いたい形式の「コピー」ボタンを押すだけです。
こんな場面で便利です
- デザインカンプのHEXを、CSSのrgb()やhsl()に書き換えるとき
- ブランドカラーのコードを、用途ごとの形式でメモ・共有するとき
- HSLで明度や彩度だけを少し調整して、近い色を探すとき
- カラーピッカーで選んだ色のコードをすぐにコピーしたいとき
よくある質問
入力した色の情報はサーバーに送信されますか？
いいえ。HEX・RGB・HSLの変換処理はすべてお使いのブラウザ内で完結し、選んだ色やコードが外部に送信・保存されることはありません。安心してご利用いただけます。
HEXはどんな形式で入力できますか？
先頭の「#」はあってもなくても構いません。3桁の短縮形（#RGB、例: #f80）と6桁（#RRGGBB、例: #ff8800）の両方に対応しています。無効な文字が含まれている場合はやさしくお知らせします。
HSLの数値の範囲を教えてください。
色相（H）は0〜360、彩度（S）と明度（L）は0〜100%で表します。RGBは各チャンネル0〜255です。どの形式の欄を編集しても、ほかの形式が自動で同期します。