HEX, RGB, HSL: Color Model Differences and When to Use Each

Three color models

CSS and design tools represent colors in three main ways: HEX, RGB, and HSL. Each has different strengths depending on the task.

HEX — hexadecimal color code

Format: #RRGGBB (each channel 00–FF)

Example: #1A2B3C = R:26, G:43, B:60

The most widely used format in web development. Compact and easy to copy-paste. Add transparency with the 8-digit form: #RRGGBBAA.

RGB — red, green, blue

Format: rgb(R, G, B) — each value 0–255

Example: rgb(26, 43, 60)

Directly models how light mixes. Useful when calculating or animating color values programmatically. Use rgba(R, G, B, A) for transparency.

HSL — hue, saturation, lightness

Format: hsl(H, S%, L%)

H (Hue) = 0–360° on the color wheel; S (Saturation) = color intensity %; L (Lightness) = 0% black, 100% white

Example: hsl(210, 40%, 17%)

Extremely intuitive for adjusting brightness or saturation while keeping the same hue. Ideal for theme design, color harmony, and accessibility adjustments.

Conversion relationships

HEX ↔ RGB is a 1:1 conversion.

RGB → HSL: normalize R, G, B to 0–1, compute max/min, then derive L, S, and H in sequence.

Example: rgb(255, 128, 0) ≈ hsl(30, 100%, 50%) (orange)

Key takeaways

• HEX: most convenient for copy-paste in web development.
• RGB: best when performing numeric calculations in code.
• HSL: most intuitive for adjusting brightness or saturation while preserving hue.
• All three formats represent the same color space and can be freely converted.