HEX, RGB and HSL Color Codes Explained

A HEX color is written as a hash followed by six hexadecimal digits: #RRGGBB. The six digits are three pairs — red, green, and blue — and each pair is a base-16 number from 00 to FF, which is 0 to 255 in everyday decimal. So #ff0000 means red at maximum (FF = 255), green at zero, and blue at zero: pure red.

Hexadecimal uses the digits 0–9 plus the letters A–F, which lets a single pair cover all 256 values in just two characters. #ffffff is white (all channels maxed), #000000 is black (all zero), and #808080 is a mid gray (80 hex = 128). A three-digit shorthand like #f00 also exists; each digit is simply doubled, so #f00 expands to #ff0000.

RGB describes a color as three channels — red, green, and blue — each from 0 to 255, written as rgb(255, 0, 0). It is an additive model: screens emit red, green, and blue light and add them together, so more of each channel means more light. All three at full strength produce white; all at zero produce black.

The values map one-to-one with HEX — rgb(255, 0, 0) is exactly #ff0000 — so RGB is just the same numbers in decimal instead of hex. The format also has a four-value variant, rgba(255, 0, 0, 0.5), where the final number is alpha: opacity from 0 (fully transparent) to 1 (fully opaque). That makes RGBA the natural choice when you need a color to be partially see-through.

HSL stands for hue, saturation, and lightness, written as hsl(0, 100%, 50%). Hue is an angle on the color wheel from 0 to 360 degrees: 0 is red, 120 is green, 240 is blue, and 360 wraps back to red. Saturation is a percentage from 0% (gray) to 100% (fully vivid). Lightness runs from 0% (black) through 50% (the pure hue) to 100% (white).

This model is the most intuitive for adjusting an existing color. Want a lighter shade of the same red? Raise the lightness and leave hue and saturation alone. Want a muted version? Lower the saturation. So hsl(0, 100%, 50%) is the same vivid red as #ff0000 and rgb(255, 0, 0) — but nudging it to hsl(0, 100%, 70%) gives a clean pink without any guesswork about which channels to touch. Like RGB, HSL has an alpha variant, hsla().

All three formats address the same color space, so any color can be converted between them without loss: #ff0000, rgb(255, 0, 0), and hsl(0, 100%, 50%) are identical reds. HEX and RGB are essentially the same numbers in different bases, while HSL reorganizes those numbers into hue, saturation, and lightness — a conversion that involves a bit of math but is fully reversible.

In practice, HEX is the most common in CSS and design tools because it is short and easy to copy. Use RGB or RGBA when you need transparency or are computing channel values in code. Reach for HSL when you are tweaking colors by hand — building a palette, generating hover states, or deriving lighter and darker variants — because adjusting one human-friendly dimension beats juggling three raw channels.