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

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%); }