Color Theory for Web Designers: HEX, RGB, HSL Explained

Understanding color is essential for creating effective web designs. Learn how digital color works, master different color formats, and create palettes that look great and convert visitors.

Color Models Explained

Digital screens display colors differently than print. Understanding the main color models helps you work effectively across media.

Additive (Light-based)

Used for screens. Colors add together to create white.

RGB: Red, Green, Blue
HEX: Hexadecimal RGB
HSL: Hue, Saturation, Lightness

Subtractive (Ink-based)

Used for print. Colors absorb light, combining to create black.

CMYK: Cyan, Magenta, Yellow, Black
Used in printing presses
Narrower gamut than RGB

For web design: Focus on RGB, HEX, and HSL. CMYK is only needed when designing for print.

HEX Colors

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

Format

#RRGGBB or #RGB (shorthand)
Examples:
#FF0000 = Pure red (FF red, 00 green, 00 blue)
#00FF00 = Pure green
#0000FF = Pure blue
#FFFFFF = White (all channels max)
#000000 = Black (all channels zero)
#808080 = Medium gray
Shorthand (when pairs match):
#F00 = #FF0000
#ABC = #AABBCC

With Transparency

#RRGGBBAA (8-digit hex)
#FF000080 = 50% transparent red
#0000FF40 = 25% transparent blue
AA values:
FF = 100% opaque
80 = 50% transparent
40 = 25% transparent
00 = fully transparent

Advantages of HEX

Compact and widely supported
Easy to copy/paste
Recognized by all browsers and design tools

RGB & RGBA

RGB expresses colors as values from 0-255 for each channel.

Format

rgb(red, green, blue)
rgba(red, green, blue, alpha)
Examples:
rgb(255, 0, 0)      = Pure red
rgb(0, 255, 0)      = Pure green
rgb(0, 0, 255)      = Pure blue
rgb(255, 255, 255)  = White
rgb(0, 0, 0)        = Black
rgb(128, 128, 128)  = Medium gray
With transparency:
rgba(255, 0, 0, 0.5)  = 50% transparent red
rgba(0, 0, 0, 0.8)    = 80% opaque black

Modern CSS Syntax

/* Modern syntax (no commas, optional slash for alpha) */
rgb(255 0 0)
rgb(255 0 0 / 50%)
rgb(255 0 0 / 0.5)

When to Use RGB

When calculating colors programmatically
When animating color values with JavaScript
When working with color data from APIs

HSL & HSLA

HSL is the most intuitive color model for designers, based on how humans perceive color.

Components

Hue (0-360°): The color wheel position (red=0°, green=120°, blue=240°)
Saturation (0-100%): Color intensity (0%=gray, 100%=vivid)
Lightness (0-100%): Brightness (0%=black, 50%=pure color, 100%=white)

Format

hsl(hue, saturation%, lightness%)
Examples:
hsl(0, 100%, 50%)    = Pure red
hsl(120, 100%, 50%)  = Pure green
hsl(240, 100%, 50%)  = Pure blue
hsl(0, 0%, 100%)     = White (any hue, 0 sat, 100% light)
hsl(0, 0%, 0%)       = Black
hsl(0, 0%, 50%)      = Medium gray
With transparency:
hsla(0, 100%, 50%, 0.5) = 50% transparent red

The Color Wheel (Hue Values)

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

Why Designers Love HSL

Easy variations: Adjust lightness for tints/shades without changing hue
Predictable palettes: Rotate hue to find harmonious colors
Intuitive adjustments: "Make it lighter" = increase L value

/* Creating a color palette with HSL /
:root {
--primary: hsl(220, 80%, 50%);        / Base blue /
--primary-light: hsl(220, 80%, 70%);  / Lighter tint /
--primary-dark: hsl(220, 80%, 30%);   / Darker shade /
--primary-muted: hsl(220, 40%, 50%);  / Desaturated */
}

Color Harmonies

Color harmonies are combinations that naturally look pleasing together.

Complementary

Colors opposite on the color wheel (180° apart)

High contrast, energetic. Good for CTAs and accents.

Analogous

Colors adjacent on the wheel (within 30-60°)

Harmonious, calm. Good for backgrounds and themes.

Triadic

Three colors equally spaced (120° apart)

Vibrant, balanced. Use one dominant, two as accents.

Split-Complementary

Base color + two colors adjacent to its complement

High contrast but less tension than complementary.

Tool: Color Picker with Schemes

Generate complementary, triadic, and analogous color schemes automatically.

Color Accessibility

About 8% of men and 0.5% of women have some form of color blindness. Design for everyone.

WCAG Contrast Requirements

Level	Normal Text	Large Text
AA (minimum)	4.5:1	3:1
AAA (enhanced)	7:1	4.5:1

