What is the difference between HSV and HSL?

Both models use the same Hue axis (0–360°). The difference lies in the other two channels. HSV uses Saturation (color purity relative to white) and Value (brightness, where 0 is black). HSL uses Saturation (color purity relative to a mid-gray) and Lightness (where 0 is black and 100% is white). A fully saturated, full-brightness color in HSV (S=100%, V=100%) maps to HSL Lightness of 50%.

Does the hue value change during the conversion?

No. The Hue angle is identical in both HSV and HSL — it always ranges from 0 to 360 degrees and represents the same position on the color wheel.

How is HSV converted to HSL mathematically?

Given HSV values where S and V are in [0, 1]: first compute L = V × (1 − S/2). Then compute the HSL saturation as 0 if L is 0 or 1, otherwise (V − L) / min(L, 1 − L). The hue stays the same.

Is HSV the same as HSB?

Yes. HSB (Hue, Saturation, Brightness) is an alternate name for HSV. The formulas and channel ranges are identical, so you can use HSB values directly in this converter.

What CSS function uses HSL?

CSS uses the hsl() and hsla() functions (or the modern hsl() with a slash for alpha). For example, hsl(200deg, 74%, 50%). This tool outputs values you can drop directly into those functions.

Is any data sent to a server?

No. All calculations run locally in your browser using JavaScript. Your color values never leave your device.

HSV to HSL Color Converter

Name: HSV to HSL Color Converter
Availability: InStock
Author: Nham Vu

Enter HSV values or drag the sliders and instantly see the equivalent HSL values with a live color swatch.

HSV Input

Hue

deg

Saturation

Value

Quick Presets

HSL Values

Hue

200

deg

Saturation

Lightness

hsl(200, 74%, 50%)

Conversion Formula

L = V × (1 − S/2)

S_hsl = (V − L) / min(L, 1−L) (or 0 if L=0 or L=1)

H_hsl = H_hsv

Summary

Enter HSV values or drag the sliders and instantly see the equivalent HSL values with a live color swatch.

How it works

Enter or drag the Hue slider (0–360°) to select a base color angle.
Adjust the Saturation slider (0–100%) to control color intensity in HSV.
Set the Value slider (0–100%) to control brightness in HSV.
The HSL equivalent — Hue, Saturation, and Lightness — updates instantly.
A live color swatch shows the resulting color for both formats.
Click any Copy button to copy the HSL string or individual values to your clipboard.

Use cases

Convert HSV output from Photoshop or GIMP into HSL for CSS usage.
Translate color values between design tool formats and web stylesheets.
Learn the mathematical relationship between the HSV and HSL color models.
Debug color transformations when building color pickers or palette generators.
Verify that two different color notations describe the same visible color.
Generate CSS hsl() function values from HSV color picker input.
Build design system tooling that normalizes colors across multiple models.
Quick-check color channel relationships when teaching color theory.

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu