カラーコード変換
HEX、RGB、HSL形式のカラーコードを相互変換します。カラーピッカーで色を選択することもできます。
プレビュー
クリックしてカラーピッカーを開く
カラーコード
HEX
RGB
R: 29
G: 121
B: 151
HSL
H: 195°
S: 68%
L: 35%
カラーコード変換ツールについて
Web制作やデザイン作業で必要なカラーコードの変換を簡単に行えるツールです。 HEX、RGB、HSLの3つの形式を相互に変換でき、スライダーで直感的に色を調整することもできます。
使い方
- プレビューエリアをクリックしてカラーピッカーから色を選択、またはHEXコードを直接入力
- RGB/HSLのスライダーで色を微調整
- コピーボタンで必要な形式のカラーコードをクリップボードにコピー
各カラーコード形式の特徴
- HEX: #FFFFFFのような16進数表記。CSSで最もよく使われる形式
- RGB: 赤・緑・青の各色を0-255で指定。画像編集ソフトでよく使用
- HSL: 色相・彩度・明度で指定。色の調整が直感的にできる
よくある質問
どちらも同じ色を表現できますが、表記方法が異なります。 HEXは16進数（#FF0000）、RGBは10進数（rgb(255, 0, 0)）で表します。 CSSではどちらの形式も使用でき、変換しても色は変わりません。
HSLは人間の色の認識に近い形式です。色相（H）で色味、彩度（S）で鮮やかさ、 明度（L）で明るさを調整できるため、「同じ色相で明るくしたい」 「彩度を下げて落ち着いた色にしたい」といった調整が直感的に行えます。
現在のバージョンでは透明度の設定には対応していません。 CSSで透明度が必要な場合は、出力されたRGB値を使用して rgba(R, G, B, 0.5)のように記述してください。