HEX vs RGB vs HSL: Color Formats Explained
Understand the difference between HEX, RGB, and HSL color formats, when to use each one, and how to convert colors for web design and CSS.
HEX, RGB, and HSL are three common ways to describe colors in CSS. They can represent the same colors, but each format is useful in a different situation.
HEX: compact and familiar
A HEX color starts with # and uses six hexadecimal characters, such as #6D5EF7. The characters represent red, green, and blue values in pairs: #RRGGBB.
HEX is common in design files and style guides because it is short and easy to copy. It also has an eight-character version, such as #6D5EF780, which includes transparency.
RGB: direct red, green, and blue values
RGB describes a color with three values from 0 to 255: rgb(109, 94, 247). It maps directly to the red, green, and blue light channels used by screens.
Use rgba() or the modern slash syntax when you need transparency: rgb(109 94 247 / 50%).
HSL: easier visual adjustments
HSL means hue, saturation, and lightness. A color like hsl(247, 90%, 67%) describes its position on the color wheel, its intensity, and its brightness.
HSL is especially handy when creating color variations. You can keep the hue and saturation the same while adjusting only lightness for hover states, borders, or dark themes.
Which color format should you use?
- Choose HEX for compact values from a brand guide or design tool.
- Choose RGB when working with channels or alpha transparency.
- Choose HSL when you want to tune brightness and saturation intuitively.
Use the color converter to switch between HEX, RGB, and HSL values without doing the math by hand.