HEX から HSL へのコンバーター

HEX から HSL へのコンバーターとは？

// Convert a hex color string to {h, s, l, alpha} per CSS Color 4 §6.4
// h in 0-360, s and l in 0-1, alpha in 0-1.
function hexToHsl(input) {
  let h = input.trim().replace(/^#/, '');
  if (h.length === 3 || h.length === 4) h = h.split('').map(c => c + c).join('');
  const r = parseInt(h.slice(0, 2), 16) / 255;
  const g = parseInt(h.slice(2, 4), 16) / 255;
  const b = parseInt(h.slice(4, 6), 16) / 255;
  const alpha = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
  const L = (max + min) / 2;
  const S = delta === 0 ? 0 : delta / (1 - Math.abs(2 * L - 1));
  let H = 0;
  if (delta !== 0) {
    if (max === r) H = ((g - b) / delta) % 6;
    else if (max === g) H = (b - r) / delta + 2;
    else H = (r - g) / delta + 4;
    H = (H * 60 + 360) % 360;
  }
  return { h: H, s: S, l: L, alpha };
}

console.log(hexToHsl('#3b82f6')); // { h: 217, s: 0.91, l: 0.60, alpha: 1 }

主な機能

HEX から HSL へのコンバーター代替の比較

HEX から HSL への変換例

#3b82f6

#FF5733

#3b82f6

#FF573380

一般的な HEX → HSL 変換リファレンス

最もよく変換される 10 個の hex コードとその HSL 等価のリファレンス表 — 純粋なプライマリ、純粋なセカンダリ、Tailwind パレットから 2 つの実世界ブランドカラー。

HEX から HSL へのコンバーターの使い方

1. 1

   HEX フィールドに hex コードを貼り付ける

   HEX 入力に任意の hex 値を投入します — 先頭の `#` のあり/なし、3 桁の省略形（`#F73`）、6 桁の標準形（`#3b82f6`）、4 桁のアルファ省略形（`#F738`）、アルファ付き 8 桁の標準形（`#FF573380`）のいずれでも構いません。本ツールは内部でこの 5 つの入力形状を同じ正規の色に正規化します。大文字小文字は無視されます（`#3b82f6` と `#3B82F6` は同一にパースされます）。不正な文字や桁数違いは静かなインラインエラーになり、有効な hex は HSL を含むすべての他の形式フィールドをリアルタイムで更新します。

2. 2

   HSL フィールドから HSL の 3 つ組を読み取る

   HEX フィールドの下にある HSL フィールドは、CSS Color 4 のモダンなスペース区切り構文で対応する `hsl()` 値を表示します: 不透明な色には `hsl(217 91% 60%)`、アルファ付きには `hsl(217 91% 60% / 0.5)`。Hue は 0 から 360 までの整数の度数、saturation と lightness は 0 から 100 までの整数のパーセントです。値は表示の読みやすさのために丸められます — 本ツールの内部 OKLCH の真実の源により、基盤となる精度は浮動小数点なので、hex へのラウンドトリップは安定したままです.

3. 3

   Copy をクリックして HSL 文字列をつかむ

   各形式カードの右側に Copy ボタンがあります。1 クリックで値がクリップボードに乗り、ボタンラベルが一瞬「Copied!」に切り替わるのでコピー成功がわかります。コピーされる文字列は正規の CSS Color 4 構文（`hsl(217 91% 60%)`）です。ターゲットがレガシーなカンマ形式（`hsl(217, 91%, 60%)`）を必要とする場合、変換は機械的です。プラットフォーム固有の出力（Tailwind v4、SwiftUI、Compose、Flutter）には、ピッカー下の Copy as code セクションを使ってください — これらのスニペットは各プラットフォームが期待する形式をネイティブに出力します.

4. 4

   同時に見える: RGB、OKLCH、OKLAB、HSV、HWB、CMYK、名前付きカラー

   貼り付けた同じ hex が他の形式フィールドにも反映されます — canvas 呼び出しとハードウェア向けの RGB、知覚的に均一なデザインシステム向けの OKLCH と OKLAB、デザイナーのカラーピッカーワークフロー向けの HSV と HWB、印刷見積もり向けの CMYK、ドキュメントや本文向けの最も近い CSS 名前付きカラー。hex → HSL だけに縛られることはありません。Tailwind v4 の `@theme` ブロック（知覚的明度が HSL のガンマがらみの L よりも重要な場面）向けに OKLCH の 3 つ組も必要なら、OKLCH フィールドに専用の Copy ボタン付きで並んでいます.

5. 5

   ピッカーを使って lightness をビジュアルにスイープする

   形式グリッドの下には、ビジュアル探索のための SL の四角 + 色相スライダー + アルファスライダーがあります。SL の四角は HSL の Saturation × Lightness 平面に直接マッピングされます: 垂直方向にドラッグして L を 0% から 100% まで歩かせながら、HSL フィールドがリアルタイムで更新される様子を見られます。出荷前に正確なパーセントを固定する前に、ティントやシェードをビジュアルに生成するのに有用です。Chromium 系ブラウザ（Chrome、Edge、Brave）では EyeDropper ボタンがネイティブの `EyeDropper` API を起動し、ブラウザの外も含む画面上の任意のピクセルをサンプリングできます.

よくある HEX / HSL の間違い

9 段のパレットのために HSL の L をスイープ:
同じ L で hsl(120 100% 50%) と hsl(240 100% 50%)
明るさが視覚的に異なる — パレットが不均等に感じられる。

代わりに OKLCH の L をスイープ:
oklch(0.7 0.2 130) と oklch(0.7 0.2 250)
等しく明るく見える; パレットはすべての色相にわたって一貫して読める。

H=350 から H=10 への線形補間:
(350 + 10) / 2 = 180°（シアンの中点）
誤り — ホイールの長い方を回る。

短経路の hue 補間:
midpoint = ((350 + 10 + 360) / 2) % 360 = 0°（赤の中点）
ホイールの短い経路、赤を通る。

Photoshop から HSV 値を CSS の hsl() ルールに貼り付ける:
Photoshop HSB 0, 100, 100（純粋な赤）
CSS hsl(0 100% 100%) は白として描画される — 完全に間違った色。

CSS に貼り付ける前に HSV → HSL を変換する:
HSV 0, 100, 100 → HSL 0, 100%, 50%
CSS hsl(0 100% 50%) は純粋な赤として描画される — 正しい。

パーセント記号なしで HSL を出力:
hsl(217 91 60)
CSS パースエラー — すべてのブラウザはルール全体を無視する。

S と L にパーセント記号を付けて HSL を出力:
hsl(217 91% 60%)
有効な CSS — すべてのエバーグリーンブラウザと IE 9+ で動作する。

HEX から HSL を使う人

HSL の CSS 変数を定義するフロントエンド開発者

Figma の hex から一度 `--primary: hsl(217 91% 60%)` を定義し、その後 L の数字だけを調整して `--primary-hover: hsl(217 91% 70%)`、`--primary-active: hsl(217 91% 50%)`、`--primary-bg: hsl(217 91% 95%)` を構成します。hex を一度貼り付け、HSL の 3 つ組を読み取り、CSS カスタムプロパティブロックに投入します。OKLCH ベースのランプが主流になる前に、レガシーなデザインシステムがティントとシェードを色調的に整合させるために使ったパターンです.

HEX を HSL ピッカーに翻訳するデザイナー

hue + saturation + value ピッカー（Adobe、Sketch、Figma の HSB モード）で育ったデザイナーは、ソースファイルが hex で出荷されていても HSL の 3 つ組を欲しがることがよくあります。hex を一度貼り付けるだけで対応する HSL が得られ、手動で推測することなくデザイナーの脳内のカラーホイール位置に読み込めます。ブランドカラーのスペックをレビューしていて、ファミリー内の他のブランドカラーに対してそれが色相ホイールのどこに位置するかを知りたいときに便利です.

ダークモードトークンを計算するテーマシステム作者

ダークモードのテーマ化は H と S を保ったまま L を反転することがよくあります — ライトモードの `hsl(217 91% 60%)` プライマリはダークモードの `hsl(217 91% 40%)`（または類似のもの）にマッピングされます。ライトモードの hex を貼り付け、HSL を読み、ダークモードの L を計算し、新しい HSL をダークテーマのトークンに書き戻します。HSL の 3 つ組があればパターンは機械的です — 生の RGB チャネルでこれを行うのははるかにややこしいです.

ティント・シェードランプを生成するデザインシステム作者

L をスイープして 9 段のティント/シェードランプを生成します: `hsl(217 91% 95%)`（最も明るい）、85%、75%、65%、55%、45%、35%、25%、`hsl(217 91% 15%)`（最も暗い）。ベースの hex を貼り付け、HSL を読み、頭の中またはコードで L を 10% ステップでスイープします。（各ステップが等しく明るく見えるべき知覚的に均一なランプには、隣の OKLCH フィールドに切り替えてください — L が知覚的に均一でないため、HSL ランプは色相をまたぐと不均等に見えます。）

ランタイム hsl(from ...) 演算を使う CSS 作者

モダン CSS は `color-function-from` 構文をサポートします: `hsl(from var(--primary) h s calc(l + 10%))` は `--primary` の明るいバリアントを各ステップを事前計算せずにレンダー時に派生します。ブランドの hex を貼り付け、HSL の 3 つ組を確認し、ベースを CSS 変数に投入し、派生トークンにランタイム演算を使います。Chrome 119+、Safari 17.2+、Firefox 128+ で出荷されています.

Tailwind v3 の HSL トークンセットを構築するフロントエンド開発者

Tailwind v3 はテーマの色を CSS 変数のスペース区切り HSL の 3 つ組（`--primary: 217 91% 60%`）として保存し、`tailwind.config.js` で `hsl(var(--primary))` を介して構成しました。ブランドの hex を貼り付け、HSL を読み、変数定義に 3 つの数字（`hsl(...)` ラッパーなしで）を投入します。Tailwind v4 はその後 OKLCH ファーストに移行しましたが、v3 のコードベースは依然として HSL パターンを使い、これから何年もそうあり続けます.

hex から HSL コントロールへのマッピングを行うカラーピッカー UI 作者

hue / saturation / lightness を 3 つの別々のスライダーとして公開するカラーピッカー（古典的な Adobe スタイル UI）を構築するには、受信した hex をピッカーの 3 つのコントロールにマッピングする必要があります。ここで hex を貼り付け、HSL の 3 つ組を読み、3 つのスライダーをプログラム的に配置します。変換はピッカーが内部で実行するものと同じで、本ツールはデバッグ用に中間値を表面化します.

コントラスト用にブランドカラーの lightness を調整するアクセシビリティエンジニア

ブランドカラーが背景に対して WCAG コントラストを失敗するとき、安価な修正は H と S を変えずに比率がクリアするまで L を上げることです — 色は同じブランドアイデンティティとして読み続けます。ブランドの hex を貼り付け、コントラストバッジを見ながら、頭の中で L を調整（またはピッカーの L 軸を使って）して WCAG と APCA の両方が通るまで進めます。HSL フィールドは仕様ドキュメント用に新しい L パーセントを、hex フィールドはスタイルシート用に対応するコードを表面化します.

HEX から HSL の数式とパース

HEX → RGB → HSL は 2 ステップのパイプライン

変換は RGB を中間として通ります。ステップ 1: チャネルごとに `parseInt(hex.slice(1, 3), 16)` で hex を RGB の整数にパースします。ステップ 2: RGB を 0〜1 に正規化し、`max`/`min`/`delta` を計算し、CSS Color 4 §6.4 の区分的三角関数を適用します: `L = (max + min) / 2`、`S = delta / (1 - |2L - 1|)`、`H = piecewise * 60`。2 ステップ構造であるため、本ツールは中間の RGB タプルも表面化します — 表示は無料で、デバッグに有用です.

CSS Color 4 §6.4 がリファレンスアルゴリズムを定義

W3C CSS Color 4 仕様 §6.4（`rgb()` から `hsl()` へのアルゴリズム）は正規の区分的数学を定義します: lightness は max と min の中点、saturation は `delta / (1 - |2L - 1|)`（delta = 0 のとき S = 0、グレーでのゼロ除算を避けるため）、hue は最大値となるチャネルに応じた 60 度/ステップの三角関数。仕様はエッジケースも扱います: 純粋な黒（`#000`）は任意の 0° の色相で `hsl(0 0% 0%)` を生成、純粋な白（`#FFF`）は同様に `hsl(0 0% 100%)`、純粋なグレーは `hsl(0 0% 50%)` を生成します.

Hue は 360° でラップ、S と L はパーセント

HSL の 3 軸は単位が異なります。Hue は 0 から 360 までのラップ付きの度数 — `hsl(370 ...)` は `hsl(10 ...)` と解釈されます。角度位置がラップするためです。Saturation と Lightness は 0% から 100% までのパーセントで、ラップなし。範囲外の値はクランプされます。CSS Color 4 は turns（`hsl(0.6turn ...)`）や radians（`hsl(3.787rad ...)`）の hue も受け付けますが、本ツールの出力は度数を使います。デザインツール UI やブランドスペックドキュメントで最も一般的な形式だからです.

HSL の Lightness は知覚的に均一では*ない*

`hsl(120 100% 50%)` の緑は `hsl(240 100% 50%)` の青よりも視覚的に明るく見えます。両方とも名目上の Lightness は同じですが — HSL は sRGB のガンマの癖を継承し、すべての色相で同じ L スケールを使うためです。これが HSL ベースのティントランプが不均等に見える（緑のランプの明るい端は青のランプの明るい端より早く昇る）理由であり、デザインシステムがランプ生成で OKLCH に大きく移行した理由です。本ツールは HSL と OKLCH の両方を表面化するので、選択は一目でつきます.

ラウンドトリップ安定性のための OKLCH 内部の真実の源

このスポークは HEX → HSL を特に対象としていますが、共有の基盤コンバーターは正規の色を内部で OKLCH の 3 つ組として保持します。HEX → HSL → RGB → OKLAB → HEX のラウンドトリップはビット安定に保たれます。レガシーな HSL ピボットのコンバーターは丸め誤差を蓄積し、数回の変換で色相が数度ずれることがあります。OKLCH ピボットは Hue を安定軸として保持するので、色相スライダーをドラッグしても誤ってグレーをクロスフェードすることがありません。Björn Ottosson の 2020 年の OKLAB 論文に従います.

チャネル符号化: 8 bit 符号なし、sRGB ガンマ符号化

hex コードは IEC 61966-2-1（1996）で定義された sRGB 色空間で 8 bit 符号なし RGB チャネル（0〜255）を符号化します。値は*ガンマ符号化*されています — チャネル値と知覚的な明るさの関係は非線形で、区分的 sRGB 伝達関数（おおよそ 2.4 の指数にゼロ近傍の小さな線形セグメント）に従います。HSL はこれらのガンマ符号化された RGB 値から線形化のステップなしで直接導かれ、これが HSL の知覚的均一性問題の根本原因です。OKLCH は最初に線形化してから知覚的に均一な空間に再マッピングしますが、HSL はそうしません.

HEX / HSL ワークフローのベストプラクティス

新しいコードではモダンなスペース区切り HSL 構文を使う

CSS Color 4 の `hsl(217 91% 60%)`（スペース区切り）と `hsl(217 91% 60% / 0.5)`（アルファ用スラッシュ）は 2025 年以降に出荷されるコードに対する正規構文です。レガシーなカンマ形式 `hsl(217, 91%, 60%)` と `hsla(217, 91%, 60%, 0.5)` は依然としてどこでもサポートされていますが、CSS Color 4 ではスタイル的に非推奨です。新しいスタイルシートではモダン構文を使い、`hsla()` は本当にレガシーサポートが必要な IE 9-11 のフォールバックコンテキストにだけ残してください.

HSL ではなく OKLCH でランプを生成する

HSL の Lightness 軸は知覚的に均一ではありません — 9 段の L スイープは、すべての L 値で緑のステップが青のステップよりも明るく見えるランプを生成します。各ステップが等しく明るく見えるべきランプ（デザインシステムのデフォルトの要求）には、OKLCH で生成してください: `oklch(0.7 0.15 217)`、`oklch(0.6 0.15 217)` など。本ツールは同じ hex に対して HSL と OKLCH の両方を表面化するので、2 つを切り替えるのは 1 つの Copy クリック分だけです.

Hue と Saturation を固定し、Lightness をスイープする

HSL をティント/シェード作業に使うときは、L の数字だけを変えてください — ランプ全体で H と S は同一に保ちます。色相のドリフト（5° でも）はランプを乱雑に見せます。彩度のドリフトは明るい端を色あせに、暗い端を濁って見せます。一度に 1 軸という規律が HSL にデザインフレンドリーな評判を与えています — それを放棄すれば両方の世界の悪い面を得ます.

真実の源のトークンには HEX を、計算されたバリアントには HSL を優先する

デザイントークン仕様を書くときは、HEX（または OKLCH）を正規形として優先してください — どちらも簡潔で JSON や YAML にきれいに収まります。HSL はランタイムでの*派生*トークン（`hsl(from var(--primary) h s calc(l + 10%))`）に有用で、真実の源の形式としてはそうではありません。2 つの形式は同じ色を記述します。選択はトークンがシステムで果たす役割についてです.

HSL バリアントをベースの hex とともに文書化する

`--primary-light: hsl(217 91% 70%)` のような CSS 変数を出荷するときは、ベースの hex を指し示すコメントを含めてください: `/* base: #3b82f6 → hsl(217 91% 60%)、明るいバリアント +10% L */`。6 か月後に誰かが `--primary-lighter` を派生したいとき、計算する元となるベースカラーが必要になります — HSL 単体ではそれが表面化しません。hex + HSL を一緒に保てば来歴が完全に保存されます.

URL ハッシュを使ってライブのカラー決定を共有する

色の変更ごとに URL ハッシュが `#hex=3b82f6` として自動更新されます。URL を Slack スレッドや GitHub Issue に貼り付ければ、開いた誰もが同じ色で同じ HSL の 3 つ組に着地します。チャットで HSL 文字列を貼り付けるよりこの方が信頼できます — 受け手が手で値を入力するときに度数をタイポしたりパーセント記号を落としたりすることがあるためです — そしてデザインレビューのスレッドで「火曜に話した青」ではなく正確な色を参照できるようにします。ハッシュはサーバーには送信されません.

よくある質問