What Are HTML Color Codes?

HTML color codes are standardized methods for specifying colors in web development. They allow developers and designers to precisely define the appearance of text, backgrounds, borders, and other visual elements on websites. Understanding HTML color codes is fundamental to creating visually appealing and accessible web designs.

There are several formats for defining colors in HTML and CSS, each with unique advantages. The most common formats include named colors (like "Red" or "CornflowerBlue"), hexadecimal (HEX) codes (like #FF0000), RGB values (like rgb(255, 0, 0)), and HSL values (like hsl(0, 100%, 50%)). Modern web development also supports alpha transparency through RGBA and HSLA formats.

The 147 Standard HTML Named Colors

The W3C (World Wide Web Consortium) has standardized exactly 147 named colors that are universally recognized by all modern web browsers. These color names provide an intuitive, human-readable way to specify colors without needing to remember hexadecimal values or RGB combinations.

Named colors range from simple options like Black, White, and Red to more descriptive names such as MediumAquaMarine, LightGoldenRodYellow, and DarkSlateBlue. This standardization ensures that a color specified as Tomato will render identically across Chrome, Firefox, Safari, Edge, and all other compliant browsers.

Search millions more specific shades in the picker above ↑

Evolution of HTML Color Names

The history of HTML color codes is fascinating. The original HTML specification included only 16 basic colors: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, and Yellow. These 16 colors were chosen because they were the standard VGA colors supported by early computer displays.

As web technology evolved, the X11 color system (originally developed for the X Window System on Unix) was adopted, adding 131 additional named colors. This expansion brought the total to 147 colors, which was standardized in the CSS3 Color Module specification.

Understanding HEX Color Codes

Hexadecimal color codes, commonly called HEX codes, are the most widely used method for specifying colors in web development. A HEX code consists of a hash symbol (#) followed by six hexadecimal digits that represent the intensity of red, green, and blue components.

HEX Code Structure and Examples

/* Format: #RRGGBB where each pair is 00-FF (0-255 in decimal) */

#FF0000 /* Pure Red: Red=255, Green=0, Blue=0 */
#00FF00 /* Pure Green: Red=0, Green=255, Blue=0 */
#0000FF /* Pure Blue: Red=0, Green=0, Blue=255 */
#FFFFFF /* White: All channels at maximum (255) */
#000000 /* Black: All channels at minimum (0) */

/* Real-world brand colors */
#3B5998 /* Facebook Blue */
#1DA1F2 /* Twitter Blue */
#FF0000 /* YouTube Red */

Each pair of hexadecimal digits represents a value from 00 (0 in decimal) to FF (255 in decimal). This system provides 16,777,216 possible color combinations (256 × 256 × 256), offering virtually unlimited color options for web design.

Shorthand HEX Notation

When both digits in each color channel pair are identical, you can use a 3-character shorthand notation. For example:

#FF0000 can be written as #F00 (red)
#FFFFFF becomes #FFF (white)
#000000 becomes #000 (black)
#CCCCCC becomes #CCC (light gray)

RGB and RGBA Color Values

The RGB color model uses decimal values (0-255) for each color channel, making it more intuitive and human-readable than hexadecimal notation. RGB stands for Red, Green, Blue—the three primary colors of light that combine to create all other colors on digital displays.

RGB Syntax and Examples

/* RGB Format: rgb(red, green, blue) */
color: rgb(255, 0, 0); /* Pure Red */
background: rgb(0, 255, 0); /* Pure Green */
border-color: rgb(0, 0, 255); /* Pure Blue */

/* Practical examples */
.header { background: rgb(52, 152, 219); } /* Nice blue */
.success { color: rgb(46, 204, 113); } /* Green */
.warning { background: rgb(241, 196, 15); } /* Yellow */

RGBA: Adding Transparency

RGBA extends the RGB model by adding an alpha channel for transparency control. The alpha value ranges from 0 (completely transparent) to 1.0 (completely opaque).

/* RGBA Format: rgba(red, green, blue, alpha) */
background: rgba(0, 0, 0, 0.5); /* 50% transparent black */
color: rgba(255, 0, 0, 0.8); /* 80% opaque red */

/* Practical overlay example */
.modal-overlay {
 background: rgba(0, 0, 0, 0.7); /* Dark semi-transparent overlay */
}

HSL and HSLA: The Designer-Friendly Format

HSL (Hue, Saturation, Lightness) represents colors in a way that aligns with how humans naturally perceive and describe colors. This makes HSL particularly valuable for creating color variations and harmonious palettes.

Understanding HSL Components

/* HSL Format: hsl(hue, saturation%, lightness%) */

/* Pure colors at full saturation and 50% lightness */
color: hsl(0, 100%, 50%); /* Red (0°) */
color: hsl(120, 100%, 50%); /* Green (120°) */
color: hsl(240, 100%, 50%); /* Blue (240°) */

Hue: The color type, represented as degrees on the color wheel (0-360°). Red is at 0°/360°, green at 120°, blue at 240°.
Saturation: The intensity or purity of the color (0-100%). 0% produces grayscale, while 100% gives the most vivid version.
Lightness: How light or dark the color appears (0-100%). 0% is always black, 50% is the pure color, and 100% is always white.

Creating Color Variations with HSL

/* Creating a blue color scale */
.blue-50 { background: hsl(210, 80%, 95%); } /* Very light */
.blue-100 { background: hsl(210, 80%, 90%); }
.blue-500 { background: hsl(210, 80%, 50%); } /* Base color */
.blue-900 { background: hsl(210, 80%, 10%); } /* Very dark */

Best Practices for HTML Color Codes

1. Ensure Accessibility and Sufficient Contrast

Color accessibility is crucial for creating inclusive websites. The WCAG (Web Content Accessibility Guidelines) provides specific contrast ratio requirements:

Normal text: Minimum contrast ratio of 4.5:1 (Level AA) or 7:1 (Level AAA)
Large text: Minimum contrast ratio of 3:1 (Level AA) or 4.5:1 (Level AAA)
UI components: Minimum contrast ratio of 3:1 against adjacent colors

Accessible Color Combinations

/* GOOD: High contrast combinations */
.text-primary {
 color: #212529; /* Very dark gray */
 background: #FFFFFF; /* White */
 /* Contrast ratio: 16.1:1 ✓ Exceeds AAA */
}

.button-blue {
 color: #FFFFFF; /* White text */
 background: #0056B3; /* Dark blue */
 /* Contrast ratio: 8.6:1 ✓ Exceeds AAA */
}

2. Use CSS Custom Properties for Consistency

CSS variables (custom properties) are essential for maintaining consistent HTML color codes throughout your website.

:root {
 /* Brand colors */
 --color-primary: #3498db;
 --color-success: #27ae60;
 --color-warning: #f39c12;
 --color-danger: #e74c3c;
 
 /* Neutral colors */
 --color-text-primary: #2c3e50;
 --color-background: #ffffff;
}

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

3. Choose the Right Color Format

HEX codes: Best for static colors, widely recognized, compact notation
RGB/RGBA: Perfect when you need transparency or JavaScript color manipulation
HSL/HSLA: Excellent for creating color variations and scales
Named colors: Great for rapid prototyping and code readability

Common Use Cases for HTML Color Codes

Styling Text

/* Different approaches to text color */
h1 {
 color: #2C3E50; /* HEX: Precise brand color */
}

p {
 color: rgb(52, 73, 94); /* RGB: Same color */
}

.highlight {
 color: hsl(210, 29%, 29%); /* HSL: Easy variations */
 background: hsla(60, 100%, 50%, 0.2); /* Yellow highlight */
}

Background Colors and Gradients

/* Solid backgrounds */
body {
 background-color: #F8F9FA;
}

/* Semi-transparent overlays */
.modal-backdrop {
 background-color: rgba(0, 0, 0, 0.5);
}

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

Borders and Shadows

/* Border colors */
.input {
 border: 2px solid #CED4DA;
}

.input:focus {
 border-color: #3498db;
}

/* Box shadows with color */
.card {
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button-primary {
 background: #3498db;
 box-shadow: 0 4px 14px rgba(52, 152, 219, 0.4);
}

Color Theory for Web Design

Understanding color theory helps you create harmonious, effective designs using HTML color codes.

Complementary Colors

Colors opposite each other on the color wheel create high contrast and visual interest:

Red (#FF0000) and Cyan (#00FFFF)
Blue (#0000FF) and Orange (#FFA500)
Yellow (#FFFF00) and Purple (#800080)

Analogous Colors

Colors adjacent on the color wheel create harmonious, cohesive designs:

/* Analogous blue-green scheme */
:root {
 --color-1: hsl(180, 70%, 50%); /* Cyan */
 --color-2: hsl(210, 70%, 50%); /* Blue */
 --color-3: hsl(240, 70%, 50%); /* Blue-Purple */
}

Monochromatic Scales

Variations of a single hue create sophisticated, professional designs:

/* Monochromatic blue scale */
:root {
 --blue-50: hsl(210, 80%, 98%);
 --blue-100: hsl(210, 80%, 95%);
 --blue-500: hsl(210, 80%, 50%); /* Base */
 --blue-900: hsl(210, 80%, 10%);
}

Browser Compatibility

All modern browsers fully support the standard HTML color code formats:

Named Colors: Supported in all browsers since IE 3.0 (1996)
HEX Codes: Universal support in all browsers
RGB: Supported in all browsers since IE 4.0 (1997)
RGBA: Supported in all browsers since IE 9.0 (2011)
HSL/HSLA: Supported in all browsers since IE 9.0 (2011)

Conclusion

Mastering HTML color codes is essential for modern web development. Whether you prefer the precision of HEX codes, the readability of named colors, the flexibility of RGB/RGBA, or the intuitive nature of HSL/HSLA, understanding when and how to use each format will elevate your web design skills.

Remember to always prioritize accessibility by ensuring sufficient color contrast, use CSS variables for maintainability, and choose color formats that best suit your specific use case. With this comprehensive knowledge of HTML color codes, you're well-equipped to create beautiful, accessible, and professional websites.

HTML Color Codes: Hex Color Picker & Chart

HTML Color Code Generator