Color Converter
HEX、RGB、HSLの間で色を変換します。カラーピッカーを使用するか、手動で値を入力できます。
動作方法: パレットから色を選択するか、カラーピッカーを使用するか、任意のカラー値（HEX、RGB、またはHSL）をテキストフィールドに貼り付けます。すべてのフォーマットがリアルタイムで更新されます。「Copy」をクリックして任意の値をコピーします。
カラーピッカー
色をすばやく選択:
color: #3B82F6;
color: rgb(59, 130, 246);
color: hsl(217, 91%, 60%);
カラーフォーマットについて
CSSは複数のカラーフォーマットに対応しており、それぞれに異なる利点があります。HEXは最もコンパクトで、デザインツールで最も広く使用されています。RGBは光の値で色を混ぜる際に直感的です。HSLは最も人間にとって分かりやすいフォーマットで、色相、彩度、明度を独立して調整できるため、カラーパレットやテーマの作成に最適です。
HEXカラー
HEXカラーは6桁の16進数コード（例：#ff5733）を使用し、赤、緑、青チャネル（各00～FF）を表します。各ペアが繰り返される場合、3桁の短縮形が存在します（例：#f53は#ff5533の短縮形）。HEXはWebデザインで最も一般的なフォーマットで、すべてのブラウザとデザインツールでサポートされています。
RGBカラー
RGB（赤、緑、青）は、0～255の3つの整数値を使用して色を定義します。例えば、rgb(255, 87, 51)は鮮やかなオレンジ赤です。CSSはrgba()もサポートしており、透明度用のアルファチャネル（0.0～1.0）が含まれています。RGBはJavaScriptの色操作やCanvas描画で一般的に使用されます。
HSLカラー
HSL（色相、彩度、明度）は、人間にとって最も直感的なカラーモデルです。色相はカラーホイール上の度数（0～360）、彩度はパーセンテージ（0% = グレー、100% = フルカラー）、明度はパーセンテージ（0% = 黒、100% = 白）です。HSLを使用すると、明度を調整するだけで同じ色相のティントとシェードを簡単に作成できます。