HSB to HSL Converter

Convert HSB (HSV) color values to HSL with live, two-way sliders.

Enter a color

°
%
%
#3B82F6
 
  • HEX
  • RGB
  • HSL
  • HSB
  • HSV
  • CMYK
Copy HSL Copy Link

Contrast & Accessibility WCAG ratio of this color used as text

Aa ——on white
Aa ——on black

Shades & Tints click any swatch to load it

Shades (toward black)
Tints (toward white)

Color Harmonies based on the current Hue

Complementary
 
Analogous
  
Triadic
  
Split Complementary
  
Tetradic
   

About the HSB to HSL Converter

What is HSB to HSL conversion?

HSB — also called HSV — describes a color with Hue, Saturation, and Brightness, the way design apps do. HSL swaps the third value for Lightness and is the form CSS understands natively. The two share a Hue but their Saturation and third values usually differ, so you can't just reuse the numbers. This converter does the math and also shows HEX, RGB, and CMYK with a live preview.

The big reason to convert is CSS: HSB isn't a valid CSS color, but HSL is, so turning your design-app HSB color into HSL gives you something you can paste straight into a stylesheet. Drag the Hue, Saturation, and Brightness sliders and the HSL equivalent updates instantly. It all runs in your browser.

How to Use This Tool

  1. Set your HSB color. Drag the Hue, Saturation, and Brightness sliders, or type exact values.
  2. Read the HSL value. The matching hsl() appears at the top and updates live, ready for CSS.
  3. Or start from HEX. Paste a HEX code and the HSB sliders snap to match.
  4. Take what you need. Copy HSL, HEX, RGB, or CMYK, and explore the shades and harmonies.

Common Use Cases

  • Design tools to CSS: Convert a Photoshop or Figma HSB color into an hsl() for your stylesheet.
  • Building variants: Once in HSL, change only the Lightness for hover and disabled states.
  • Comparing models: See the same color in HSB and HSL side by side.
  • Checking contrast: See how the color scores as text on white and black.

Need the reverse or another model? Use our HSL to HSB converter, the HSB to HEX converter, or browse all our free color tools.

Frequently Asked Questions

Can I use HSL in CSS but not HSB?

Correct. HSL is a native CSS color format, so the hsl() value here pastes straight into a stylesheet. HSB (HSV) has no CSS function, which is the main reason to convert.

Is HSB the same as HSV?

Yes — HSB (Brightness) and HSV (Value) are two names for the same model, so this tool works for either.

Why aren't the Saturation numbers identical?

HSL and HSB measure Saturation against different references, so the same color often has different Saturation values in each. The conversion handles that correctly.

Is this tool free and private?

Completely. The conversion runs entirely in your browser with JavaScript, so your colors are never uploaded or logged, and it works offline once loaded.