Hex Color Codes: Complete Guide and Reference

Hexadecimal color codes (hex codes) are the most common way to specify colors in web development. This guide explains how hex codes work, provides a complete reference, and shows you how to use them effectively in CSS, HTML, and design.

Table of Contents

1. What Are Hex Color Codes?
2. How Hex Color Codes Work
3. Hex Code Format and Structure
4. Common Hex Color Codes
5. Hex vs RGB vs HSL
6. Using Hex Codes in CSS
7. Converting Between Formats
8. Color Accessibility

What Are Hex Color Codes?

A hex color code is a six-digit code that represents a color in the RGB (Red, Green, Blue) color space. Each color is defined by the intensity of its red, green, and blue components, expressed in hexadecimal notation.

Example: #FF5733

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

View #FF5733 (Orange-Red)

Where Hex Codes Are Used

• CSS stylesheets
• HTML color attributes
• Design tools (Figma, Sketch, Adobe XD)
• Image editing software
• Brand style guides
• Color palettes

How Hex Color Codes Work

Hexadecimal Number System

Hexadecimal is a base-16 number system using digits 0-9 and letters A-F:

RGB Components

Each hex code has three two-digit components:

Format: #RRGGBB

1. RR - Red intensity (00 to FF)
2. GG - Green intensity (00 to FF)
3. BB - Blue intensity (00 to FF)

Each component ranges from 00 (no color) to FF (full intensity):

• 00 = 0 in decimal (no intensity)
• 80 = 128 in decimal (half intensity)
• FF = 255 in decimal (full intensity)

Pure Color Examples

/* Pure Red */
#FF0000
  ↓↓ = FF (255) red
    ↓↓ = 00 (0) green
      ↓↓ = 00 (0) blue

/* Pure Green */
#00FF00
  ↓↓ = 00 (0) red
    ↓↓ = FF (255) green
      ↓↓ = 00 (0) blue

/* Pure Blue */
#0000FF
  ↓↓ = 00 (0) red
    ↓↓ = 00 (0) green
      ↓↓ = FF (255) blue

