HSLカラー変換：HSL⇔HEX/RGBスライダー付き | 無料ツール

A HSLモデルは、一貫性のあるカラースキームを生成するのに最適です。カラーパレットを作成するには、基準となる色相を選択し、彩度と輝度のスライダーのみを調整して簡単にバリエーションを探せます。滑らかなCSSグラデーションの場合、最初のHSLカラーを選び、2番目のカラーの色相または輝度値を微妙に調整することで、シームレスな移行を確実にします。このコンバーターは必要なHEXおよびRGBコードを即座に提供し、ウェブプロジェクトの設計ワークフローを簡素化します。

A はい、もちろんです！弊社のHSLカラーコンバーターでは、既存のHEXまたはRGBカラーコードを直接入力できます。HEX値（例：#RRGGBB）またはRGB値（例：255, 0, 128）をそれぞれの入力フィールドに貼り付けるだけです。ツールは対応するHSL値を即座に表示し、直感的なスライダーを使って、任意の色相、彩度、明度を簡単に理解し調整できるようにします。

A 明度スライダーを100%まで動かすと、色相や彩度の値に関係なく、常に白になります。これは、最大の明度がどんな色でも完全に洗い流してしまうためです。HEXコードは#FFFFFFに、RGB値は255, 255, 255に変わるでしょう。色を最も明るい状態にリセットする簡単な方法です。

A モニターによって色の再現性は異なります。キャリブレーション済みの画面で鮮やかに見えるHSL値も、未調整のノートパソコンではくすんで見えることがあります。これはツールの問題ではなく、ハードウェアの違いです。デザインを確定する前に、最低2台のデバイスで色を確認しましょう。Web制作では、CSSにHEXとRGBのフォールバックを両方含めるのがおすすめです。

A 直接の保存機能やエクスポート機能はこのツールにはありません。しかし、2秒で自分でできます。スライダーを動かすとリアルタイムで更新されるHEXコードをコピーし、デザインソフトやCSSファイル、メモアプリに貼り付けてください。異なるHSLの組み合わせを試す間、パレット収集用のドキュメントを別に開いておくのがおすすめです。

A このHSLコンバーターは透明度を扱いません —— ベタ塗りの色のみを出力します。不透明度が必要な場合は、取得したHEXまたはRGBコードをCSSでrgba(255, 100, 50, 0.7)のように別途アルファチャンネルと組み合わせてください。大半のデザイン用途では、このツールの完全不透明な出力で十分です。

A このツールに直接コントラストチェッカーはありません。でも回避策があります。スライダーで背景色を設定し、HEXコードをコピーします。次にテキスト色も同様に設定して、両方のHEX値を無料のWCAGコントラスト計算ツールに入力してください。通常のテキストは4.5:1以上、大きなテキストは3:1以上の比率が必要です。ブランドカラーを選ぶときはいつも、コントラストチェッカーのタブを開いたままにしています。

A 可能ですが、ブレンド処理はご自身で行ってください。スライダーで1つ目の色を選びHEXコードをコピーし、次に2つ目の色を調整します。滑らかなCSSグラデーションには、色相の差を30度以内に抑え、明度を最低20%変えるのがコツです。彩度は両方とも50〜70%に設定するとリッチな遷移になります。コピーした2つのHEXコードを 'background: linear-gradient(#HEX1, #HEX2)' のように貼り付けてください。

A その範囲は偶然ではありません。もともとの色相環の考え方に沿っています。赤が0°、緑が120°、青が240°に位置し、360°でちょうど赤に戻ります。1度単位で調整するのはやりすぎに感じるかもしれませんが、細かな制御が可能になるんです。実際のデザイン作業では5°または10°刻みで十分です。ドラッグ中にShiftキーを押すと、その大きめのステップに自動でスナップしますよ。

A あります。推測より確実です。画像編集ソフトのスポイト機能でスクリーンショットを開き、目的のピクセルを正確にサンプリングしてください。RGB値が得られます。その3つの数値を当ツールのRGB欄に入力すると、HSLの内訳と対応するHEXが即座に表示されます。ロゴ、写真、UIモックアップから色を抽出するのに最適です。コツ：ズーム100%でスクリーンショットを撮らないと、アンチエイリアス処理された端のピクセルを拾って色がずれます。