カラーコード変換ツール

使い方

カラーピッカーパネルをクリックまたはドラッグして色を選択します。横軸が彩度、縦軸が明度です。色相バーで基本色を変更、アルファバーで透明度を調整できます。HEX・RGB・HSLの入力欄に直接値を入力することも、各チャンネルのスライダーで微調整することも可能です。すべての入力は双方向で連動し、いずれかの値を変更すると他のすべてのフォーマットがリアルタイムで更新されます。

カラーフォーマット

• HEX（#ff0000）：16進数表記で、CSSで最も一般的な形式です。6桁で赤・緑・青（各2桁、00-ff）を表現します。HEXAは透明度を表す2桁が追加されます。
• RGB（rgb(255, 0, 0)）：赤・緑・青の光の三原色で色を定義します。各チャンネルは0〜255の範囲です。RGBAはアルファ値（0＝透明〜1＝不透明）が追加されます。
• HSL（hsl(0, 100%, 50%)）：色相（0-360°）・彩度（0-100%）・明度（0-100%）で色を指定します。色の調整が直感的で、色相を変えるとカラーホイール上を回転し、彩度と明度で鮮やかさと明るさを制御します。

アルファチャンネル（透明度）

アルファチャンネルは色の透明度を制御します。1が完全に不透明、0が完全に透明です。アルファを設定すると、HEXA・RGBA・HSLAフォーマットが標準フォーマットとともに表示されます。プレビューのチェッカーボードパターンが透明度を示します。

活用シーン

• CSSスタイリング：HEXやRGBの値をスタイルシートに直接コピー
• デザイン連携：デザインツール間のフォーマット変換（FigmaはHEX、一部のツールはHSLを使用）
• アクセシビリティ：HSLの明度を調整して十分なコントラスト比を確保
• ブランディング：スライダーで正確なブランドカラーを微調整

プライバシー

すべての変換処理はブラウザ内で完結します。データがサーバーに送信されることは一切ありません。