HSLカラー変換：HSL⇔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%でスクリーンショットを撮らないと、アンチエイリアス処理された端のピクセルを拾って色がずれます。

A 似ていますが、同じではありません。HSLは二重円錐の色空間で、明度が黒から白まで変化します。L=50%のとき、その色相の最も純粋な形になります。HSVは単一円錐で、明るさが黒から完全な色までスケールします。純粋な黄色はHSL(60, 100%, 50%)ですが、HSVでは(60, 100%, 100%)です。この変換ツールはHSLに準拠しています。PhotoshopのHSVスライダーから値を移す場合は、彩度と明度を手動で調整してください。CSS作業では、HSLはモダンな`hsl()`関数に直接対応します。

A よくある誤解ですが、答えはノーです。HSL(210, 50%, 40%)とHEXの#336699は同じ色を別の書き方で表しているだけ。正確さは表記ではなくモニター次第です。ただし微調整ならHSLが圧倒的に楽で、彩度を5%動かす方がHEXの桁を手探りするより速い。HSLで試して、最後にHEXをコピーするのがおすすめです。

A 先生や学生が色の仕組みを学ぶためにこのツールをよく使っています。スライダーを動かしたときのHEX値の変化をプロジェクターに映し出すと、明度が0％になると真っ黒になる現象が視覚的にすぐ分かります。

A マーケティング部門ではSNS画像や印刷物の正確なカラーコードが求められます。おなじみのHEXコードを入力してHSL値を取得し、ブランドガイドラインに反映させましょう。デザイナーは明度を15パーセント調整して、規定に沿ったホバー状態を作成できます。得られたHEXコードをチーム全体で共有するのがコツです。