Enter HSL Values
Input or choose HSL values
See Results
View HSV and other formats
Copy or Use
Copy, save, or reuse your color
Choose a color visually, use sliders, or paste a value.
Quick Presets
hsv(9, 72%, 100%)
tomato
PreviewOriginal
rgb(255, 99, 71)
Lighten 20%
rgb(255, 130, 108)
Darken 20%
rgb(204, 79, 57)
Complementary
rgb(71, 227, 255)
Aa
With White Text
Aa
With Black Text
Other Formats
Color Palette
Did you know?
You can pick a color from your screen in browsers that support the EyeDropper API.
HSL and HSV agree on hue but disagree on saturation and brightness models. Use this tool when porting CSS hsl() values into a picker, a shader, or a design tool that expects HSV. The hue stays put while the saturation number is recomputed against the value channel.
HSL saturation describes distance from grey at a given lightness, whereas HSV saturation describes distance from grey at the brightest peak. Identical colors yield different saturation percentages in each model.
Need more notations? Open the Color Converter for HEX, RGB, HSL, LAB, OKLAB, and OKLCH, or use the Color Contrast Checker to validate foreground/background pairs before shipping.
They describe the same colors but with different saturation and brightness models, so the numbers usually differ even when the visual color is identical.
No. Hue is preserved exactly across the conversion.
HSV measures saturation relative to the brightest possible value, while HSL measures it relative to a midpoint, so the conventions disagree on the scale.