Back to Blog

Web Color Theory: Understanding Hex Codes, RGB, HSL, and Color Systems

Color is one of the most powerful tools in web design, yet the various color formats and systems can be confusing. Should you use hex codes, RGB, or HSL? What's the difference between #FF0000 and rgb(255, 0, 0)? And how do you choose colors that work well together?

This comprehensive guide explains how web colors work, the pros and cons of different color systems, and practical techniques for creating beautiful, accessible color schemes.

How Computers Represent Color

Digital displays create colors by combining three primary colors of light: Red, Green, and Blue (RGB). Every color you see on screen is some combination of these three components.

Each color channel can have a value from 0 (off) to 255 (maximum intensity), giving us:

  • 256 values for red
  • 256 values for green
  • 256 values for blue
  • Total: 256 × 256 × 256 = 16,777,216 possible colors

This RGB color model is fundamental—all other web color systems ultimately translate to RGB values.

Hexadecimal Color Codes

Hex codes are the most common color format in CSS.

Format

Hex colors start with # followed by six hex digits:

color: #FF5733;

Breaking it down:

  • FF = Red channel (255 in decimal)
  • 57 = Green channel (87 in decimal)
  • 33 = Blue channel (51 in decimal)

Why Hexadecimal?

Hexadecimal (base-16) uses digits 0-9 and letters A-F, allowing each two-character pair to represent 0-255:

  • 00 = 0
  • FF = 255
  • 80 = 128

This compact format represents RGB values in just 6 characters.

Shorthand Hex

When each pair consists of identical digits, you can use 3-digit shorthand:

#FF0000 → #F00  (red)
#00FF00 → #0F0  (green)
#FFFFFF → #FFF  (white)
#000000 → #000  (black)

Hex with Alpha (Transparency)

Modern CSS supports 8-digit hex codes for transparency:

#FF5733FF → fully opaque
#FF573380 → 50% transparent

The last two digits represent alpha (opacity) from 00 (fully transparent) to FF (fully opaque).

Advantages of Hex

  • Concise: 7 characters including the #
  • Universal: Supported everywhere
  • De facto standard: Most color pickers output hex

Disadvantages of Hex

  • Not intuitive: Hard to predict #B8860B is "dark goldenrod"
  • Difficult to modify: Lightening/darkening requires calculation
  • No separate alpha: Must use 8-digit format or switch to rgba()

RGB and RGBA

RGB notation explicitly lists red, green, and blue values:

color: rgb(255, 87, 51);

RGBA adds an alpha channel for transparency:

color: rgba(255, 87, 51, 0.5);  /* 50% transparent */

Advantages of RGB

  • Readable: Clear what each value represents
  • Easy alpha: RGBA makes transparency simple
  • Programmatic: Easy to generate and manipulate in code

Disadvantages of RGB

  • Longer: More characters than hex
  • Not intuitive: Still hard to predict appearance from numbers
  • Brightness unclear: rgb(100, 100, 100) vs rgb(200, 200, 200) requires calculation to compare

HSL and HSLA

HSL (Hue, Saturation, Lightness) represents colors more intuitively:

color: hsl(9, 100%, 60%);

Components

Hue: Color on the color wheel (0-360 degrees)

  • 0/360 = Red
  • 120 = Green
  • 240 = Blue

Saturation: Color intensity (0-100%)

  • 0% = Gray
  • 100% = Full color

Lightness: How light or dark (0-100%)

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

HSLA adds alpha for transparency:

color: hsla(9, 100%, 60%, 0.5);

Advantages of HSL

** Intuitive**: Easy to understand and predict Easy adjustments: Change lightness/saturation independently Color harmony: Creating color schemes is straightforward Accessibility: Easily adjust lightness for contrast

Practical HSL Benefits

Creating tints and shades:

--primary: hsl(220, 80%, 50%);
--light: hsl(220, 80%, 70%);   /* Lighter version */
--dark: hsl(220, 80%, 30%);    /* Darker version */

Generating palettes:

--color-1: hsl(0, 70%, 50%);    /* Red */
--color-2: hsl(120, 70%, 50%);  /* Green - complementary */
--color-3: hsl(240, 70%, 50%);  /* Blue - triadic */

When to Use HSL

  • Creating color schemes
  • Generating variations of a color
  • Designing accessible color combinations
  • Working with color programmatically

Color Theory Basics

Color Relationships

Complementary: Opposite on the color wheel

  • Blue and orange (0° and 180°)
  • High contrast, vibrant combinations

Analogous: Adjacent on color wheel

  • Blue, blue-green, green (around 180-240°)
  • Harmonious, cohesive palettes

Triadic: Evenly spaced on wheel

  • Red, yellow, blue (0°, 120°, 240°)
  • Balanced, colorful schemes

Monochromatic: Same hue, different saturation/lightness

hsl(220, 80%, 30%)  /* Dark */
hsl(220, 80%, 50%)  /* Medium */
hsl(220, 80%, 70%)  /* Light */

60-30-10 Rule

Professional designs often use:

  • 60% dominant color (backgrounds, large areas)
  • 30% secondary color (sections, cards)
  • 10% accent color (buttons, highlights)

Named Colors

CSS supports 147 named colors:

color: rebeccapurple;
color: cornflowerblue;
color: tomato;

When to Use Named Colors

  • Quick prototyping
  • Learning/educational contexts
  • When the exact shade doesn't matter

When NOT to Use

  • Production designs (use explicit values)
  • Accessibility requirements (some named colors fail contrast)
  • Consistent branding (named colors vary between contexts)

Modern Color Functions

color() (CSS Color Module Level 4)

Supports new color spaces like Display P3:

color: color(display-p3 1 0.5 0);

