HEX, RGB and HSL Colors: A Conversion and Design Guide

HEX: the most compact format

HEX (hexadecimal) represents a color with a 6-character code (for example #6750A4), where each pair of characters encodes the intensity of one channel — red, green and blue — in base 16, from 00 (none) to FF (full intensity). It is the most compact format and the most used in CSS, graphic design and quick communication of a specific color, precisely because it is short and easy to copy and paste.

Its drawback is that it is not intuitive to read or modify in your head: looking at "#6750A4" it is not obvious how light, dark or saturated the color is without converting it mentally or using a tool.

RGB: the same values in base 10

RGB represents exactly the same information as HEX, but with the three channel values written in base 10 instead of hexadecimal: rgb(103, 80, 164) instead of #6750A4. It is more readable for anyone not used to reading hexadecimal, and it is the format typically used by color pickers with an individual slider for each channel.

It is widely used in development when you need to manipulate color channels separately in code (for example raising the red channel by 20 units), which is more direct to do in RGB than in HEX.

HSL: thinking about color the way designers do

HSL (Hue, Saturation, Lightness) is fundamentally different: instead of mixing three channels of light, it describes color the way a human naturally thinks about it. Hue (0-360°) is the position on the color wheel (how "red", "green" or "blue" it is in pure tone terms); saturation (0-100%) is how intense or muted the color is; and lightness (0-100%) is how light or dark it is.

This makes HSL the most practical format for creating systematic variations of a color — for example generating a palette of 5 shades of the same blue simply by varying lightness while keeping hue and saturation fixed. It is much harder to get the same result by manually adjusting HEX or RGB values.

Which one to use in each situation

Use HEX to communicate or copy a specific color quickly (brand documentation, static CSS code). Use RGB when you need to manipulate individual channels in code or work with transparency via rgba(). Use HSL when you are designing a color palette or need to create systematic variations (lighter, more saturated, complementary) of a base color — it is the format that best maps to how we intuitively think about color.

Frequently asked questions

Do HEX, RGB and HSL represent different colors?

No — they are three different ways of writing exactly the same color. You can convert freely between them without losing information.

Which is better for accessibility and contrast?

None is intrinsically better; what matters is calculating the WCAG contrast ratio between text and background color, regardless of the format they are written in.

Why does modern CSS support all three formats?

Because each one is more convenient depending on context: HEX for brevity, RGB for channel manipulation and transparency, HSL for intuitive adjustments of tone and lightness.