What Is RGB?

RGB stands for red, green, and blue. Each channel uses values from 0 to 255. Mixing these channels creates millions of colors for screens and designs.

Red

Red is the first RGB channel and controls red light. Its value runs from 0 to 255. Higher values add more red, while lower values reduce red in the final digital color. It changes the final color mix.

Green

Green is the second RGB channel and controls green light. Its value runs from 0 to 255. Higher values add more green, helping create lime, yellow, teal, and other colors. It changes the final color mix.

Blue

Blue is the third RGB channel and controls blue light. Its value runs from 0 to 255. Higher values add more blue, helping create blue, purple, cyan, and mixed colors. It changes the final color mix.

RGB to HSL Conversion

RGB to HSL conversion changes RGB channel values into hue, saturation, and lightness. First, divide red, green, and blue by 255. Then find the maximum, minimum, and difference. Use those values to calculate lightness, saturation, and hue. The final hue uses degrees, while saturation and lightness use percentages. For example, $RGB(255, 0, 0)$ becomes HSL(0, 100%, 50%). The steps below show the standard calculation in a simple way. This method keeps the same color while changing its description.

Formula

Use these values after normalizing RGB:

$R' = R / 255$

$G' = G / 255$

$B' = B / 255$

Then calculate:

$C_{max} = max(R', G', B')$

$C_{min} = min(R', G', B')$

$\Delta = C_{max} - C_{min}$

$L = (C_{max} + C_{min}) / 2$

The hue and saturation formulas depend on the largest RGB channel.

Step 1: Normalize the RGB Values

1. Divide red, green, and blue by 255.
2. Use the results as decimal values between 0 and 1.
3. These normalized values make the HSL calculation easier.

Step 2: Find the Maximum and Minimum RGB Values

1. Compare the three normalized RGB values.
2. Find the highest value as $C_{max}$.
3. Find the lowest value as $C_{min}$.
4. Calculate the difference with $\Delta = C_{max} - C_{min}$.

Step 3: Calculate Lightness

Use the maximum and minimum values to find lightness.

$L = (C_{max} + C_{min}) / 2$

Multiply the result by 100 to show lightness as a percentage.

Step 4: Calculate Saturation

When $\Delta = 0$, saturation equals 0%.

Otherwise, use the correct saturation formula based on lightness:

$S = \Delta / (C_{max} + C_{min})$ when $L < 0.5$

$S = \Delta / (2 - C_{max} - C_{min})$ when $L \geq 0.5$

Multiply $S$ by 100 for the final percentage.

Step 5: Calculate Hue

Find which RGB channel has the highest value.

If red is highest:

$H = 60 \times ((G' - B') / \Delta)$

If green is highest:

$H = 60 \times (((B' - R') / \Delta) + 2)$

If blue is highest:

$H = 60 \times (((R' - G') / \Delta) + 4)$

Add 360 degrees when the result is negative.

Step 6: Format the HSL Value

Round the hue to degrees when needed. Format saturation and lightness as percentages. Then combine them into this format:

HSL(H, S%, L%)

For CSS, you can also use modern syntax such as hsl(H S% L%).

Example: Convert RGB to HSL

Take $RGB(255, 0, 0)$.

The normalized values are $R'=1$, $G'=0$, and $B'=0$.

Here, $C_{max}=1$, $C_{min}=0$, and $\Delta=1$.

Lightness becomes $L=50$.

Saturation becomes $S=100$.

Red is the highest channel, so hue becomes $H=0°$.

The final result is HSL(0, 100%, 50%).

RGB to HSL Conversion Table

Note: HSL uses hue from 0 to 360 degrees, while saturation and lightness use 0% to 100%.

How to Convert RGB to HSL Programmatically

You can convert RGB values with common programming languages. The same normalization, maximum, minimum, and HSL formulas apply.

RGB to HSL Using C#

using System;

public static class ColorConverter
{
public static (double H, double S, double L) RgbToHsl(
int r, int g, int b)
{
double red = r / 255.0;
double green = g / 255.0;
double blue = b / 255.0;

double max = Math.Max(red, Math.Max(green, blue));
double min = Math.Min(red, Math.Min(green, blue));
double delta = max - min;

double h = 0;
double s;
double l = (max + min) / 2.0;

if (delta == 0)
{
s = 0;
}
else
{
s = l > 0.5
? delta / (2.0 - max - min)
: delta / (max + min);

if (max == red)
h = ((green - blue) / delta) % 6;
else if (max == green)
h = ((blue - red) / delta) + 2;
else
h = ((red - green) / delta) + 4;

h *= 60;

if (h < 0)
h += 360;
}

return (h, s * 100, l * 100);
}
}

This function accepts RGB values from 0 to 255. It returns hue in degrees and saturation and lightness as percentages.

RGB to HSL Using JavaScript

function rgbToHsl(r, g, b) {
r /= 255;
g /= 255;
b /= 255;

const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const delta = max - min;

let h = 0;
let s = 0;
const l = (max + min) / 2;

if (delta !== 0) {
s = l > 0.5
? delta / (2 - max - min)
: delta / (max + min);

if (max === r) {
h = ((g - b) / delta) % 6;
} else if (max === g) {
h = (b - r) / delta + 2;
} else {
h = (r - g) / delta + 4;
}

h *= 60;

if (h < 0) h += 360;
}

return {
h: h,
s: s * 100,
l: l * 100
};
}

The JavaScript function follows the same RGB to HSL conversion steps used by the online converter.

RGB to HSL Use Cases

RGB to HSL conversion helps designers adjust colors with clear hue, saturation, and lightness values across websites, interfaces, graphics, and design systems.

Web Development

Convert screen colors into HSL values when building websites. HSL makes color adjustments easier for buttons, links, backgrounds, and themes.

CSS Color Styling

Use HSL in CSS to control hue, saturation, and lightness. It helps you create related shades without changing every RGB channel.

UI and UX Design

HSL helps UI and UX designers create hover, active, disabled, and focus colors. Adjust lightness or saturation to build clear interface states.

Graphic Design

Graphic designers can convert RGB colors into HSL for easier color adjustments. This helps create shades, tones, and balanced color variations.

Design Systems

Design systems can use HSL to define flexible color tokens. Teams can adjust lightness and saturation while keeping a consistent hue.

Color Palette Generation

Use HSL values to build color palettes with controlled shades and tones. Change lightness or saturation to create related colors quickly.

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

HSL to RGB Converter RGB to HEX Converter