カラーコンバーター

使い方

1. HEX・RGB・HSLいずれかの入力欄に値を入力します。
2. 他の形式に自動変換されます。
3. カラープレビューで色を確認できます。
4. カラーピッカーを使って視覚的に色を選ぶこともできます。

カラーコードについて

ウェブ開発では色の表現にHEX・RGB・HSLが使われます。用途に応じて使い分けが必要なことがあります。デザインツールや既存コードと異なる形式が必要な場合にこのツールを使ってください。

1 色を実際に変換する

#1a73e8 を例にします。16 進数 2 桁が 1 チャンネルで、1a = 26、73 = 115、e8 = 232 なので、RGB は rgb(26, 115, 232) です。

HSL を求めるには、各チャンネルを 0〜1 に換算し、最大値（0.910、青）と最小値（0.102、赤）を見つけます。

• 明度 = (最大 + 最小) / 2 = 0.506 → 51%
• 彩度 = (最大 − 最小) / (2 − 最大 − 最小) = 0.817 → 82%（明度が 50% を超える場合の式）
• 色相：青が最大なので、色相 = 60 × ((R − G) / (最大 − 最小) + 4) = 214.1 → 214

ツールの表示は hsl(214, 82%, 51%) です。式は CSS Color Module Level 4 と同じです。

制限事項

• 透明度は扱えません。 8 桁の 16 進数（#1a73e880）は無効になり、rgba(26, 115, 232, 0.5) の透明度は無視されます。
• HSL は整数に丸められます。 hsl(214, 82%, 51%) を入力すると #1a73e8 ではなく #1c74e9 になります。丸めた値では元の色を正確に指せないためです。HEX の値を基準にしてください。
• 対応形式は 3 つだけです： HEX（3 桁または 6 桁。#abc は #aabbcc に展開）、RGB、HSL。HSB/HSV、HWB、OKLCH には対応していません。