HSLをHEXに変換
「HSLからHEXへの変換」は、色相の角度、彩度、輝度をhexカラーコードに変換します。彩度と輝度は、色が灰色からどれだけ離れるかを決めます。色相の角度は、色相環のどの60°セクターに落ちるか、ひいてはどのチャンネルが最大になるかを決めます。3つのチャンネルは0–255の値として出て、それぞれがhex2桁になります。
左側に色を入力してください。# の有無を問わない16進数の値、 rgb(), hsl(), oklch() および CSS の色名に対応しています。
HSLをHEXに変換はどう動きますか？
変換は3段階で進みます。chroma——色が灰色からどれだけ離れているか——は、彩度と輝度の両方から(1 − |2L − 1|) × Sとして求まります。この係数のせいでchromaは両端に向かって縮みます。輝度5%や95%の色には、色づく余地がほとんどないからです。
セクターが最大のチャンネルを決める
色相を60で割ると、6つのセクターのどれかに落ちます。各セクターには固定のパターンがあります。1つのチャンネルはfull chroma、1つはゼロ、残る1つはセクター内の進み具合に応じて両者の間を動きます。32°なら、赤から黄色への中間をちょうど少し過ぎたところなので、赤はfull chroma、緑はその0.53、青はゼロです。このページの上部にあるオレンジがまさにそれです。
そのあと、輝度が全体を動かす
ここまでの3つの値は、色が最も飽和した状態を表します。それぞれにL − chroma / 2を加えると、3つの値の差はそのままに、指定した輝度へと一括で上下します。輝度が変わっても色相が保たれるのはこのためです。
すべてのHSLからすべてのhexへは届かない理由
実は届きます。HSLとsRGBはまったく同じ色の集合を記述していて、対応は全単射です。できないのは、往復したあとに同じHSLの数値へ戻ることです。hexには1670万通りの値があり、普通に書かれたHSL——整数の色相と0.1%単位——はそれより少ないからです。近くにある2つのHSL値が同じhexに丸められることがあり、そのhexを戻すと、式が生成したほうの値が出てきます。正確さが要るならhexのまま持ってください。
この方法でスケールを作ることへの警告
よくあるパターンが、ブランドカラーをHSLに変換し、輝度を95%から10%へ段階させてパレットを作る方法です。数値は均等でも、色は不均等になります。HSLの輝度は3つのチャンネルを等しく重み付けし、目はそうしないため、ランプの中の黄色は同じ数値の青よりずっと明るく見えます。まさにそれをしに来たのであれば、代わりにOKLChでスケールを生成してください。このサイトのカラーピッカーがやっていることで、段差は測定どおりに均等に見えます。
色相・彩度・輝度
hsl(32 100% 50%)
hexカラーコード
#ff8800 chroma = (1 − |2 × 0.5 − 1|) × 1.00 = 1.000 sector = 32 / 60 = 0.53 (red → yellow) channels = 1.000, 0.533, 0.000 → 255, 136, 0 → ff 88 00
HSLをHEXに変換が対応するオプションとエッジケースは？
| パラメータ | 型 | デフォルト | 動作とエッジケース |
|---|---|---|---|
| hsl(32 100% 50%) | 現行 | スペース | 現在のCSS構文です。色相の単位は任意で、32と32degは同じです。 |
| hsl(32, 100%, 50%) | 旧式 | カンマ | どこでも有効です。非推奨ではなく、書き直す理由もありません。 |
| hsla(…) | 別名 | — | hsl()と同じ関数で、現在はアルファ値を直接受け取ります。 |
| 色相 | 任意の数値 | 360°で折り返し | 370は10、-30は330になります。角度はモジュラー方式なので、範囲外の値はエラーではなく有効です。 |
| 彩度0% | — | グレー | 設定された色相に関わらず、指定された輝度で灰色を生成します。 |
| 明度0% / 100% | — | 黒 / 白 | どちらもすべての色相と彩度を同じ色にします。 |
| アルファ | 0–1または% | 1 | 4番目の16進ペアとして追加されます。0.5は80になります。 |
| 範囲外 | — | 範囲内に収める | 彩度と輝度は、CSSと同様に0-100にクリップされますが、拒否はされません。 |
よくある質問
手作業でHSLをhexに変換するには？
LとSを分数として、chromaを(1 − |2L − 1|) × Sで計算します。色相を60で割ってセクターを求め、中間のチャンネルをchroma × (1 − |(hue/60 mod 2) − 1|)として計算します。セクターに従ってchroma、その中間値、ゼロを赤・緑・青に割り当て、3つすべてにL − chroma/2を加え、255を掛け、それぞれをhex2桁で書きます。
hsl(32 100% 50%)は常に同じhexになりますか？
はい。変換は決定論的で、どのブラウザでもどのツールでも同じです。hsl(32 100% 50%)はどこでも#ff8800です。保証されないのは復路です。hexのほうが整数の色相より多くの異なる値を持つため、#ff8800を戻すと、ツールの丸め方によっては色相が31.9になることがあります。
HSLで輝度を変えると、色相も変わって見えるのはなぜですか？
色相の数値は変わりませんが、見た目は変わります。HSLの輝度軸が知覚的でないからです。青で輝度を50%から70%に動かすのと黄色で同じ動きをするのとでは、前者のほうがずっと小さな変化に見えます。そのため、同じ輝度の数値を共有する色の集まりが、同じ明るさを共有しているようには見えません。OKLChで作業すれば、この現象は完全になくなります。
1つのHSL値からカラースケールを作る良い方法は？
HSLの輝度を段階させる方法ではありません。よく助言されますが、段差が目に見えて不均等になります。OKLChに変換し、輝度をカーブに沿って段階させ、色相を固定し、両端でchromaを先細りさせます。そうすれば、明るい段が蛍光のようにならず、暗い段も光りすぎません。このサイトのカラーピッカーはまさにそれを行い、11個の値とCSS変数を渡してくれます。
360を超える、または0未満の色相を書けますか？
書けますし、CSSも受け付けます。色相の角度はモジュール演算なので、370degは10deg、−30degは330degです。角度を増やし続けるアニメーションや生成パレットでは、折り返しを自分で書かずに済むので、実用上役立ちます。
別のコンバーターだと、hexが1桁だけ違うことがあるのはなぜですか？
丸めのせいです。HSLは連続値ですが、hexの各チャンネルは256段階しかないため、127.5に着いたチャンネルはどちらかに丸めるしかありません。このコンバーターは四捨五入（最近接丸め）を行い、切り捨てるツールは1だけ低くなります。2つの色は画面では区別できません——差は1つのチャンネルの1/255です——しかし文字列としては同じではありません。