HEXをHSLに変換
HEXカラーコードを色相・彩度・明度に変換します。色のバリエーションを作りやすくなる記法です。
入力色
変換する色を入力してください…
HEXカラーをHSLに変換
HEXコードは短い反面、直感的に扱いにくい記法です。#0A84FFを見ただけで、10%暗くする方法が分かる人はいません。HSLは同じ色を人が考えるときと同じ形で表すので、ホバー状態、無効状態、ダークモード用のバリエーションが、1つの数値を変えるだけで作れます。
このページは、HEX入力を選択し例の値を読み込んだ状態でカラー変換ツールを開きます。
HSLの値の読み方
| 要素 | 範囲 | hsl(210, 100%, 52%)の場合 |
|---|---|---|
| 色相（Hue） | 0〜360° | 210°：シアン（180°）と純粋な青（240°）の間の青 |
| 彩度（Saturation） | 0〜100% | 100%：灰色が混ざらず、最も鮮やか |
| 明度（Lightness） | 0〜100% | 52%：黒と白のちょうど中間より少し上 |
HEXがHSLになる仕組み
変換ツールはまずHEXコードをRGBに直し、各チャンネルを0〜1に換算します。明度は、最大のチャンネルと最小のチャンネルの平均です。彩度は、その2つがどれだけ離れているかで決まり、明度を基準に計算されます。色相は、どのチャンネルが最大で、残りの2つがどう比べられるかから求めます。#0A84FFの場合、結果は210.1°、100%、51.96%で、丸めるとhsl(210, 100%, 52%)になります。
HSLでバリエーションを作る
- ホバー状態や押下状態：明度を5〜10ポイント下げます。
- 無効状態：彩度を下げ、明度を上げます。
- 背景用の淡い色：色相と彩度はそのまま、明度を90〜97%にします。
- ダークモード：暗い背景でも読みやすいよう、明度を上げます。
パレットタブは、50から950までの11段階のスケールでこれを自動化します。その下の配色は色相を回転させ、補色や類似色を見つけます。
知覚上の注意点
HSLの明度は、人が感じる明るさとは一致しません。明度50%の黄色と青は、明るさがまったく違って見えます。コントラストが重要な場面では、実際の組み合わせをカラーコントラストチェッカーで確かめるか、変換ツールが併せて表示するOKLCHの値を使ってください。単純なチャンネル値が必要なら、HEXをRGBに変換をご覧ください。