HEX, RGB, HSL: Understanding Web Color Codes

HEX, RGB, HSL: Understanding Web Color Codes

You are editing a website and see #FF5733 in the CSS. Or you are working with a designer who sends you rgb(255, 87, 51). Or a design tool shows a color as hsl(11, 100%, 60%). These all describe the exact same color, a vivid red-orange, but in three different formats.

If you have ever been confused by web color codes, this guide will clear things up in five minutes.

How Digital Colors Work

Every color on your screen is created by mixing three primary colors of light: Red, Green, and Blue. This is the RGB color model. By varying the intensity of each channel from zero (off) to maximum (full brightness), you can create any of the approximately 16.7 million colors that a standard display can show.

• Red 255, Green 0, Blue 0 = pure red
• Red 0, Green 255, Blue 0 = pure green
• Red 0, Green 0, Blue 255 = pure blue
• Red 255, Green 255, Blue 255 = white (all channels full)
• Red 0, Green 0, Blue 0 = black (all channels off)
• Red 255, Green 255, Blue 0 = yellow (red + green)

Every color format used on the web is simply a different way of expressing these channel values.

HEX Colors

What They Look Like

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

How They Work

A HEX color code is a six-character string preceded by a hash symbol. The six characters are divided into three pairs, each representing a color channel in hexadecimal (base 16):

Hexadecimal uses digits 0-9 and letters A-F, where A=10, B=11, C=12, D=13, E=14, F=15. So FF in hexadecimal equals 255 in decimal (15 × 16 + 15 = 255).

Breaking down #FF5733:

• FF = Red at 255 (maximum)
• 57 = Green at 87
• 33 = Blue at 51

This produces a vivid red-orange.

Shorthand

When each pair has two identical characters, you can use a three-character shorthand:

• #FF0000 can be written as #F00
• #3366FF can be written as #36F
• #000000 can be written as #000

RGB Colors

What They Look Like

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

How They Work

RGB notation directly states the red, green, and blue channel values as decimal numbers from 0 to 255. It is the most intuitive format because the numbers directly correspond to the intensity of each light channel.

rgb(255, 87, 51) means:

• Red: 255 (maximum)
• Green: 87 (about one-third)
• Blue: 51 (about one-fifth)

RGBA: Adding Transparency

RGBA adds a fourth value for opacity (alpha), ranging from 0 (fully transparent) to 1 (fully opaque):

rgba(255, 87, 51, 0.5)   /* 50% transparent */
rgba(0, 0, 0, 0.8)        /* 80% opaque black */

This is useful for overlays, shadows, and any design element that needs to show content behind it.

HSL Colors

What They Look Like

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

How They Work

HSL stands for Hue, Saturation, Lightness. Instead of thinking in terms of red/green/blue channel mixing, HSL describes color the way humans naturally think about it.

Hue is the color itself, expressed as a degree on the color wheel (0-360):

• 0° / 360° = Red
• 60° = Yellow
• 120° = Green
• 180° = Cyan
• 240° = Blue
• 300° = Magenta

Saturation is how vivid the color is, from 0% (gray) to 100% (fully saturated).

Lightness is how light or dark the color is, from 0% (black) to 100% (white). 50% is the "normal" lightness.

hsl(11, 100%, 60%) means:

• Hue: 11° (slightly orange red)
• Saturation: 100% (fully vivid)
• Lightness: 60% (slightly lighter than normal)

HSLA: Adding Transparency

Like RGBA, HSLA adds an alpha channel:

hsla(11, 100%, 60%, 0.5)   /* 50% transparent */

When to Use Which Format

For Web Development

HEX is the de facto standard. Most CSS is written with HEX codes because they are compact and every developer recognizes them.

For Design Systems

HSL is ideal for creating consistent color palettes. To create lighter and darker variants of a brand color, you simply adjust the lightness value:

• Primary: hsl(210, 80%, 50%)
• Light variant: hsl(210, 80%, 70%)
• Dark variant: hsl(210, 80%, 30%)

The hue and saturation stay the same, guaranteeing the variants are the same "color" at different brightnesses.

For Transparency

Use RGBA or HSLA when you need semi-transparent colors for overlays, shadows, or glass effects.

Converting Between Formats

You will frequently need to convert between formats. A designer sends HSL values but your codebase uses HEX. A brand guide specifies RGB but you need HSL for creating variants.

The math is straightforward but tedious to do manually. A converter tool handles it instantly.

Start working with colors:

• Convert Color Codes
• Color Converter Tool
• Color Palette Generator

All tools are free and work directly in your browser.