カラー → HSL

HSL 色とは？

HSL 色は、人が色を知覚する方法に近い 3 つのプロパティ（色相、彩度、輝度）で色を表します。色相は 0° から 360° の角度で色相環上の位置を示し、0° が赤、120° が緑、240° が青です。彩度は 0%（完全にグレー）から 100%（完全に鮮やか）のパーセンテージです。輝度もパーセンテージで、0% が黒、50% が純色、100% が白を表します。例えば hsl(199, 88%, 48%) は高彩度のスカイブルーです。

HSL は CSS Color Module Level 3 で標準化され、モダンブラウザでは hsl() と hsla() 関数で広くサポートされています。3 つのチャンネルが知覚的特性に対応するため、配色の構築、ティントとシェードの生成、非デザイナー向けの色コントロールの露出に最適な形式です。

HSL 色を使う場面

生の光の強度ではなく人間の尺度で色を考えたい場合に HSL が最も役立ちます。よくある場面は以下の通りです：

• パレット構築。 色相を一定に保ち、彩度や輝度を変えると調和のとれたグラデーションパレットが生成できます。
• ティントとシェードの作成。 輝度を上げるとティント、下げるとシェードになります — 3 つの RGB チャンネルを調整するよりはるかに直感的です。
• テーマとダークモード。 輝度値を 1 つ入れ替えるだけで、色相を保ったままブランド色をライトからダークモードに切り替えられます。
• UI のカラーピッカー。 デザイナーは色相/彩度/輝度で考えるため、ほとんどのビジュアルカラーピッカーは HSL スライダーを公開しています。
• CSS 変数。 --brand: 199 88% 48% を保存すると、同じ色相を異なる輝度修飾子で再利用できます。
• アクセシビリティ調整。 彩度を下げたり輝度をずらすことで、WCAG コントラストチェックに合格しない色のペアを救済できます。

ピクセル単位の正確なチャンネル値が必要な場合（RGB を使用）や、共有用のコンパクトなコードが必要な場合（HEX を使用）は、HSL は不適切です。

HSL と RGB、HEX の違い

HSL、RGB、HEX はどれも同じ sRGB 色を表します。RGB と HEX は赤・緑・青チャンネルを直接エンコードし、数学的に等価で 10 進と 16 進の違いしかありません。HSL は RGB の変換で、色を色相・彩度・輝度として再表現します。sRGB ゲーム内での相互変換はロスレスです。

決定的な違いは認知にあります。RGB/HEX で 1 チャンネルを変更すると通常 3 つの知覚特性が同時に変化しますが、HSL で 1 チャンネルを変更すると予測可能な視覚変化が生じます。これにより HSL はデザインシステム、色彩理論チュートリアル、手続き型カラー生成で好まれる形式です。

一般的な HSL 色

下表はよく使われる色とその HSL 値の一覧です。

名前	HSL	HEX
黒	hsl(0, 0%, 0%)	#000000
白	hsl(0, 0%, 100%)	#FFFFFF
赤	hsl(0, 100%, 50%)	#FF0000
緑	hsl(120, 100%, 50%)	#00FF00
青	hsl(240, 100%, 50%)	#0000FF
スカイブルー	hsl(199, 88%, 48%)	#0EA5E9
黄	hsl(60, 100%, 50%)	#FFFF00

CSS は hsla() もサポートし、0 から 1 の 4 つ目のアルファ値を追加できます。例えば hsla(199, 88%, 48%, 0.5) は 50% の不透明度を表します。

色を HSL に変換する方法

このツールでの変換は一瞬で、すべてブラウザ内で完結します。アップロード、登録、インストールは不要です。以下の手順で行います：

1. 色を選ぶ。 カラーピッカーを使うか、HEX 入力欄に 6 桁の HEX コード（# 付きまたはなし）を入力します。
2. 結果を確認。 H、S、L 値がリアルタイムで更新され、hsl() 文字列とプレビュー見本も同期的に更新されます。
3. HSL をコピー。「HSL をコピー」ボタンをクリックして hsl(h, s%, l%) 文字列をコピーし、CSS、デザインツール、ドキュメントに貼り付けます。

すべてのステップは JavaScript でブラウザのローカルで実行されるため、色の選択はサーバーにアップロードされません。これにより変換は完全にプライベートかつ即時に行われます。