Understanding Color Codes: HEX, RGB, and HSL Explained

Color Codes in Web Development

Every color you see on the web is represented by a code. Understanding these codes is essential for web developers and designers.

HEX Colors

HEX (hexadecimal) is the most common color format on the web.

Format: #RRGGBB

• Each pair represents Red, Green, and Blue (0-255)
• Values range from 00 (0) to FF (255)

Examples

• #FF0000 = Pure Red
• #00FF00 = Pure Green
• #0000FF = Pure Blue
• #FFFFFF = White
• #000000 = Black

Shorthand

When each pair has identical digits, you can shorten: #FF6633 → #F63

RGB Colors

RGB stands for Red, Green, Blue. It uses decimal numbers (0-255) for each channel.

Format: rgb(red, green, blue)

color: rgb(59, 130, 246);    /* Blue */
color: rgba(59, 130, 246, 0.5);  /* 50% transparent blue */

HSL Colors

HSL stands for Hue, Saturation, Lightness. It's more intuitive for humans.

Format: hsl(hue, saturation%, lightness%)

• Hue: 0-360 (color wheel position)
• Saturation: 0-100% (gray to vibrant)
• Lightness: 0-100% (black to white)

color: hsl(217, 91%, 60%);   /* Blue */
color: hsl(0, 100%, 50%);    /* Red */
color: hsl(120, 100%, 50%);  /* Green */

When to Use Each

Format	Best For
HEX	Quick inline colors, most CSS
RGB/RGBA	When you need opacity control
HSL	When adjusting brightness/saturation

Convert Colors Now

Use our Color Picker & Converter to convert between HEX, RGB, HSL, and RGBA instantly.