Color formats
Hex vs RGB vs HSL: Which Color Format Should You Use?
Understand how Hex, RGB and HSL represent the same screen color, how alpha works and when each CSS format is most useful.
Published Β·Updated
Hex, RGB and HSL are different notations for colors rendered in a color space such as sRGB. They can describe the same visible result:
.sample {
color: #00ffff;
color: rgb(0 255 255);
color: hsl(180 100% 50%);
}All three declarations above represent cyan.
Hex is compact
Six-digit Hex stores red, green and blue as pairs from 00 to FF. Three-digit Hex is shorthand: #0ff expands to #00ffff. Eight-digit Hex appends alpha, while four-digit Hex is its shorthand form. Use the Hex to RGB converter to inspect any of these variants.
RGB mirrors screen channels
RGB is explicit about red, green and blue channels, normally from 0 to 255. Modern CSS can add alpha after a slash: rgb(0 255 255 / 60%). It is convenient when values come from image or Canvas APIs.
HSL is easier to adjust by intent
HSL describes hue as an angle, then saturation and lightness as percentages. Rotating hue or reducing saturation is intuitive, although equal HSL steps are not perceptually equal. OKLCH is often a better modern choice for perceptually even scales.
No format is universally best. Pick one consistent source format, convert at boundaries, and preserve alpha when required. The RGB to Hex converter also exposes HSL, HSV and OKLCH for comparison.
Next, see how channels and alpha behave during digital color mixing.