How to Convert HEX to RGB and HSL

A HEX color like #4A90E2 is just RGB written in base 16. After the hash, the six digits split into three pairs: the first two are red, the next two are green, and the last two are blue. Each pair is a two-digit hex number that packs one channel as a value from 00 to FF, which is 0 to 255 in decimal.

Because two hex digits cover exactly 0-255, every channel has 256 possible levels and the full code describes about 16.7 million colors. Shorthand codes like #FFF simply double each digit, so #FFF expands to #FFFFFF. Knowing this structure makes conversion to RGB almost mechanical: you are only changing the number base, not the color.

To convert a pair to decimal, multiply the first hex digit by 16 and add the second. Hex letters A through F stand for 10 through 15. So 4A becomes 4 times 16 plus 10, which is 74. Repeat for the green and blue pairs and you have a clean rgb() value ready to paste into CSS.

HSL describes a color as hue, saturation, and lightness. Hue is an angle from 0 to 360 degrees around a color wheel, where 0 is red, 120 is green, and 240 is blue. Saturation runs from 0 percent (gray) to 100 percent (vivid), and lightness runs from 0 percent (black) to 100 percent (white).

HSL is easier to reason about when you want to adjust a color rather than pick one from scratch. Nudging lightness up gives a tint, dropping saturation mutes a shade, and rotating hue shifts the whole family. That makes HSL a favorite for building consistent themes and hover states.

HEX is compact and universal, so it is the default in most design tools and CSS. RGB is handy when you need to tweak a single channel or work with rgba() transparency. HSL wins when you want intuitive control over brightness and vividness.

All three describe the same colors, so pick by task rather than loyalty. A good converter lets you jump between them freely, which keeps your workflow flexible whether you are matching a brand color, checking contrast, or generating a palette.