HEX to HSL/HSB Converter

Convert hexadecimal color codes to HSL and HSB/HSV color formats

HEX Color Code:

Enter a HEX color code with or without the # symbol (e.g., #4287f5 or 4287f5)

HSL Result:

hsl(217, 90%, 61%)

HSB/HSV Result:

hsv(217, 73%, 96%)

HSL Values:

H: 217°

S: 90%

L: 61%

HSB/HSV Values:

H: 217°

S: 73%

B/V: 96%

Color Preview:

About HEX to HSL/HSB Conversion

Understanding the conversion between HEX and HSL/HSB color formats

HEX (hexadecimal) is a color format commonly used in web design and CSS. It represents colors using a combination of 6 hexadecimal digits:

• The first two digits represent the red component (00-FF)

• The middle two digits represent the green component (00-FF)

• The last two digits represent the blue component (00-FF)

For example, #4287f5 represents a blue color.

HSL (Hue, Saturation, Lightness) is a color format that represents colors in a more intuitive way:

• Hue: 0-360° (color wheel position)

• Saturation: 0-100% (color intensity)

• Lightness: 0-100% (brightness, with 0% being black and 100% being white)

HSL makes it easier to adjust colors by changing specific properties like hue or lightness.

HSB (Hue, Saturation, Brightness) or HSV (Hue, Saturation, Value) is similar to HSL but with a different approach to brightness:

• Hue: 0-360° (same as HSL)

• Saturation: 0-100% (color intensity)

• Brightness/Value: 0-100% (with 0% being black and 100% being the full color)

HSB/HSV is often used in graphic design software like Adobe Photoshop.

• HSL is more intuitive for adjusting lightness independently of saturation

• HSB/HSV is useful when you want to maintain the visual perception of a color while adjusting its brightness

• HSL is commonly used in web development (CSS supports HSL)

• HSB/HSV is often used in design software and color pickers