What Is HSL?

HSL means Hue, Saturation, and Lightness. It describes colors using three values that make color selection and adjustment easier for designers.

Hue

Hue describes the basic color, such as red, green, or blue. It uses degrees from 0 to 360 on a color wheel.

Saturation

Saturation shows how strong or vivid a color looks. A value of 0% creates gray, while 100% gives the strongest color.

Lightness

Lightness controls how light or dark a color appears. A value of 0% creates black, while 100% creates white.

What Is RGB?

RGB means Red, Green, and Blue. It represents colors by combining three color channels, with each value commonly ranging from 0 to 255.

Red

Red is one of the three RGB color channels. Its value controls how much red light appears in the final digital color.

Green

Green is the second RGB color channel. Its value controls the amount of green in a digital color, from 0 to 255.

Blue

Blue is the third RGB color channel. Its value controls the amount of blue in a digital color, from 0 to 255.

HSL to RGB Conversion

HSL to RGB conversion changes Hue, Saturation, and Lightness into Red, Green, and Blue values. The process first normalizes HSL values, then calculates chroma and intermediate RGB values. It adds the lightness adjustment and changes the final values to the 0 to 255 RGB range. For example, hsl(120, 100%, 50%) converts to $rgb(0, 255, 0)$. This conversion helps designers use HSL colors in RGB based systems.

Formula

The standard conversion uses normalized values. Let $H'=H/60$, $S'=S/100$, and $L'=L/100$. Then $C=(1-|2L'-1|)S'$, $X=C(1-|((H'\bmod2)-1)|)$, and $m=L'-C/2$. The RGB sector depends on the hue. Final values use $(R'+m,G'+m,B'+m)\times255$

Step 1: Normalize HSL Values

Convert hue, saturation, and lightness into values the formula can use.

1. Divide hue by $60$.
2. Divide saturation by $100$.
3. Divide lightness by $100$.

Step 2: Calculate Chroma

Chroma measures the strength of the color.

1. Use $C=(1-|2L'-1|)S'$.
2. Use the normalized saturation and lightness values.
3. Keep $C$ between $0$ and $1$.

Step 3: Calculate the Intermediate RGB Values

Calculate the temporary RGB values using hue and chroma.

1. Calculate $X=C(1-|((H'\bmod2)-1)|)$.
2. Find the correct hue sector.
3. Assign $C$, $X$, and $0$ to the RGB channels.

Step 4: Calculate the Final RGB Values

Add the lightness adjustment to each temporary RGB channel.

1. Calculate $m=L'-C/2$.
2. Add $m$ to each RGB value.
3. Keep the resulting values between $0$ and $1$.

Step 5: Convert RGB Values to the 0–255 Range

RGB uses channel values from 0 to 255.

1. Multiply each normalized RGB value by $255$.
2. Round each result when needed.
3. Keep red, green, and blue in the $0$ to $255$ range.

Step 6: Format the RGB Value

Format the final channels as an RGB color value.

1. Place the red, green, and blue values in order.
2. Use the format $rgb(R,G,B)$.
3. Example: $rgb(0,255,0)$.

Example: Convert HSL to RGB

Convert $hsl(120,100\%,50\%)$ into RGB.

1. Normalize the values: $H'=2$, $S'=1$, and $L'=0.5$.
2. Calculate chroma: $C=1$.
3. Calculate the intermediate value: $X=1$.
4. Add the lightness adjustment: $m=0$.
5. Multiply the RGB values by $255$.
6. Final result: $rgb(0,255,0)$.

HSL to RGB Conversion Table

Note: HSL uses hue, saturation, and lightness, while RGB uses red, green, and blue values from 0 to 255.

How to Convert HSL to RGB Programmatically

You can convert HSL to RGB in code by following the same normalization, chroma, and RGB channel steps.

HSL to RGB Using C#

Use this C# method to convert HSL values into RGB channel values.

public static (int R, int G, int B) HslToRgb(
double h, double s, double l)
{
s /= 100.0;
l /= 100.0;

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

double r1, g1, b1;

if (hp < 1)
(r1, g1, b1) = (c, x, 0);
else if (hp < 2)
(r1, g1, b1) = (x, c, 0);
else if (hp < 3)
(r1, g1, b1) = (0, c, x);
else if (hp < 4)
(r1, g1, b1) = (0, x, c);
else if (hp < 5)
(r1, g1, b1) = (x, 0, c);
else
(r1, g1, b1) = (c, 0, x);

double m = l - c / 2;

int r = (int)Math.Round((r1 + m) * 255);
int g = (int)Math.Round((g1 + m) * 255);
int b = (int)Math.Round((b1 + m) * 255);

return (r, g, b);
}

HSL to RGB Using JavaScript

This JavaScript function follows the same HSL to RGB conversion method in the browser.

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

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

let r1, g1, b1;

if (hp < 1) [r1, g1, b1] = [c, x, 0];
else if (hp < 2) [r1, g1, b1] = [x, c, 0];
else if (hp < 3) [r1, g1, b1] = [0, c, x];
else if (hp < 4) [r1, g1, b1] = [0, x, c];
else if (hp < 5) [r1, g1, b1] = [x, 0, c];
else [r1, g1, b1] = [c, 0, x];

const m = l - c / 2;

return [
Math.round((r1 + m) * 255),
Math.round((g1 + m) * 255),
Math.round((b1 + m) * 255)
];
}

HSL to RGB Use Cases

HSL to RGB conversion helps designers move color values between design tools, CSS, websites, and digital projects.

Web Development

Developers use RGB values in web projects when a design tool provides HSL values. Conversion makes colors easier to reuse in code.

CSS Color Styling

CSS supports HSL and RGB color functions. Converting between them helps designers and developers use the format their project needs.

UI and UX Design

UI and UX designers can convert HSL colors when moving designs between tools. RGB values help match colors across digital interfaces.

Graphic Design

Graphic designers can convert HSL values into RGB values for digital artwork. This helps prepare colors for screens, websites, and online content.

Design Systems

Design systems often store shared color values for buttons, text, backgrounds, and states. RGB conversion helps teams reuse consistent digital colors.

Color Palette Generation

Designers can use HSL to adjust hue, saturation, and lightness, then convert selected colors into RGB values for digital palettes.

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 HEX Converter

RGB to HEX Converter RGB to HSL Converter