カラー変換ツール
HEX / RGB / HSL を相互に変換
クリックしてカラーピッカーを開く
#
hsl(243, 75%, 59%)
カラー変換ツールの使い方
１つの形式を変更すると、他の全ての形式が自動的に更新されます。
1
色の入力
HEX、RGB、カラーピッカーのいずれかで色を指定します。テキストエリアに値を入力するか、色をクリックして選択してください。
2
コードの確認
指定した色が、HEX、RGB、HSLの各形式で表示されます。
3
コピー
コピーボタンをクリックして、必要な形式のコードをクリップボードに保存します。
実際の使用例
鮮やかな青
Indigo Blue
INPUT
#4F46E5
OUTPUT
RGB(79, 70, 229) / HSL(243, 75%, 59%)
よくある質問
HSLとは何ですか？
色相(Hue)、彩度(Saturation)、輝度(Lightness)で色を表す方法です。直感的に色の明るさや鮮やかさを調整しやすいため、デザイン調整時によく使われます。
透明度は扱えますか？
現在のバージョンでは不透明色のみ対応しており、RGBAなどのアルファチャンネル（透明度）の変換には対応していません。
役立つTips
配色の微調整にHSL
「同じ色味で少し明るくしたい」という場合、HSLのL（輝度）の値だけを上げるのが簡単です。HEXやRGBだと3つの値を計算し直す必要があります。
CSS変数
最近のCSSでは `rgb(var(--color))` のようにRGB値をカンマ区切りで変数に入れておくと、透明度を後から指定できて便利です。