HSL調整

HSL調整とは？

HSL調整は、色の色相（Hue）、彩度（Saturation）、明度（Lightness）を直感的なスライダーでリアルタイムに調整できるオンラインツールです。HEXやRGBコードを入力すると、HSLに変換され、各属性を個別に微調整できます。

元の色と調整した色を並べて比較しながら作業できるため、デザイン作業で色を精密に調整するのに最適化されています。調整した色はHSL、HEX、RGB形式で即座にコピーして使用できます。

こんな時に使えます

• ブランドカラーのバリエーション作成 – 基本色から明度と彩度だけを調整して、一貫したカラーバリエーションを作成する時
• UIホバー/アクティブ状態の色 – ボタンやリンクの基本色から明度だけを調整して、状態別の色を生成する時
• カラートーンマッチング – 彩度と明度は維持しながら色相だけを変更して、調和のとれたカラーセットを作成する時
• アクセシビリティ改善 – コントラストを高めるために既存の色の明度を調整する時
• カラー探索と実験 – アイデア段階で様々なカラー組み合わせを素早く試す時
• CSSカラーコード変換 – HEXコードをHSLやRGBに変換して使用する時

主な機能

• 直感的なHSLスライダー – 色相（0-360°）、彩度（0-100%）、明度（0-100%）を個別のスライダーで調整し、色の変化をリアルタイムで確認できます。
• 多様な色入力方式 – カラーピッカーで直接選択するか、HEXコードを入力して開始色を指定できます。
• 元と結果の比較 – 元の色と調整した色を並べて表示し、変化を直感的に比較できます。
• 複数のコード出力 – HSL、HEX、RGB、CSS形式のコードを同時に提供し、必要な形式をすぐにコピーできます。
• 履歴の自動保存 – 調整した色が自動的に履歴に保存され、以前の作業を簡単に呼び出せます。
• お気に入り保存 – よく使う色をお気に入りに保存して、素早くアクセスできます。

使い方

1. 開始色を選択 – カラーピッカーをクリックするか、HEXコードを入力して「適用」ボタンをクリックします。
2. HSL値を調整 – 色相、彩度、明度のスライダーを動かして、希望の色を作成します。変化はリアルタイムで反映されます。
3. 結果を確認 – 元と調整結果を比較し、希望のコード形式をコピーボタンでクリップボードにコピーします。
4. 保存と管理 – 気に入った色はお気に入りに追加し、履歴から以前の色を呼び出せます。

HSLカラーモデルを理解する

HSLは、色を人間の認知方式に近い形で表現するカラーモデルです：

• 色相（Hue, 0-360°） – カラーホイール上の位置を表します。0°/360°は赤、120°は緑、240°は青です。
• 彩度（Saturation, 0-100%） – 色の鮮やかさを表します。0%はグレー、100%は完全に鮮やかな色です。
• 明度（Lightness, 0-100%） – 色の明るさを表します。0%は黒、50%は純粋な色、100%は白です。

HSLの利点は、色相を維持しながら彩度や明度だけを調整できることです。これにより、同じ色系統の明るい/暗いバリエーションを簡単に作成できます。

よくある質問