HEX, RGB and HSL — understanding color formats for the web

Open any CSS file or design tool and you will encounter colors written in at least three different notations: #2563eb, rgb(37, 99, 235), hsl(220, 83%, 53%). They all describe the exact same blue. So why do three formats exist, and when should you reach for each one?

Why there are multiple color formats

Each format was designed for a different context and a different way of thinking about color. HEX was adopted early in web history because it maps directly to how computers store color in memory — compact, machine-friendly, easy to paste into HTML attributes. RGB reflects how screens actually work: mixing red, green and blue light to produce color. HSL was introduced later to give designers a more human-readable way to describe color — one where you can intuit what a value means without running mental arithmetic.

None of them is universally better. The right choice depends on what you are doing and who needs to read the code.

HEX explained

A HEX color is a six-character string prefixed with #, like #ff6b35. Each pair of characters represents one color channel — red, green and blue — expressed in base-16 (hexadecimal) notation. That means each channel runs from 00 (decimal 0) to ff (decimal 255).

So #ff6b35 breaks down as: red = ff (255), green = 6b (107), blue = 35 (53). The format can also be shortened to three characters when both digits in each pair are identical — #fff is the same as #ffffff.

RGB explained

RGB stands for Red, Green, Blue — the three channels of additive color mixing used by every screen. In CSS, it is written as rgb(37, 99, 235), with each value ranging from 0 to 255. A value of 0 means none of that channel; 255 means full intensity.

Additive mixing means that combining all three channels at full intensity (rgb(255, 255, 255)) produces white, while zeroing all three (rgb(0, 0, 0)) produces black. This is the opposite of how paint or ink works, which is subtractive.

RGB is useful when you need to manipulate individual channels programmatically — for example, adjusting brightness by scaling all three values, or blending two colors by averaging their channels. It is also the native format for canvas drawing APIs and many image processing workflows.

HSL explained

HSL stands for Hue, Saturation, Lightness. Instead of describing a color by its channel intensities, it describes it by its perceptual properties:

• Hue — the base color as an angle on a 360-degree color wheel. Red is at 0°, green at 120°, blue at 240°.
• Saturation — how vivid or grey the color is, from 0% (completely grey) to 100% (fully saturated).
• Lightness — how light or dark the color is, from 0% (black) to 100% (white), with 50% being a pure, fully saturated tone.

HSL is written in CSS as hsl(220, 83%, 53%). The major advantage is legibility: to make a color lighter, you raise the lightness value. To create a muted version, you lower saturation. To find the complementary color, you add 180 to the hue. None of these operations require a calculator or a color picker — you can reason about them directly in code.

When to use which format

There is no strict rule, but there are clear preferences that experienced designers and developers tend to follow:

Quick conversion reference

Converting between the three formats by hand is rarely necessary — that is what tools are for. But understanding the relationships helps you reason about colors more confidently:

• HEX to RGB: convert each two-character pair from base-16 to decimal. #ff = 255, #80 = 128, #00 = 0.
• RGB to HEX: convert each decimal value to two-character hex. 255 = ff, 128 = 80, 0 = 00.
• RGB to HSL: requires a small algorithm — normalize the RGB values to 0–1, find the max and min, then derive hue, saturation and lightness from the difference. Most languages have built-in functions for this.
• HSL to RGB: similarly algorithmic, but the inverse. Any color picker tool handles this instantly.

Practical tips for designers and developers

• Use CSS custom properties (variables) with HSL for your color system — --color-brand: hsl(220, 83%, 53%) — so adjusting the whole palette means changing one value.
• Use HEX when copying colors from Figma, Sketch or brand guidelines, since those tools export HEX by default.
• Use rgba() — the RGB format with an alpha channel — whenever you need transparency. HSL also supports hsla() for the same purpose.
• When picking accessible text colors, HSL lightness is a quick guide: lightness below 40% on a white background, or above 60% on a dark background, usually gives sufficient contrast — though always verify with a contrast checker.
• Color harmonies like complementary, triadic and analogous are easiest to calculate in HSL because they are just arithmetic on the hue angle.