カラーコード変換
HEX・RGB・HSLを相互変換できます。色プレビューやワンクリックコピーにも対応しています。
完全無料ブラウザ完結登録不要安全
ピッカー
HEX
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
このツールについて
- 入力した色データはブラウザ内のみで処理されます。サーバーには送信されません。
- HEX・RGB・HSL の相互変換とカラーピッカーによる色選択に対応しています。
- 初期版では rgba / hsla などの alpha 付き形式や CMYK には対応していません。
関連ツール
使い方
- 1HEX・RGB・HSL のいずれかの入力欄に色の値を入力します（例: #3b82f6、または R:59 G:130 B:246）。
- 2またはカラーピッカーをクリックして色を選択します。
- 3入力した値に応じて、他の形式の値と色プレビューが自動的に更新されます。
- 4必要な形式の「コピー」ボタンをクリックすると、その形式の値をクリップボードにコピーできます。
- 5コピーした値を CSS ファイルやデザインツールに貼り付けてご利用ください。
よくある利用シーン
- デザインツールで選んだ色を CSS 用に HEX / RGB / HSL へ変換したいとき
- HSL で色相・彩度・明度を調整しながら、最終的な HEX 値を取得したいとき
- カラーピッカーで色を確認しながら、各形式の値をすぐにコピーしたいとき
- チームやドキュメントで共有する色コードをすばやく揃えたいとき
よくある質問（FAQ）
カラーコード変換は無料で使えますか？
はい、完全無料です。ユーザー登録やインストールも不要です。
入力した色データはサーバーに送信されますか？
いいえ。すべての処理はブラウザ内で完結します。入力した色の値が外部に送信されることはありません。
どの色形式に対応していますか？
HEX（#RRGGBB）・RGB（0〜255）・HSL（H: 0〜360、S/L: 0〜100）の3形式に対応しています。カラーピッカーによる色選択も利用できます。
#RGB の短縮形式にも対応していますか？
はい。#rgb 形式（例: #f00）を入力すると #rrggbb 形式（例: #ff0000）に自動展開して変換します。
RGB と HSL の違いは何ですか？
RGB は赤・緑・青の光の三原色で色を表現します（各 0〜255）。HSL は色相（H: 0〜360°）・彩度（S: 0〜100%）・明度（L: 0〜100%）で表現します。HSL は人間の感覚に近く、色味や明暗を調整しやすい特徴があります。
カラーピッカーから選んだ色も変換できますか？
はい。カラーピッカーで色を選択すると、HEX・RGB・HSL の各フィールドと色プレビューが即座に更新されます。
rgba や hsla などの alpha 付き形式には対応していますか？
初期版では対応していません。HEX・RGB・HSL の基本3形式のみサポートしています。
スマートフォンでも使えますか？
はい、スマートフォンのブラウザからもご利用いただけます。アプリのインストールは不要です。