hsvhsl
HSV to HSL Converter
Convert a HSV colour to HSL, with a live swatch and every other notation alongside.
To convert HSV to HSL, paste your colour above — any recognisable notation is accepted, including named CSS colours — and every format is shown at once with a live swatch. HSL separates hue from saturation and lightness, which is why it is the notation to reach for when generating a tint or shade: change one number, keep the hue.
Runs in your browserAbout converting HSV to HSL
HSV is what colour pickers use internally. It differs from HSL in how it treats brightness — at full value HSV gives a pure hue, where HSL at full lightness gives white. HSL separates hue from saturation and lightness, which is why it is the notation to reach for when generating a tint or shade: change one number, keep the hue.
Share this converter
Related tools
Tailwind Colour Shade GeneratorGenerate a full 50–950 Tailwind colour scale from a single brand colour.CSS Named Colours ReferenceEvery CSS colour name with its HEX, RGB, HSL and OKLCH value, sortable by hue and contrast.CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.Glassmorphism CSS GeneratorCreate frosted-glass CSS with backdrop blur, transparency and a subtle border.CSS Gradient GeneratorBuild linear, radial and conic CSS gradients and copy the code.PX to REM ConverterConvert between pixels, rem and em using your project root font size.