Hex, RGB and HSL Color Explained

RGB: mixing light

RGB describes a color as three numbers: how much red, green and blue light to mix, each on a scale from 0 to 255. The model is additive — you start from black and add light. rgb(255, 0, 0) is pure red, rgb(0, 255, 0) is pure green, rgb(0, 0, 255) is pure blue, and rgb(255, 255, 255) is white, because all three channels at full strength make white light. Black is rgb(0, 0, 0): no light at all.

The range 0–255 is no accident: each channel is one byte, so the full RGB model describes 256 × 256 × 256 — about 16.7 million colors. A fourth channel, alpha, adds transparency: rgba(79, 70, 229, 0.5) is the same indigo at 50% opacity, letting whatever sits behind it show through. RGB is the native language of screens, which is why it is the default in CSS, image editors and design tools.

Hex: RGB in shorthand

A hex color is RGB written in hexadecimal: #RRGGBB, where each pair of hex digits is one channel. The indigo #4F46E5 breaks down as 4F red (79), 46 green (70) and E5 blue (229) — exactly the same numbers as rgb(79, 70, 229). Hex is simply the more compact way to write the same three bytes, and it is the form developers paste into CSS most often.

Hex has two shorthands worth knowing. The three-digit form repeats each digit: #fff means #ffffff (white) and #09c means #0099cc. An eight-digit hex adds an alpha channel at the end: #4F46E580 is the same indigo at 50% opacity. Letter case does not matter — #4f46e5 and #4F46E5 are identical — and most teams write hex in uppercase or lowercase consistently, purely as a style choice.

#4F46E5        = rgb(79, 70, 229)
#FF0000        = rgb(255, 0, 0)   red
#00FF00        = rgb(0, 255, 0)   green
#FFFFFF        = rgb(255, 255, 255) white
#4F46E580      = same indigo, 50% opacity

HSL: thinking like a human

HSL describes a color the way people think about it: hue, saturation and lightness. Hue is an angle on the color wheel, from 0° (red) through 120° (green) and 240° (blue) back to 360° (red again). Saturation is how vivid the color is, from 0% (grey) to 100% (full color). Lightness is how bright it is, from 0% (black) through 50% (the pure color) to 100% (white).

HSL shines when you need to adjust a color. "Make this 10% lighter" is one number change in HSL — lightness 59% becomes 69% — while in RGB or hex you would have to recalculate all three channels. That is why designers build palettes in HSL: pick a hue, then vary lightness and saturation to get a whole family of matching shades. A color converter translates the result back into hex or RGB when it is time to write the CSS.

Converting between them

The three notations are different spellings of the same color, so converting is exact — with one caveat. Hex to RGB is trivial: split the six digits into three pairs and read each as a base-16 number. RGB to hex is the same step in reverse. HSL conversions involve more math, and converting back and forth can shift a channel value by one because of rounding: a color converted from HSL to RGB and back to HSL may come back as 238.6° instead of 239°.

In practice, nobody converts by hand. A color converter takes any notation and produces the others, and most design tools let you type in whichever form you have and copy out whichever form you need. The habit that matters is consistency: store your palette in one notation — hex is the common choice for code, HSL for design tokens — and convert only at the edges.

Choosing colors that work

A color that looks good in a picker can fail on a real page, and the most common failure is contrast. Text needs enough contrast against its background to be readable, and the WCAG accessibility standard quantifies it: a contrast ratio of at least 4.5:1 for normal text, 3:1 for large text. Light grey text on a white background fails this test for most readers, and for some it is invisible. Test your combinations, do not guess them.

Two more rules make palettes work. First, do not rely on color alone to convey meaning: a red error message should also have an icon or a label, because some readers cannot distinguish red from green. Second, build a palette from one base color by varying lightness and saturation in HSL — a base hue plus a lighter tint and a darker shade gives you a coherent set of three, and adding a second hue opposite on the wheel gives you an accent. Consistency beats variety: a page with three well-chosen colors looks more professional than one with twelve random ones.