Explainer1 min readUpdated June 29, 2026

HEX, RGB, and HSL color codes explained

Short answer

HEX, RGB, and HSL all describe screen colors. HEX and RGB set the amounts of red, green, and blue; HSL sets hue, saturation, and lightness. They are interchangeable ways to write the same color.

RGB: amounts of light

Screens make color by mixing red, green, and blue light. RGB sets each channel from 0 to 255, so rgb(37, 99, 235) is a fair amount of blue with some green and a little red.

HEX: the same numbers in base 16

A HEX code is just RGB written in hexadecimal. Each pair of digits is one channel: #2563EB is 25, 63, EB in hex, which equals 37, 99, 235 in decimal. See What is hexadecimal?.

#2563EB  =  rgb(37, 99, 235)  =  hsl(221, 83%, 53%)

One color, three notations

HSL: hue, saturation, lightness

HSL describes color the way people think about it: hue is the position on the color wheel (0-360), saturation is how vivid it is, and lightness is how bright. It makes tweaks intuitive, such as lowering lightness for a darker shade.

Alpha for transparencyEach notation has a variant with an alpha channel for opacity: an 8-digit HEX, rgba(), or hsla(), where alpha runs from 0 (transparent) to 1 (opaque).

Try it: Image Color PickerPick a color from an image and read its HEX and RGB values locally.Open tool

References

Questions

Are HEX and RGB the same color?

Yes. HEX is simply RGB written in hexadecimal. #FF0000 and rgb(255, 0, 0) are the identical red.

When should I use HSL?

HSL is handy when you want to adjust a color by hand, such as making it lighter or less saturated, because those map to single, intuitive numbers.

Does the color picker upload my image?

No. The image is read locally in your browser to sample colors and is never uploaded.