What Is a Hex Color Code?

A HEX color code is a six digit hexadecimal value that represents red, green, and blue. HTML, CSS, and SVG use HEX codes to define colors, such as #FF0000 for red. Each pair controls one color channel.

What Is HSL?

HSL stands for hue, saturation, and lightness. It describes color using three values that make color changes easier for designers.

Hue

Hue shows the basic color on a 0 to 360 degree color wheel. Red sits near 0 degrees, green near 120, and blue near 240. It tells you which color family you see.

Saturation

Saturation shows how strong or dull a color looks. A value of 0% creates a gray tone, while 100% shows the strongest color. It controls color intensity without changing the basic hue.

Lightness

Lightness shows how bright or dark a color appears. A value of 0% is black, 50% shows the full color, and 100% is white. It controls the amount of black or white in the color.

HEX to HSL Conversion

Formula

The HEX to HSL process uses RGB as an intermediate step. The main formulas use maximum and minimum RGB values. Lightness uses $L = (max + min) / 2$. Saturation and hue then use these values.

Step 1: Convert HEX to RGB

1. Split the HEX code into three pairs. Each pair represents red, green, or blue. Convert each hexadecimal pair into an RGB value from 0 to 255.

Step 2: Normalize RGB Values

1. Divide each RGB channel by 255. The result changes every channel into a value between 0 and 1. This makes the HSL calculation easier.

Step 3: Calculate Lightness

1. Find the highest and lowest normalized RGB values. Add them together and divide by two. The formula is $L = (max + min) / 2$.

Step 4: Calculate Saturation

1. Find the color range with $max - min$. Then use lightness to calculate saturation. Gray colors have 0% saturation, while vivid colors can reach 100%.

Step 5: Calculate Hue

1. Identify the RGB channel with the highest value. Use that channel and the color range to calculate hue. Express the final hue as degrees from 0 to 360.

Step 6: Format the HSL Value

1. Convert hue to degrees and saturation and lightness to percentages. Then format the result as $HSL(hue°, saturation%, lightness%)$.

Example: Convert HEX to HSL

For #FF0000, the RGB value is `$255, 0, 0$. After normalization, the values become `$1, 0, 0$. The final HSL value is $HSL(0°, 100%, 50%)$.

HEX to HSL Conversion Table

Note: HSL values may use rounded decimals. The displayed result can vary slightly with rounding rules.

How to Convert HEX to HSL Programmatically

You can convert HEX colors in your own applications with C# or JavaScript. The basic process remains the same: HEX to RGB, then RGB to HSL.

HEX to HSL Using C#

using System;
using System.Drawing;

Color color = ColorTranslator.FromHtml("#3498DB");

double r = color.R / 255.0;
double g = color.G / 255.0;
double b = color.B / 255.0;

double max = Math.Max(r, Math.Max(g, b));
double min = Math.Min(r, Math.Min(g, b));
double lightness = (max + min) / 2;

Console.WriteLine($"HSL conversion: L = {lightness:P1}");

This example reads a HEX color and extracts normalized RGB values. You can then apply the standard HSL formulas for hue and saturation.

HEX to HSL Using JavaScript#

function hexToRgb(hex) {
const value = hex.replace("#", "");
return {
r: parseInt(value.slice(0, 2), 16),
g: parseInt(value.slice(2, 4), 16),
b: parseInt(value.slice(4, 6), 16)
};
}

JavaScript can read each HEX pair and convert it into RGB values. You can then normalize those values and calculate HSL.

HEX to HSL Use Cases

HEX to HSL conversion helps designers adjust colors, write CSS, build interfaces, create graphics, and manage consistent design systems.

Web Development

Developers use HEX and HSL colors in HTML, CSS, and SVG. HSL makes color changes easier when you need to adjust lightness or saturation.

CSS Color Styling

CSS supports HSL color values, so designers can set hue, saturation, and lightness directly. This makes color styling and controlled color changes easier.

UI and UX Design

HSL helps UI and UX designers create color variations for buttons, backgrounds, states, and themes while keeping the base color consistent.

Graphic Design

Graphic designers can convert HEX colors into HSL values to study color relationships and adjust brightness or color strength with more control.

Design Systems

Design systems can store color values in HEX and HSL. Teams can reuse base colors while creating consistent lighter, darker, or softer variations.

Color Palette Generation

HSL values help generate related palette colors by changing hue, saturation, or lightness. This supports brand palettes, themes, and visual color sets.

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 RGB Converter HSL to HEX Converter

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