HSV to HSL Color Converter

Color Picker

hsv(120, 100%, 100%)

Color Shades

Color Combinations

About HSV and HSL Colors

HSV (Hue, Saturation, Value) and HSL (Hue, Saturation, Lightness) are two similar but distinct cylindrical color models used in digital design.

HSV (Hue, Saturation, Value)

HSV (also called HSB) is a cylindrical color model that represents colors in a way that closely matches how humans perceive color. Hue represents the color type (0-360° on the color wheel), Saturation is the intensity of the color (0-100%), and Value represents brightness (0-100%). For example, pure green is (120°, 100%, 100%) in HSV. This model is widely used in graphic design applications and color pickers because it provides intuitive control over color brightness.

HSL (Hue, Saturation, Lightness)

HSL is another cylindrical color model that represents colors similarly to HSV but with a different approach to brightness. Hue represents the color type (0-360°), Saturation is the intensity (0-100%), and Lightness represents how much white or black is mixed with the color (0-100%). Pure green is (120°, 100%, 50%) in HSL. This model is widely used in CSS and web design because it allows easy adjustment of colors by modifying their hue, saturation, or lightness independently.

HSV to HSL Conversion Process

  1. Convert HSV to RGB values (each component 0-255)
  2. Normalize the RGB values to the range 0-1 by dividing by 255
  3. Find the maximum and minimum values among R, G, and B
  4. Calculate the Lightness: L = (max + min) / 2
  5. Calculate the Saturation:
    • If max = min: Saturation = 0
    • Otherwise:
      • If L ≤ 0.5: S = (max - min) / (max + min)
      • If L > 0.5: S = (max - min) / (2 - max - min)
  6. Calculate Hue based on which component is max:
    • Red: H = (G - B) / (max - min)
    • Green: H = 2 + (B - R) / (max - min)
    • Blue: H = 4 + (R - G) / (max - min)
  7. Convert Hue to degrees (0-360) and round all values

Example #1

Convert pure green HSV (120°, 100%, 100%) to HSL:

HSV = (120°, 100%, 100%)

RGB = (0, 255, 0)

Normalized RGB = (0, 1, 0)

max = 1, min = 0

L = (1 + 0)/2 = 0.5 (50%)

S = (1 - 0)/(2 - 1 - 0) = 1 (100%)

H = 2 + (0 - 0)/(1 - 0) = 2 (120°)

HSL = (120°, 100%, 50%)

Example #2

Convert dark blue HSV (240°, 100%, 50%) to HSL:

HSV = (240°, 100%, 50%)

RGB ≈ (0, 0, 128)

Normalized RGB ≈ (0, 0, 0.5)

max ≈ 0.5, min = 0

L ≈ (0.5 + 0)/2 ≈ 0.25 (25%)

S ≈ (0.5 - 0)/(0.5 + 0) ≈ 1 (100%)

H ≈ 4 + (0 - 0)/(0.5 - 0) ≈ 4 (240°)

HSL ≈ (240°, 100%, 25%)

Common HSV to HSL Examples

  • hsv(0, 0%, 100%) → (0°, 0%, 100%) (white)
  • hsv(0, 0%, 0%) → (0°, 0%, 0%) (black)
  • hsv(0, 100%, 100%) → (0°, 100%, 50%) (red)
  • hsv(120, 100%, 100%) → (120°, 100%, 50%) (green)
  • hsv(240, 100%, 100%) → (240°, 100%, 50%) (blue)
  • hsv(60, 100%, 100%) → (60°, 100%, 50%) (yellow)
  • hsv(180, 100%, 100%) → (180°, 100%, 50%) (cyan)
  • hsv(300, 100%, 100%) → (300°, 100%, 50%) (magenta)
  • hsv(0, 0%, 50%) → (0°, 0%, 50%) (gray)

While HSV and HSL are similar, the key difference is in how they handle brightness. In HSV, a value of 100% gives you the pure color, while in HSL, a lightness of 50% gives you the pure color. This makes HSV more intuitive for color selection in design applications, while HSL is often preferred for CSS color manipulation.

HSV to HSL FAQ

What's the difference between HSV and HSL?

The main difference is in how they represent brightness. In HSV, value represents the brightness of the color (100% is the pure color). In HSL, lightness represents how much white or black is mixed with the color (50% is the pure color). HSV is more commonly used in color pickers, while HSL is more common in CSS.

When should I use HSL instead of HSV?

Use HSL when working with CSS or web design, or when you want more intuitive control over lightness variations. Use HSV when working with graphic design tools that use this model (like Photoshop), or when you want color selection that more closely matches how humans perceive brightness.

Are all HSV colors perfectly convertible to HSL?

Yes, all HSV colors can be perfectly converted to HSL because both are based on the RGB color model. The conversion is mathematically precise, though the visual appearance may differ slightly due to the different ways they represent brightness.

Which color model is better for creating color variations?

HSL is generally better for creating systematic lightness variations (like creating a darker version of a color), while HSV is better for maintaining color vibrancy while adjusting brightness. Many designers find HSV more intuitive for color selection, while HSL is better for programmatic color manipulation.