What Is HSL?

HSL means Hue, Saturation, and Lightness. It describes a color with three values, so designers can choose and adjust colors with clear controls.

Hue

Hue tells you the basic color, such as red, green, or blue. It uses degrees from 0° to 360°, with each degree marking a position around the color wheel. Red starts at 0°, green sits near 120°, and blue sits near 240°.

Saturation

Saturation shows how strong or vivid a color looks. It uses a percentage from 0% to 100%. Zero means gray, while 100% gives the strongest color. Lower saturation creates softer colors, while higher saturation creates richer colors.

Lightness

Lightness controls how bright or dark a color appears. It uses 0% for black, 50% for the pure color, and 100% for white. Changing lightness helps designers create lighter tints and darker shades from one HSL color.

What Is HEX?

HEX means hexadecimal color code. It uses six characters to represent red, green, and blue values. For example, #FF0000 represents pure red in CSS and HTML. Each pair shows one RGB channel, so HEX gives browsers a clear color value.

HSL to HEX Conversion

HSL to HEX conversion changes a color from the HSL model into a hexadecimal RGB code. The usual path is HSL to RGB, followed by RGB to HEX. First, normalize hue, saturation, and lightness. Then calculate chroma and the temporary RGB values. Convert those values into final RGB numbers from 0 to 255. Finally, turn each RGB number into two hexadecimal characters. Join the three pairs to create the final six digit HEX code, such as #3366CC. This method keeps the same color while changing its format, so you can use the result in CSS and other design tools.

Formula for HSL to HEX

The conversion uses HSL values to calculate RGB channels. Then each RGB value changes from decimal to hexadecimal, giving the final code in the form #RRGGBB.

$C = (1 - |2L - 1|) \times S$

$X = C \times (1 - |(H/60 \bmod 2) - 1|)$

$m = L - C/2$

The RGB result then becomes a HEX code.

Step 1: Normalize HSL Values

Convert hue into a value from 0 to 360 degrees. Change saturation and lightness from percentages into decimal values between 0 and 1.

For example, HSL(240, 100%, 50%) becomes $H=240$, $S=1$, and $L=0.5$.

Step 2: Calculate Chroma

Chroma measures the color's strength before the lightness adjustment.

Use:

$C = (1 - |2L - 1|) \times S$

For HSL(240, 100%, 50%), the result is $C=1$.

Step 3: Calculate the Intermediate RGB Values

Calculate the temporary red, green, and blue values from hue and chroma. The hue determines which RGB channels receive the strongest values.

For HSL(240, 100%, 50%), the intermediate RGB values are $R'=0$, $G'=0$, and $B'=1$.

Step 4: Calculate the Final RGB Values

Add the lightness adjustment to each temporary RGB value.

Use $m=L-C/2$.

For our example, $m=0$. The final RGB values become $R=0$, $G=0$, and $B=255$ after scaling.

Step 5: Convert RGB Values to HEX

Convert each RGB value from decimal into a two character hexadecimal value.

For RGB(0, 0, 255), the values become $00$, $00$, and $FF$. Join them to create #0000FF.

Step 6: Format the HEX Color Code

Place the three hexadecimal RGB pairs after the # symbol. Keep two characters for every channel, even when a value contains only one hexadecimal digit.

The final format is #RRGGBB, such as #0000FF.

Example: Convert HSL to HEX

Convert HSL(240, 100%, 50%) into HEX.

1. Normalize the values: $H=240$, $S=1$, and $L=0.5$.
2. Calculate chroma: $C=1$.
3. Calculate temporary RGB: $R'=0$, $G'=0$, $B'=1$.
4. Apply lightness: RGB becomes $0, 0, 255$.
5. Convert RGB to HEX: $00$, $00$, and $FF$.
6. Join the values: #0000FF.

The final color is blue.

HSL to HEX Conversion Table

Note: HEX values use RGB channels. The table shows common HSL colors, but the converter can handle many valid HSL values with decimal hue, saturation, and lightness.

How to Convert HSL to HEX Programmatically

You can convert HSL to HEX with code by calculating RGB values first. JavaScript and C# can handle the same conversion steps used by an online color converter.

HSL to HEX Using C#

C# can convert HSL values to RGB and then format each RGB channel as hexadecimal. The example below accepts normalized HSL values and returns a standard six digit HEX color.

using System;

public static string HslToHex(double h, double s, double l)
{
s /= 100.0;
l /= 100.0;

double c = (1 - Math.Abs(2 * l - 1)) * s;
double x = c * (1 - Math.Abs((h / 60.0 % 2) - 1));
double m = l - c / 2;

double r = 0, g = 0, b = 0;

if (h < 60)
(r, g, b) = (c, x, 0);
else if (h < 120)
(r, g, b) = (x, c, 0);
else if (h < 180)
(r, g, b) = (0, c, x);
else if (h < 240)
(r, g, b) = (0, x, c);
else if (h < 300)
(r, g, b) = (x, 0, c);
else
(r, g, b) = (c, 0, x);

int R = (int)Math.Round((r + m) * 255);
int G = (int)Math.Round((g + m) * 255);
int B = (int)Math.Round((b + m) * 255);

return $"#{R:X2}{G:X2}{B:X2}";
}

HSL to HEX Using JavaScript

JavaScript can perform the same HSL to RGB conversion directly in a browser. The function below returns a six digit HEX color code.

function hslToHex(h, s, l) {
s /= 100;
l /= 100;

const c = (1 - Math.abs(2 * l - 1)) * s;
const x = c * (1 - Math.abs((h / 60) % 2 - 1));
const m = l - c / 2;

let r = 0, g = 0, b = 0;

if (h < 60) [r, g, b] = [c, x, 0];
else if (h < 120) [r, g, b] = [x, c, 0];
else if (h < 180) [r, g, b] = [0, c, x];
else if (h < 240) [r, g, b] = [0, x, c];
else if (h < 300) [r, g, b] = [x, 0, c];
else [r, g, b] = [c, 0, x];

const toHex = value =>
Math.round((value + m) * 255)
.toString(16)
.padStart(2, "0");

return #${toHex(r)}${toHex(g)}${toHex(b)};
}

Explore more Color Converters

Explore more Color Converters to transform HEX, RGB, and HSL values quickly for CSS, web design, and creative projects.

HEX to HSL Converter HEX to RGB Converter

HSL to RGB Converter RGB to HEX Converter RGB to HSL Converter