HSVからHSLへ

デザインシステムで多彩なカラー操作を実現するために、HSV カラー値を HSL に変換します。

直感的なカラーモデルを変換してデザインの柔軟性を向上

カラーコンバーター

HSL Output

hsl(0°, 100%, 50%)

HSL Values

色相 0°

0-360° color wheel position

飽和 100%

0-100% color intensity

軽さ 50%

0-100% brightness

hsl(0°, 100%, 50%)

追加のフォーマット

HSV Value

hsv(0°, 100%, 100%)

RGB Value

rgb(255, 0, 0)

CSSの使用法

color: hsl(0°, 100%, 50%);
background-color: hsl(0°, 100%, 50%);

コンバージョンインサイト

この鮮やかな赤は、両方のカラーモデルで完全な彩度を維持していますが、明度の測定値が異なり、値 (HSV) と明度 (HSL) の主な違いがわかります。

変換例

鮮やかな赤

HSV 0°, 100%, 100%

HSL 0°, 100%, 50%

違い明度 = 値の 50%

フォレストグリーン

HSV 120°, 75%, 55%

HSL 120°, 60%, 35%

違い明度スケールに合わせて調整

ロイヤルブルー

HSV 220°, 75%, 88%

HSL 220°, 70%, 55%

違い知覚に合わせてバランスのとれた明るさ

ソフトピンク

HSV 340°, 40%, 95%

HSL 340°, 70%, 80%

違い HSLで彩度が上昇

落ち着いた紫

HSV 270°, 30%, 70%

HSL 270°, 30%, 60%

違い明るさを下げました

グレートーン

HSV 0°, 0%, 50%

HSL 0°, 0%, 50%

違いグレースケールの場合も同様

推奨ツール

HSL to HSV Converter

HSLカラー値をHSVに変換して、別のカラー操作を行う

カラーハーモニージェネレーター

HSLベースの色関係を使用してバランスの取れた配色を作成する

HSL Color Scales

HSL調整を使用して、任意の色の色合い、色調、トーンを生成します

カラーモデルコンパレータ

HSV、HSL、RGB、CMYK モデルで色がどのように表示されるかを視覚化します

このツールについて

この HSV から HSL へのコンバーターは、さまざまなデザインタスクとワークフローにそれぞれ異なる利点を持つ 2 つの直感的なカラーモデル間のシームレスな移行を可能にします。

HSV (Hue, Saturation, Value) represents colors based on human perception, with Value controlling the brightness from black to full color. This makes it particularly intuitive for tasks like adjusting lightness while preserving chromatic intensity, common in interface design.

HSL (Hue, Saturation, Lightness) structures color around perceived lightness, with Lightness ranging from black through the pure color to white. This model excels at creating consistent color scales and harmonies, as equal increments in lightness produce perceptually consistent steps.

どちらのモデルも色相と彩度の要素は共通していますが、明度（明度と明度）の扱い方が根本的に異なります。このコンバーターは、精密な数学的アルゴリズムを用いてこれらのモデル間の変換を行いながら、視覚的な一貫性を維持します。これにより、デザイナーはワークフロー全体を通して各モデルの長所を活用できます。