View red (#FF0000) | View green (#00FF00) | View blue (#0000FF)

Hex Code Format and Structure

Full 6-Digit Format

Standard format: #RRGGBB

Examples:

• #FF5733 - Bright orange-red
• #3498DB - Bright blue
• #2ECC71 - Bright green
• #9B59B6 - Purple
• #F39C12 - Orange

Shorthand 3-Digit Format

When both digits of each component are identical, use shorthand:

/* Full format → Shorthand */
#FF0000 → #F00 (red)
#00FF00 → #0F0 (green)
#0000FF → #00F (blue)
#FFFFFF → #FFF (white)
#000000 → #000 (black)
#CCCCCC → #CCC (gray)

The browser automatically expands shorthand:

• #F00 becomes #FF0000
• #C9C becomes #CC99CC
• #123 becomes #112233

8-Digit Format with Alpha (Transparency)

Modern browsers support 8-digit hex codes for transparency:

Format: #RRGGBBAA

The last two digits (AA) represent the alpha channel:

• 00 = Fully transparent (0%)
• 80 = 50% transparent
• FF = Fully opaque (100%)

/* Red with different opacity levels */
#FF000080  /* 50% opacity */
#FF000033  /* 20% opacity */
#FF0000FF  /* 100% opacity (same as #FF0000) */

Common Hex Color Codes

Basic Colors

Popular Web Colors

Browse all color codes →

Neutral Grays (UI Essentials)

Popular Brand Colors

Modern UI Color Palettes

Tailwind CSS Defaults:

Hex vs RGB vs HSL

When to Use Each Format

Use Hex (#RRGGBB) for:

• Static colors in CSS
• Design systems and style guides
• Sharing colors between designers and developers
• When space is limited

Use RGB (rgb()) for:

• Dynamic colors in JavaScript
• Colors with transparency (rgba)
• Programmatic color manipulation
• Mathematical color operations

Use HSL (hsl()) for:

• Creating color palettes
• Building theme systems
• Color variations (lighter/darker shades)
• More intuitive color adjustments

/* Same color in different formats */

/* Hex */
color: #3498DB;

/* RGB */
color: rgb(52, 152, 219);

/* HSL */
color: hsl(204, 70%, 53%);

/* With transparency */
color: #3498DB80;           /* 50% opacity */
color: rgba(52, 152, 219, 0.5);
color: hsla(204, 70%, 53%, 0.5);

Using Hex Codes in CSS

Basic CSS Properties

/* Text color */
.text {
  color: #333333;
}

/* Background color */
.box {
  background-color: #FFFFFF;
}

/* Border color */
.card {
  border: 2px solid #E0E0E0;
}

/* Box shadow */
.button {
  box-shadow: 0 2px 4px #00000026;
}

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

/* Multiple properties */
.link {
  color: #3B82F6;
  background-color: #EFF6FF;
  border-bottom: 2px solid #3B82F6;
}

CSS Variables (Custom Properties)

:root {
  /* Brand colors */
  --color-primary: #3B82F6;
  --color-primary-dark: #2563EB;
  --color-primary-light: #60A5FA;
  
  /* Neutral colors */
  --color-text: #1F2937;
  --color-text-light: #6B7280;
  --color-background: #FFFFFF;
  --color-border: #E5E7EB;
  
  /* Semantic colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;
}

/* Usage */
.button-primary {
  background-color: var(--color-primary);
  color: var(--color-background);
}

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

Dark Mode with CSS Variables

:root {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F3F4F6;
  --text-primary: #111827;
  --text-secondary: #6B7280;
}

[data-theme="dark"] {
  --bg-primary: #111827;
  --bg-secondary: #1F2937;
  --text-primary: #F9FAFB;
  --text-secondary: #D1D5DB;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s, color 0.3s;
}

Converting Between Formats

Manual Conversion: Hex to RGB

1. Take the first two hex digits (RR) → convert to decimal
2. Take the middle two digits (GG) → convert to decimal
3. Take the last two digits (BB) → convert to decimal

Example: #FF5733

• FF (hex) = 255 (decimal) = Red
• 57 (hex) = 87 (decimal) = Green
• 33 (hex) = 51 (decimal) = Blue
• Result: rgb(255, 87, 51)

Manual Conversion: RGB to Hex

1. Convert each RGB value (0-255) to hexadecimal
2. Combine with # prefix

Example: rgb(52, 152, 219)

• 52 (decimal) = 34 (hex)
• 152 (decimal) = 98 (hex)
• 219 (decimal) = DB (hex)
• Result: #3498DB

JavaScript Conversion Functions

// Hex to RGB
function hexToRgb(hex) {
  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

console.log(hexToRgb('#3498DB'));
// { r: 52, g: 152, b: 219 }

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

console.log(rgbToHex(52, 152, 219));
// "#3498DB"

// Lighten color by percentage
function lightenColor(hex, percent) {
  const rgb = hexToRgb(hex);
  const r = Math.min(255, Math.floor(rgb.r + (255 - rgb.r) * percent / 100));
  const g = Math.min(255, Math.floor(rgb.g + (255 - rgb.g) * percent / 100));
  const b = Math.min(255, Math.floor(rgb.b + (255 - rgb.b) * percent / 100));
  return rgbToHex(r, g, b);
}

console.log(lightenColor('#3498DB', 20));
// Returns a lighter blue

// Darken color by percentage
function darkenColor(hex, percent) {
  const rgb = hexToRgb(hex);
  const r = Math.max(0, Math.floor(rgb.r * (100 - percent) / 100));
  const g = Math.max(0, Math.floor(rgb.g * (100 - percent) / 100));
  const b = Math.max(0, Math.floor(rgb.b * (100 - percent) / 100));
  return rgbToHex(r, g, b);
}

console.log(darkenColor('#3498DB', 20));
// Returns a darker blue

Color Accessibility

WCAG Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) specify minimum contrast ratios between text and background colors:

Level AA (Minimum - Required):

• 4.5:1 for normal text (under 24px or 19px bold)
• 3:1 for large text (24px+ or 19px+ bold)
• 3:1 for UI components and graphics

Level AAA (Enhanced - Recommended):

• 7:1 for normal text
• 4.5:1 for large text

Good Color Contrast Examples

Calculating Contrast Ratio

// Calculate relative luminance
function getLuminance(hex) {
  const rgb = hexToRgb(hex);
  const [r, g, b] = [rgb.r, rgb.g, rgb.b].map(val => {
    val = val / 255;
    return val <= 0.03928 
      ? val / 12.92 
      : Math.pow((val + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

// Calculate contrast ratio
function getContrastRatio(hex1, hex2) {
  const lum1 = getLuminance(hex1);
  const lum2 = getLuminance(hex2);
  const brightest = Math.max(lum1, lum2);
  const darkest = Math.min(lum1, lum2);
  return (brightest + 0.05) / (darkest + 0.05);
}

// Check if contrast meets WCAG standards
function meetsWCAG(textColor, bgColor, largeText = false) {
  const ratio = getContrastRatio(textColor, bgColor);
  const minRatio = largeText ? 3 : 4.5;
  
  return {
    ratio: ratio.toFixed(2),
    passesAA: ratio >= minRatio,
    passesAAA: ratio >= (largeText ? 4.5 : 7)
  };
}

console.log(meetsWCAG('#333333', '#FFFFFF'));
// { ratio: '12.63', passesAA: true, passesAAA: true }

console.log(meetsWCAG('#999999', '#FFFFFF'));
// { ratio: '2.85', passesAA: false, passesAAA: false }

Accessible Color Pairs

Light Backgrounds:

Dark Backgrounds:

Common Mistakes to Avoid

1. Poor Contrast

/* ❌ Bad - Low contrast (2.8:1) */
.text-bad {
  color: #999999;
  background: #FFFFFF;
}

/* ✅ Good - High contrast (12.6:1) */
.text-good {
  color: #333333;
  background: #FFFFFF;
}

2. Too Many Colors

/* ❌ Bad - Color chaos */
:root {
  --color-1: #FF6347;
  --color-2: #4169E1;
  --color-3: #32CD32;
  --color-4: #FFD700;
  --color-5: #FF1493;
  /* ... 10 more colors */
}

/* ✅ Good - Consistent palette */
:root {
  --primary: #3B82F6;
  --secondary: #6366F1;
  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;
  --gray: #6B7280;
}

3. Using Pure Black

/* ❌ Bad - Too harsh */
.text-harsh {
  color: #000000;
}

/* ✅ Good - Softer, more readable */
.text-soft {
  color: #1A1A1A;
}

4. Forgetting Color Blindness

Don't rely on color alone:

<!-- ❌ Bad - Only color indicates error -->
<input class="error">

<!-- ✅ Good - Icon + text + color -->
<div class="error-field">
  <input>
  <span class="error-icon">⚠️</span>
  <span class="error-text">Invalid email</span>
</div>

Quick Reference Guide

Creating Shades

Lighten a color: Increase all RGB values proportionally
Darken a color: Decrease all RGB values proportionally

Example - Blue shades:

#00008B (Darkest)
#0000CD (Dark)
#0000FF (Medium)
#4169E1 (Light)
#87CEEB (Lightest)

Color Relationships

Complementary (Opposite on color wheel):

• Red #FF0000 ← → Cyan #00FFFF
• Green #00FF00 ← → Magenta #FF00FF
• Blue #0000FF ← → Yellow #FFFF00

Analogous (Adjacent on color wheel):

• Blue #0000FF
• Blue-Purple #8000FF
• Purple #FF00FF

Summary

Hex color codes are the foundation of web color specification. Understanding how they work helps you choose and communicate colors effectively, create accessible color schemes, and build consistent design systems.

Key Takeaways:

✅ Hex codes represent RGB colors in hexadecimal format (#RRGGBB)
✅ Each component ranges from 00 (0) to FF (255)
✅ Shorthand format (#RGB) works when digits repeat
✅ Always check color contrast for accessibility (4.5:1 minimum)
✅ Use CSS variables for maintainable color systems
✅ Test colors on different screens and for color blindness

Related Guides

• RGB vs Hex vs HSL: Color Code Comparison
• CSS Color Names Reference
• Web Safe Colors Guide
• Color Contrast for Accessibility
• Browse All Color Codes →