HEX, RGB and HSL: Understanding Color Codes
On the web, the same color can be written three common ways: HEX, RGB and HSL. They describe the same pixel but suit different tasks. Here is what each one means and when to reach for it.
RGB — mixing light
Screens build color by mixing red, green and blue light, each from 0 to 255. rgb(79, 70, 229) means a little red, a little green and a lot of blue — a vivid indigo. All zeros is black; all 255s is white.
HEX — the same RGB, in base-16
A HEX code like #4F46E5 is just RGB written in hexadecimal: 4F = 79 (red), 46 = 70 (green), E5 = 229 (blue). It is compact and the default in most design tools. A 3-digit shorthand like #FFF expands to #FFFFFF.
HSL — easier for humans
HSL describes a color by hue (its position on the color wheel, 0–360°), saturation (how vivid, 0–100%) and lightness (0% black to 100% white). It is great for making a color lighter, darker or more muted without guesswork.
Converting between them
HEX and RGB are two notations for the same numbers, so converting is direct. HSL is computed from RGB with a bit of math. The Color Converter does all three at once — paste a HEX and copy the rgb() or hsl() value you need.
Related tools
Last updated: July 6, 2026