Output Color

Loading… Please Wait

About HWB to HSL Converter

Input an HWB value like hwb(60deg 0% 0% / 0.5) and Diversify India’s HWB to HSL converter will convert this value to an HSL color like hsl(60deg, 100%, 75%).

Additionally, we can even specify a background color in RGBA format. Diversify India’s HWB to HSL converter will mix these foreground and background colors to get the resultant HSL color.

HWB color parameters are hue, whiteness, blackness, and alpha. The output HSL color parameters are hue, saturation, and lightness.

What is HWB?

HWB stands for Hue, Whiteness, and Blackness. This color model is used in web design and graphics to define colors based on hue (angle on the color wheel), the amount of white (whiteness), and the amount of black (blackness). The hue ranges from 0 to 360, while whiteness and blackness are percentages from 0% to 100%.

What is HSL?

In HSL, H is Hue, S is Saturation, and L is Lightness. This color model is used in web design and graphics to define colors in terms of their hue (angle on the color wheel), saturation (intensity), and lightness (brightness). Hue spans 0 to 360 degrees, with saturation and lightness both ranging from 0 to 100%.

Why Convert HWB to HSL?

Converting HWB to HSL is useful for design and development tasks that need colors represented by hue, saturation, and lightness. The HSL format provides an intuitive way to manipulate color properties, which can be more useful for creating harmonious color schemes compared to the HWB model.

How to Convert HWB to HSL

To convert HWB to HSL, you need to transform the hue, whiteness, and blackness values to their equivalent RGB values (refer to our HWB to RGB article), then convert these RGB values to an HSL code (refer to our RGB to HSL article).

List of Color Tools