HEX to HSL Converter

Translate hex color values into HSL (Hue, Saturation, Lightness) format. Perfect for creating intuitive color variations, hover states, and lighter or darker UI tones.

How does HEX to HSL conversion work?

HSL stands for Hue, Saturation, and Lightness. Converting from HEX first extracts the RGB values, then derives H, S, and L mathematically. Hue is the position on the color wheel (0–360°), saturation is how vivid the color is (0–100%), and lightness controls brightness (0–100%).

For #2563EB: the RGB is 37, 99, 235. After normalization and channel math, this gives hsl(221, 83%, 53%).

Why use HSL instead of HEX or RGB?

HSL is the most human-readable color format. To make a color lighter, increase L. For a less vivid version, decrease S. With HEX or RGB you'd have to recalculate all three channels — making HSL ideal for design systems and CSS custom properties.

Yellow Color Codes

Common Yellow web colours with their HEX, RGB, and HSL equivalents.

Colour name	Hex code	RGB value	HSL value
Yellow	`#FFFF00`	`rgb(255, 255, 0)`	`hsl(60, 100%, 50%)`
Light Yellow	`#FFFFE0`	`rgb(255, 255, 224)`	`hsl(60, 100%, 94%)`
Lemon Chiffon	`#FFFACD`	`rgb(255, 250, 205)`	`hsl(54, 100%, 90%)`
Canary Yellow	`#FFEF00`	`rgb(255, 239, 0)`	`hsl(56, 100%, 50%)`
Gold	`#FFD700`	`rgb(255, 215, 0)`	`hsl(51, 100%, 50%)`
Goldenrod	`#DAA520`	`rgb(218, 165, 32)`	`hsl(43, 74%, 49%)`
Dark Goldenrod	`#B8860B`	`rgb(184, 134, 11)`	`hsl(43, 89%, 38%)`
Mustard	`#FFDB58`	`rgb(255, 219, 88)`	`hsl(47, 100%, 67%)`
Amber	`#FFBF00`	`rgb(255, 191, 0)`	`hsl(45, 100%, 50%)`
Cream	`#FFFDD0`	`rgb(255, 253, 208)`	`hsl(57, 100%, 91%)`
Moccasin	`#FFE4B5`	`rgb(255, 228, 181)`	`hsl(38, 100%, 85%)`
Khaki	`#F0E68C`	`rgb(240, 230, 140)`	`hsl(54, 77%, 75%)`
Peach Puff	`#FFDAB9`	`rgb(255, 218, 185)`	`hsl(28, 100%, 86%)`

Colors with RGB, HEX, and HSL values

Gold Colors Green Colors Pink Colors Brown Colors Orange Colors Blue Colors Purple Colors Yellow Colors Spring Colors True Summer Color Palette Fall / Autumn Colors Dark Winter Color Palette

Frequently asked questions

Why do hue 0° and 360° both mean red?

The hue axis wraps around like a color wheel — 0 and 360 are the same point. The scale runs red → yellow → green → cyan → blue → magenta → back to red.

What does saturation 0% mean?

At S = 0%, the color is fully desaturated — it becomes a shade of gray regardless of hue, determined entirely by lightness.

Is HSL the same as HSV or HSB?

No. In HSL, L = 50% with full saturation gives a pure hue. In HSV/HSB, V = 100% at full saturation gives the same. They model the same RGB cube differently.