Common Color Blindness Types

Deuteranopia: Reduced sensitivity to green (most common)
Protanopia: Reduced sensitivity to red
Tritanopia: Reduced sensitivity to blue (rare)

Accessibility Tips

Don't rely on color alone: Use icons, patterns, or labels too
Test contrast ratios: Use tools to verify readability
Avoid red/green combinations: Problematic for most color blindness
Use sufficient contrast: Especially for text and interactive elements
Provide alternatives: Consider high-contrast modes

Tool: Contrast Checker with WCAG

Check contrast ratios and WCAG compliance when comparing colors.

Color Psychology in Web Design

Colors evoke emotional responses that affect user behavior and brand perception.

Color	Associations	Common Uses
● Red	Energy, urgency, passion	CTAs, sale badges, alerts
● Blue	Trust, calm, professionalism	Finance, tech, healthcare
● Green	Growth, nature, success	Eco brands, success states
● Orange	Friendly, confident, creative	CTAs, entertainment
● Purple	Luxury, creativity, wisdom	Premium brands, beauty
● Teal	Sophistication, clarity	Health, wellness, startups

Conversion-Focused Color Tips

Contrast for CTAs: Make buttons stand out from the page
Consistent meaning: Use same colors for same actions
Limit palette: 2-3 colors plus neutrals is usually enough
White space: Let colors breathe for impact

Practical Tools

Color Conversion

HEX to RGB Converter - Convert HEX color codes to RGB
Color Picker - Visual picker with scheme generation

CSS Color Functions

/* Modern CSS color functions */
/* Relative colors (adjust existing colors) */
color: hsl(from var(--primary) h s calc(l + 20%));
/* Color mixing */
color: color-mix(in srgb, blue 70%, white);
/* Opacity shorthand */
color: rgb(255 0 0 / 50%);

Color Tools

HEX to RGB Converter

Color Picker

Frequently Asked Questions

They're all ways to represent the same colors. HEX uses 6 hexadecimal digits (#FF5733), RGB uses three 0-255 values (rgb(255, 87, 51)), and HSL uses hue (0-360°), saturation (0-100%), and lightness (0-100%). HSL is most intuitive for designers because you can easily adjust brightness without changing the hue.

Use HSL for design work because it's intuitive to adjust (change lightness for variants, rotate hue for harmonies). Use HEX for compact notation in stylesheets. Use RGB when calculating colors programmatically or animating with JavaScript. Modern CSS supports all formats interchangeably.

WCAG (Web Content Accessibility Guidelines) requires minimum contrast ratios between text and background: 4.5:1 for normal text, 3:1 for large text at Level AA. This ensures readability for users with visual impairments, including the ~8% of men with color blindness. Low contrast text is hard to read and may violate accessibility laws.

Use color harmonies based on the color wheel: complementary colors (opposite on wheel) for contrast, analogous colors (adjacent) for calm designs, triadic colors (120° apart) for vibrant balance, or split-complementary for contrast with less tension. Start with one base color and apply harmony rules to find matching colors.

The 60-30-10 rule suggests using 60% dominant color (usually neutral), 30% secondary color (brand color), and 10% accent color (CTAs, highlights). This creates visual balance while drawing attention to important elements. Apply this to backgrounds, content areas, and interactive elements respectively.

Screens have different color gamuts, brightness levels, and calibrations. sRGB is the web standard, but some displays show wider gamuts. Additionally, ambient lighting affects perception. Always test designs on multiple devices. For print, remember that CMYK has a narrower color gamut than RGB—some bright screen colors can't be reproduced in print.

Don't rely on color alone to convey information—use icons, labels, or patterns alongside color. Avoid red/green combinations (problematic for most color blindness types). Test with color blindness simulators. Ensure sufficient contrast (4.5:1 minimum). Consider offering a high-contrast mode for users who need it.

CTAs should contrast with the page background—there's no universal 'best' color. Orange and green often perform well in testing, but the key is standing out from surrounding elements. Red creates urgency, blue builds trust, green suggests positivity. A/B test different colors on your specific audience.

Split the 6-digit HEX into pairs (e.g., #FF5733 → FF, 57, 33). Convert each pair from hexadecimal to decimal: FF = 255, 57 = 87, 33 = 51. Result: rgb(255, 87, 51). For shorthand HEX like #F53, double each digit first (#FF5533).

HSL represents color as Hue (color type, 0-360°), Saturation (vibrancy, 0-100%), and Lightness (brightness, 0-100%). It's intuitive because you can create color variants by adjusting just one value: darken by reducing L, create pastels by reducing S, find harmonies by rotating H. RGB requires changing multiple values for the same effects.