HTML Color Codes Guide: HEX, RGB, HSL Complete Reference

Published February 4, 2026 • 11 min read

Colors are fundamental to web design. Whether you're building a website, designing an app, or creating graphics, understanding HTML color codes is essential. This comprehensive guide covers everything you need to know about web colors.

Color Formats in HTML/CSS

HTML and CSS support multiple color formats. Each has its use cases:

HEX Color Codes

HEX (hexadecimal) is the most popular format for web colors.

Format

#RRGGBB
#FF5733
│└┴──┘└┴──┘└┴──┘
│  │    │    └─ Blue (00-FF)
│  │    └────── Green (00-FF)
│  └─────────── Red (00-FF)
└────────────── Hash symbol

Examples

#FF0000  →  Red
#00FF00  →  Green
#0000FF  →  Blue
#FFFFFF  →  White
#000000  →  Black
#808080  →  Gray

Short HEX Format

When digits repeat, use shorthand:

#FFFFFF  →  #FFF  (white)
#000000  →  #000  (black)
#FF0000  →  #F00  (red)
#336699  →  #369  (blue-gray)

HEX with Alpha (Transparency)

#RRGGBBAA
#FF573380  →  50% transparent orange

Usage

/* CSS */
.element {
  color: #FF5733;
  background-color: #FFF;
  border-color: #369;
}

/* Inline HTML */
<p style="color: #FF5733;">Text</p>

RGB Color Codes

RGB represents colors as Red, Green, Blue values (0-255).

Format

rgb(red, green, blue)
rgb(255, 87, 51)

Examples

rgb(255, 0, 0)      →  Red
rgb(0, 255, 0)      →  Green
rgb(0, 0, 255)      →  Blue
rgb(255, 255, 255)  →  White
rgb(0, 0, 0)        →  Black
rgb(128, 128, 128)  →  Gray

RGBA with Transparency

rgba(red, green, blue, alpha)
rgba(255, 87, 51, 0.5)  →  50% transparent orange
rgba(0, 0, 0, 0.8)      →  80% transparent black

Alpha: 0 = fully transparent, 1 = fully opaque

Usage

.element {
  color: rgb(255, 87, 51);
  background-color: rgba(0, 0, 0, 0.5);
}

HSL Color Codes

HSL (Hue, Saturation, Lightness) is more intuitive for humans.

Format

hsl(hue, saturation%, lightness%)
hsl(14, 100%, 60%)

Hue Values

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

Examples

hsl(0, 100%, 50%)      →  Red
hsl(120, 100%, 50%)    →  Green
hsl(240, 100%, 50%)    →  Blue
hsl(0, 0%, 100%)       →  White
hsl(0, 0%, 0%)         →  Black
hsl(0, 0%, 50%)        →  Gray

HSLA with Transparency

hsla(hue, saturation%, lightness%, alpha)
hsla(14, 100%, 60%, 0.5)  →  50% transparent orange

Why Use HSL?

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

/* Lighter variant */
--primary-light: hsl(220, 90%, 76%);

/* Darker variant */
--primary-dark: hsl(220, 90%, 36%);

Named Colors

CSS supports 140 named colors. Here are the most useful:

Basic Colors

red, green, blue, yellow, cyan, magenta
white, black, gray, silver
orange, purple, pink, brown

Common Named Colors

Name HEX RGB
tomato #FF6347 rgb(255, 99, 71)
dodgerblue #1E90FF rgb(30, 144, 255)
mediumseagreen #3CB371 rgb(60, 179, 113)
coral #FF7F50 rgb(255, 127, 80)
slategray #708090 rgb(112, 128, 144)

Special Values

transparent  →  Fully transparent (rgba(0, 0, 0, 0))
currentColor →  Inherits current text color

Converting Between Formats

HEX to RGB

#FF5733
↓
FF = 255 (red)
57 = 87 (green)
33 = 51 (blue)
↓
rgb(255, 87, 51)

RGB to HEX

rgb(255, 87, 51)
↓
255 = FF
87 = 57
51 = 33
↓
#FF5733

Use our Color Picker tool to instantly convert between HEX, RGB, and HSL formats.

Popular Color Palettes

Modern UI Colors

/* Primary Blues */
#0066FF  →  Bright Blue
#3B82F6  →  Tailwind Blue
#1E90FF  →  Dodger Blue
#4A90E2  →  Sky Blue

/* Success Greens */
#22C55E  →  Emerald
#10B981  →  Green
#2ECC71  →  Flat Green

/* Warning/Attention */
#F59E0B  →  Amber
#EF4444  →  Red
#DC2626  →  Crimson

/* Neutrals */
#F9FAFB  →  Light Gray
#E5E7EB  →  Gray 200
#6B7280  →  Gray 500
#1F2937  →  Gray 800

Dark Mode Colors

#0A0A0A  →  True Black
#121212  →  Material Dark
#1E1E1E  →  VS Code Dark
#2D2D30  →  Dark Gray
#3E3E42  →  Medium Gray

CSS Color Properties

Text Color

.text {
  color: #FF5733;
}

Background Color

.element {
  background-color: #F0F0F0;
}

Border Color

.box {
  border: 2px solid #DDD;
  border-color: #FF5733;
}

Box Shadow

.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Gradient

.gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

CSS Variables for Colors

Define reusable color variables:

:root {
  --primary: #3B82F6;
  --secondary: #8B5CF6;
  --success: #10B981;
  --danger: #EF4444;
  --warning: #F59E0B;
  
  --bg-primary: #FFFFFF;
  --bg-secondary: #F9FAFB;
  --text-primary: #111827;
  --text-secondary: #6B7280;
}

.button {
  background-color: var(--primary);
  color: var(--bg-primary);
}

.alert-success {
  background-color: var(--success);
}

Color Accessibility

Contrast Ratios

WCAG guidelines require minimum contrast ratios:

Good Contrast Examples

✅ Black text on white (#000 on #FFF) - 21:1
✅ White text on dark blue (#FFF on #0051BA) - 7.4:1
✅ Dark gray on light gray (#333 on #F5F5F5) - 11.6:1

❌ Light gray on white (#CCC on #FFF) - 1.6:1
❌ Yellow on white (#FFFF00 on #FFF) - 1.07:1

Use contrast checkers to ensure accessibility!

Color Psychology

Best Practices

1. Use CSS Variables

Define colors once, use everywhere. Easy to update themes.

2. Limit Your Palette

Use 1-3 primary colors, 2-3 neutrals. Too many colors = chaotic design.

3. Consider Accessibility

Test contrast ratios. Never rely on color alone to convey information.

4. Use Semantic Naming

❌ Bad:
--blue: #3B82F6;
--light-blue: #60A5FA;

✅ Good:
--primary: #3B82F6;
--primary-light: #60A5FA;

5. Test in Dark Mode

Define dark mode color schemes with media queries:

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0A0A0A;
    --text-primary: #F9FAFB;
  }
}

Color Tools & Resources

Online Tools

Browser DevTools

Right-click any color in Chrome/Firefox DevTools to convert formats or adjust values visually.

Conclusion

Understanding HTML color codes is essential for web development. Whether you prefer HEX for brevity, RGB for clarity, or HSL for intuitive adjustments, each format has its place.

Start with a limited palette, use CSS variables, test accessibility, and your color choices will enhance both design and user experience.

Pick and Convert Colors

Use our free Color Picker to select colors visually and convert between HEX, RGB, and HSL formats instantly.

← Back to Blog