Web Colors Explained: HEX, RGB, and HSL

Colors in web development come in multiple formats: HEX, RGB, HSL, and more. Understanding when to use each makes you more effective at implementing designs and manipulating colors.

How Computers Represent Color

Digital displays create colors by mixing light. Each pixel contains three light sources: Red, Green, and Blue (RGB). By varying the intensity of each, we can create millions of colors.

• No light = Black
• All lights at full = White
• Just red = Red
• Red + Green = Yellow
• Red + Blue = Magenta
• Green + Blue = Cyan

This is additive color mixing—different from paint mixing (subtractive).

RGB: The Additive Color Model

RGB specifies color using three values, each from 0 to 255:

color: rgb(255, 0, 0);    /* Pure red */
color: rgb(0, 255, 0);    /* Pure green */
color: rgb(0, 0, 255);    /* Pure blue */
color: rgb(255, 255, 0);  /* Yellow (red + green) */
color: rgb(255, 255, 255);/* White (all colors) */
color: rgb(0, 0, 0);      /* Black (no light) */
color: rgb(128, 128, 128);/* Gray (equal amounts) */

Why 0-255?

Each channel uses 8 bits (1 byte):

• 8 bits = 256 possible values (2^8)
• 3 channels × 8 bits = 24 bits = 16,777,216 colors

This is "true color" or "24-bit color."

RGB Syntax

/* Function syntax */
color: rgb(255, 128, 0);       /* Orange */

/* With percentage */
color: rgb(100%, 50%, 0%);     /* Same orange */

/* Modern syntax (space-separated) */
color: rgb(255 128 0);         /* CSS Color Level 4 */

HEX: Shorthand for RGB

HEX colors are RGB values in hexadecimal notation:

color: #FF0000;  /* rgb(255, 0, 0) - Red */
color: #00FF00;  /* rgb(0, 255, 0) - Green */
color: #0000FF;  /* rgb(0, 0, 255) - Blue */

Each pair of hex digits represents one RGB channel:

#FF8000
 ││││││
 RR GG BB
 │  │  └── Blue: 00 = 0
 │  └───── Green: 80 = 128
 └──────── Red: FF = 255

Conversion

Decimal 255 = Hex FF
Decimal 128 = Hex 80
Decimal 64  = Hex 40
Decimal 0   = Hex 00

3-Digit Shorthand

When each pair has doubled digits, use shorthand:

#FF0000 → #F00
#AABBCC → #ABC
#336699 → #369

The browser expands each digit: #F00 → #FF0000

Why HEX is Popular

• Compact: 7 characters vs 16+ for rgb()
• Easy to copy/paste from design tools
• Established convention
• Works everywhere

HSL: Human-Friendly Color Selection

HSL represents colors as:

• Hue: Color wheel position (0-360°)
• Saturation: Color intensity (0-100%)
• Lightness: Brightness (0-100%)

color: hsl(0, 100%, 50%);    /* Pure red */
color: hsl(120, 100%, 50%);  /* Pure green */
color: hsl(240, 100%, 50%);  /* Pure blue */
color: hsl(60, 100%, 50%);   /* Pure yellow */

The Color Wheel (Hue)

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

Saturation

• 100% = Full color (vivid)
• 50% = Muted
• 0% = Gray (no color)

hsl(0, 100%, 50%)  /* Vivid red */
hsl(0, 50%, 50%)   /* Muted red */
hsl(0, 0%, 50%)    /* Gray */

Lightness

• 100% = White
• 50% = Pure color
• 0% = Black

hsl(0, 100%, 100%)  /* White */
hsl(0, 100%, 50%)   /* Red */
hsl(0, 100%, 25%)   /* Dark red */
hsl(0, 100%, 0%)    /* Black */

When to Use Each Format

Use HEX When

• Copy-pasting from design tools (Figma, Photoshop)
• You have specific brand colors
• Consistency with existing codebases
• Compact notation matters

Use RGB When

• Programmatically generating colors
• Working with transparency (RGBA)
• Mixing colors mathematically
• Interfacing with canvas/graphics APIs

Use HSL When

• Creating color variations (lighter/darker)
• Building color palettes
• Adjusting colors by feel
• Making accessible color choices

HSL Color Manipulation Examples

/* Base color */
--primary: hsl(220, 90%, 50%);

/* Lighter version (increase L) */
--primary-light: hsl(220, 90%, 70%);

/* Darker version (decrease L) */
--primary-dark: hsl(220, 90%, 30%);

/* Muted version (decrease S) */
--primary-muted: hsl(220, 40%, 50%);

/* Complementary (add 180 to H) */
--complementary: hsl(40, 90%, 50%);

With HSL, creating consistent color schemes is intuitive!

Alpha Channels (Transparency)

Add transparency with RGBA, HSLA, or 8-digit HEX:

RGBA

color: rgba(255, 0, 0, 0.5);   /* 50% transparent red */
color: rgba(0, 0, 0, 0.8);     /* 80% opaque black */

HSLA

color: hsla(0, 100%, 50%, 0.5);  /* 50% transparent red */

8-Digit HEX

color: #FF000080;  /* 50% transparent red */
color: #FF0000FF;  /* Fully opaque red */
color: #FF000000;  /* Fully transparent red */

The last two digits are alpha: 00 (transparent) to FF (opaque).

Modern Syntax

/* Space-separated with slash for alpha */
color: rgb(255 0 0 / 50%);
color: hsl(0 100% 50% / 50%);

CSS Color Syntax

Named Colors

CSS has 140 named colors:

color: red;
color: tomato;
color: cornflowerblue;
color: rebeccapurple;  /* Added in honor of Eric Meyer's daughter */

Useful for quick prototyping, but limited for precise design.

Current and System Colors

color: currentColor;        /* Inherits from color property */
color: transparent;         /* Fully transparent */
background: Canvas;         /* System background color */
color: LinkText;            /* System link color */

Color Functions (CSS Color Level 4+)

Modern CSS adds more color functions:

/* Color mixing */
color: color-mix(in srgb, red 50%, blue);

/* Relative color syntax */
color: hsl(from var(--base-color) h s calc(l + 20%));

/* Wide-gamut colors */
color: oklch(70% 0.15 200);
color: color(display-p3 1 0 0);

Color Manipulation in JavaScript

// Parse HEX to RGB
function hexToRgb(hex) {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return { r, g, b };
}

// RGB to HEX
function rgbToHex(r, g, b) {
    return '#' + [r, g, b]
        .map(x => x.toString(16).padStart(2, '0'))
        .join('');
}

// Lighten a color
function lighten(hex, percent) {
    const { r, g, b } = hexToRgb(hex);
    const lighten = (c) => Math.min(255, c + (255 - c) * percent);
    return rgbToHex(lighten(r), lighten(g), lighten(b));
}

Named Colors Reference

Some commonly used named colors:

Summary

• RGB: Direct control over red, green, blue channels (0-255)
• HEX: Compact RGB notation (#RRGGBB)
• HSL: Intuitive hue/saturation/lightness for color manipulation
• Alpha: Transparency via RGBA, HSLA, or 8-digit HEX

Choose based on your use case:

• Design handoff: HEX
• Color variations: HSL
• Programmatic work: RGB
• Transparency: Add alpha channel

Need to convert between formats? Try our HEX-RGB Converter or Color Picker!