HSL to HSV Color Converter

Color Picker

hsl(120, 100%, 50%)

Color Shades

Color Combinations

About HSL and HSV Colors

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

HSL (Hue, Saturation, Lightness)

HSL is a cylindrical color model that represents colors in a way that's intuitive for humans. Hue represents the color type (0-360° on the color wheel), Saturation is the intensity of the color (0-100%), and Lightness is the brightness (0-100%). For example, pure green is (120°, 100%, 50%) in HSL. This model is widely used in CSS and design tools because it allows easy adjustment of colors by modifying their hue, saturation, or lightness independently.

HSV (Hue, Saturation, Value)

HSV (also called HSB) is another cylindrical color model that represents colors similarly to HSL but with a different approach to brightness. Hue represents the color type (0-360°), Saturation is the intensity (0-100%), and Value represents brightness (0-100%). Pure green is (120°, 100%, 100%) in HSV. This model is widely used in graphic design applications and color pickers because it more closely matches how humans perceive color brightness.

HSL to HSV Conversion Process

  1. Convert HSL 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 Value: V = max(R, G, B)
  5. Calculate the Saturation:
    • If V = 0: Saturation = 0
    • Otherwise: S = (max - min) / max
  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 HSL (120°, 100%, 50%) to HSV:

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

RGB = (0, 255, 0)

Normalized RGB = (0, 1, 0)

max = 1, min = 0

V = max(0, 1, 0) = 1 (100%)

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

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

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

Example #2

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

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

RGB ≈ (0, 0, 128)

Normalized RGB ≈ (0, 0, 0.5)

max ≈ 0.5, min = 0

V ≈ 0.5 (50%)

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

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

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

Common HSL to HSV Examples

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

While HSL and HSV are similar, the key difference is in how they handle brightness. In HSL, a lightness of 50% gives you the pure color, while in HSV, a value of 100% 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.

HSL to HSV FAQ

What's the difference between HSL and HSV?

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

When should I use HSV instead of HSL?

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. Use HSL when working with CSS or when you want more intuitive control over lightness variations.

Are all HSL colors perfectly convertible to HSV?

Yes, all HSL colors can be perfectly converted to HSV 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.