HEX vs RGB vs HSL: Which Color Format Should You Use in CSS?

#color #webdev #programming #tutorial

CSS lets you write the same color in several ways. They all produce the same pixels, so the difference is how convenient each format is to read and tweak. Understanding all three makes it easier to work with design tools, browser dev tools, and code.

The same color in three formats

#4338ca
rgb(67, 56, 202)
hsl(245, 58%, 51%)

HEX

Six hexadecimal digits: two each for red, green, and blue (00 to ff, which is 0 to 255).
#4338ca means red 0x43 = 67, green 0x38 = 56, blue 0xca = 202.
Shorthand: #fff is #ffffff when each pair repeats.
An eight-digit form adds alpha (opacity): #4338ca80 is about 50% opaque.
Compact and universal, but hard to adjust by eye.

RGB

Three channels from 0 to 255: rgb(67, 56, 202).
Modern CSS also accepts the space-separated form with slash-alpha: rgb(67 56 202 / 50%).
It mirrors how screens mix light, but it isn't intuitive for making a color lighter or more muted.

HSL

Hue is an angle on the color wheel (0 to 360): 0 is red, 120 green, 240 blue.
Saturation is how vivid the color is (0% is gray, 100% is full color).
Lightness runs from 0% (black) to 100% (white), with 50% being the pure color.
hsl(245 58% 51%) reads as a medium-bright, fairly saturated blue-violet.

Why HSL is great for palettes

With HSL you can make systematic variations by changing one number: raise lightness for a hover tint, lower it for a pressed state, reduce saturation for a muted variant, and keep the hue the same so the family stays consistent. Doing that in hex or RGB means recalculating three channels.

.btn        { background: hsl(245 58% 51%); }
.btn:hover  { background: hsl(245 58% 45%); }
.btn:active { background: hsl(245 58% 40%); }

Which should you use?

Use whichever format your tools output for static values, and prefer HSL (or CSS custom properties holding the hue) when you need to generate variations. There is no performance difference.

Frequently asked questions

How do I convert HEX to RGB?

Split the hex code into three pairs and convert each from base 16 to decimal. #4338ca becomes 67, 56, 202.

What does HSL stand for?

Hue, Saturation, and Lightness.

How do I add transparency to a hex color?

Append two hex digits for alpha, such as #4338ca80, or use rgb() or hsl() with a slash and a percentage.

Are HEX, RGB, and HSL the same color?

Yes, they are different notations for colors in the sRGB space, so the same color renders identically.

Try it: Color Picker & Palette — free, runs in your browser, nothing is uploaded.

Originally published at ilovekit.app.

DEV Community