Provides wider color gamut for modern displays.

lch() and lab()

Perceptually uniform color spaces:

color: lch(60% 50 270);  /* Lightness, Chroma, Hue */

Benefits:

  • Perceptually uniform (equal changes look equal)
  • Better for programmatic color manipulation
  • Future of CSS color

Color Accessibility

Contrast Requirements

WCAG 2.1 specifies minimum contrast ratios:

Normal text: 4.5:1 minimum Large text (18pt+ or 14pt+ bold): 3:1 minimum AA Enhanced: 7:1 for normal text

Checking Contrast

Tools to verify:

  • Browser DevTools contrast checker
  • WebAIM Contrast Checker
  • Lighthouse accessibility audits

Tips for Accessible Colors

  1. Test with actual content: Don't just check colors in isolation
  2. Don't rely on color alone: Use icons, labels, patterns
  3. ** Consider color blindness**: 8% of men have some form
  4. Test in different lighting: Colors behave differently in various contexts

Practical Tools and Workflows

Color Picker Tools

Use tools like our Color Picker to:

  • Visually select colors
  • Convert between formats (hex, RGB, HSL)
  • Generate color variations
  • Copy values in any format

All processing happens locally in your browser—no uploads required.

Generating Palettes

Monochromatic: Vary lightness in HSL

hsl(220, 70%, 30%)
hsl(220, 70%, 50%)
hsl(220, 70%, 70%)
hsl(220, 70%, 90%)

Complementary: Add 180° to hue

hsl(220, 70%, 50%)  /* Blue */
hsl(40, 70%, 50%)   /* Orange */

Triadic: Add 120° and 240°

hsl(0, 70%, 50%)    /* Red */
hsl(120, 70%, 50%)  /* Green */
hsl(240, 70%, 50%)  /* Blue */

CSS Custom Properties for Color

Modern approach using CSS variables:

:root {
  /* Base colors */
  --primary-h: 220;
  --primary-s: 80%;
  --primary-l: 50%;
  
  /* Auto-generated variants */
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-light: hsl(var(--primary-h), var(--primary-s), 70%);
  --primary-dark: hsl(var(--primary-h), var(--primary-s), 30%);
  --primary-transparent: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);
}

Benefits:

  • Change one value, update entire palette
  • Create systematic color scales
  • Support dark mode easily

Dark Mode and Color

Approach 1: Separate Palettes

:root {
  --bg: white;
  --text: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #f5f5f5;
  }
}

Approach 2: Invert Lightness

:root {
  --hue: 220;
  --sat: 70%;
  --lightness: 90%;
  --bg: hsl(var(--hue), var(--sat), var(--lightness));
}

@media (prefers-color-scheme: dark) {
  :root {
    --lightness: 10%;  /* Flip it */
  }
}

Dark Mode Tips

  1. Don't use pure black: #000 is too harsh; use dark grays
  2. Reduce saturation: Highly saturated colors strain eyes in dark mode
  3. Increase contrast: Dark mode often needs higher contrast than light mode
  4. Test thoroughly: Colors behave differently on dark backgrounds

Common Color Mistakes

Mistake 1: Using Too Many Colors

Problem: Rainbow mess Solution: Limit to 2-3 main colors plus neutrals

Mistake 2: Insufficient Contrast

Problem: Light gray text on white background Solution: Use contrast checker, aim for 4.5:1 minimum

Mistake 3: Color as Only Indicator

Problem: Red for errors, green for success only Solution: Add icons, labels, or patterns

Mistake 4: Ignoring Color Blind Users

Problem: Red-green combinations indistinguishable to many Solution: Test with color blindness simulators, use additional cues

Mistake 5: Inconsistent Color Use

Problem: Primary button is blue on one page, green on another Solution: Define color system early, use CSS variables

Performance Considerations

Does Color Format Matter?

Minimal performance difference between hex, RGB, and HSL. Choose based on:

  • Hex: Default/standard
  • RGB: When manipulating programmatically
  • HSL: When creating systematic color schemes

Reducing File Size

  • Use shorthand hex when possible: #F00 vs #FF0000
  • Use CSS variables to avoid repetition
  • Consider named colors for common cases: white vs #FFFFFF

Color in Different Contexts

Print vs Web

Web: RGB color space Print: CMYK (C yan, Magenta, Yellow, blacK)

Converting web colors to print requires careful color management—not all RGB colors can be printed.

Images vs CSS

CSS: Precise color control, small file size Images: Complex gradients, photographs

Use CSS colors/gradients when possible for performance.

SVG Colors

SVG supports all CSS color formats:

<rect fill="#FF5733" />
<circle fill="rgb(255, 87, 51)" />
<path fill="hsl(9, 100%, 60%)" />

The Future of Web Color

Display P3: Wider color gamut than sRGB, supported in modern browsers

LCH/Lab: Perceptually uniform color spaces coming to CSS

Color Contrast Level 5: New WCAG standard with improved algorithms

Dynamic color: OS-level color schemes (Material You on Android)

Conclusion

Understanding web color systems empowers better design decisions:

  • Hex codes remain the standard for simplicity
  • RGB works well for JavaScript manipulation
  • HSL excels for creating color schemes and variations
  • Accessibility always matters—check contrast
  • CSS variables enable systematic color management

Start with a limited palette, use HSL for systematic variations, always check accessibility, and leverage modern CSS features like custom properties for maintainable color systems.

Need to pick the perfect color? Our color picker tool lets you explore colors, convert between formats, and copy values—all in your browser without sending data to servers.

Color is both art and science. Master the technical foundations covered here, and you'll have the knowledge to create beautiful, accessible, and maintainable color systems for any project.