カラーコンバーター

HEX、RGB、HSL間の色変換は、異なるカラーモデル間の数学的変換を伴います。HEXカラーは16進数表記（#RRGGBB）を使用し、各ペアは00からFF（10進数で0-255）の範囲の色チャンネル（赤、緑、青）を表します。RGBは同じ3つのチャンネルの直接的な数値表現です。 HSL（色相、彩度、明度）は円筒座標系を使用します。色相（Hue）はカラーホイール上の0-360度の角度で、彩度（Saturation）は色の純度を示す百分率、明度（Lightness）は色の明暗を示します。RGBからHSLへの変換では、チャンネル値の最大値と最小値を計算し、チャンネル差から色相を導出します。 このツールのすべての変換はJavaScriptで実装された精密な数学公式を使用しており、無効な結果を防ぐための入力値クランピングが適用されています（例：RGB値は0-255に、HSLの色相は0-360に制限）。リアルタイムカラープレビューはCSS background-colorを使用して即座に更新されます。

1. サポートされている形式で色の値を入力します：HEX (#ff6600)、RGB (255, 102, 0)、またはHSL (24, 100%, 50%)。 2. ツールが即座に他のすべての形式に変換します。 3. ライブカラープレビューで選択した色が表示されます。 4. 任意の出力値をクリックしてクリップボードにコピーできます。 5. 入力フィールドを使用して個々のチャンネル値を調整します。 ヒント：HEX短縮表記（例：#f60）は自動的にフルフォーム（#ff6600）に展開されます。

HEX：Web開発で最も一般的な形式です。CSS、デザインツール、ブランドガイドラインで使用されます。各チャンネルは00（なし）からFF（最大強度）までの範囲です。 RGB：赤、緑、青の光を組み合わせる加法混色モデルです。(0,0,0)は黒、(255,255,255)は白です。デジタルディスプレイやCSSのrgb()関数で使用されます。 HSL：デザイナーにとってより直感的なモデルです。色相（Hue）はカラーホイール上の基本色を選択し、彩度（Saturation）は鮮やかさを制御し（0% = グレー）、明度（Lightness）は明るさを制御します（0% = 黒、100% = 白）。CSSはhsl()関数をネイティブでサポートしています。