CSS Colors

CSS provides multiple ways to specify colors for your web elements. You can use predefined color names, hexadecimal codes, RGB values, HSL values, and CSS variables. Understanding these different color formats helps you create visually appealing and consistent designs.

Color Names

CSS has 140 predefined color names that you can use directly. These are easy to remember and perfect for quick prototyping:

/* Basic color names */
h1 {
    color: red;
}

p {
    color: blue;
}

div {
    background-color: lightgray;
}

button {
    background-color: green;
    color: white;
}

Common Color Names

Hexadecimal Colors

Hexadecimal (hex) codes are the most common way to specify colors in CSS. A hex code starts with # followed by 6 hexadecimal digits:

/* Hex color format: #RRGGBB */
.header {
    background-color: #2e7d52; /* Dark green */
}

.button {
    background-color: #007bff; /* Bright blue */
    color: #ffffff; /* White */
}

.text {
    color: #333333; /* Dark gray */
}

Short Hex Codes

If the hex code has three pairs of identical digits, you can use the 3-digit shorthand:

/* Full hex codes */
#FF0000  /* Red */
#00FF00  /* Green */
#0000FF  /* Blue */
#FFFFFF  /* White */
#000000  /* Black */

/* Short hex codes (equivalent) */
#F00     /* Red */
#0F0     /* Green */
#00F     /* Blue */
#FFF     /* White */
#000     /* Black */

RGB Colors

RGB (Red, Green, Blue) colors specify the intensity of each color channel using values from 0 to 255:

/* RGB format: rgb(red, green, blue) */
.element {
    color: rgb(255, 0, 0);      /* Red */
    background-color: rgb(0, 128, 0); /* Dark green */
    border-color: rgb(0, 0, 255);    /* Blue */
}

RGB Color Examples

RGBA Colors

RGBA adds an alpha channel (transparency) to RGB colors. The alpha value ranges from 0.0 (fully transparent) to 1.0 (fully opaque):

/* RGBA format: rgba(red, green, blue, alpha) */
.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* 50% transparent black */
}

.button {
    background-color: rgba(255, 0, 0, 0.8); /* 80% opaque red */
}

.text {
    color: rgba(255, 255, 255, 0.9); /* 90% opaque white */
}

Transparency Examples

.transparent-25 { background-color: rgba(255, 0, 0, 0.25); } /* 25% opacity */
.transparent-50 { background-color: rgba(255, 0, 0, 0.50); } /* 50% opacity */
.transparent-75 { background-color: rgba(255, 0, 0, 0.75); } /* 75% opacity */
.transparent-100 { background-color: rgba(255, 0, 0, 1.0); } /* 100% opacity */

HSL Colors

HSL (Hue, Saturation, Lightness) is an intuitive color model that's easier for humans to understand:

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

/* Hue: 0-360 (degrees on color wheel)
   Saturation: 0-100% (gray to full color)
   Lightness: 0-100% (black to white) */

.element {
    color: hsl(0, 100%, 50%);      /* Red */
    background-color: hsl(120, 100%, 50%); /* Green */
    border-color: hsl(240, 100%, 50%);    /* Blue */
}

Understanding HSL Components

• Hue (0-360°): Position on the color wheel (0=red, 120=green, 240=blue)
• Saturation (0-100%): Color intensity (0%=gray, 100%=vibrant)
• Lightness (0-100%): Brightness (0%=black, 50%=normal, 100%=white)

HSL Color Examples

HSLA Colors

HSLA adds transparency to HSL colors, similar to how RGBA adds transparency to RGB:

/* HSLA format: hsla(hue, saturation%, lightness%, alpha) */
.overlay {
    background-color: hsla(0, 0%, 0%, 0.7); /* 70% transparent black */
}

.button {
    background-color: hsla(120, 100%, 50%, 0.8); /* 80% opaque green */
}

.text-shadow {
    text-shadow: 2px 2px 4px hsla(0, 0%, 0%, 0.5); /* 50% transparent black shadow */
}

CSS Color Variables

CSS custom properties (variables) make it easy to manage colors throughout your website:

/* Define color variables */
:root {
    --primary-color: #2e7d52;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    
    /* Light variants */
    --primary-light: #4caf50;
    --secondary-light: #adb5bd;
    
    /* Dark variants */
    --primary-dark: #1b5e20;
    --secondary-dark: #495057;
    
    /* Neutral colors */
    --white: #ffffff;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --black: #000000;
}

/* Use color variables */
.header {
    background-color: var(--primary-color);
    color: var(--white);
}

.button {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-dark);
}

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

Color Functions

CSS provides functions to manipulate colors dynamically:

Current Color

The currentColor keyword uses the value of the color property:

.button {
    color: #2e7d52;
    border: 2px solid currentColor; /* Uses the same green as the text */
    box-shadow: 0 0 10px currentColor; /* Green shadow */
}

Color Mixing (Modern CSS)

Modern CSS supports color mixing functions:

/* Mix two colors */
.element {
    background-color: color-mix(in srgb, #ff0000, #0000ff 50%); /* 50% red, 50% blue */
}

/* Adjust color lightness */
.element {
    background-color: color-adjust(#ff0000, 20%); /* Lighter red */
}

Practical Color Schemes

Monochromatic Scheme

/* Using different shades of the same color */
:root {
    --blue-50: #e3f2fd;
    --blue-100: #bbdefb;
    --blue-200: #90caf9;
    --blue-300: #64b5f6;
    --blue-400: #42a5f5;
    --blue-500: #2196f3;
    --blue-600: #1e88e5;
    --blue-700: #1976d2;
    --blue-800: #1565c0;
    --blue-900: #0d47a1;
}

.header { background-color: var(--blue-900); }
.content { background-color: var(--blue-50); }
.button { background-color: var(--blue-500); }

Complementary Scheme

/* Opposite colors on the color wheel */
:root {
    --primary: #2196f3;    /* Blue */
    --complement: #ff9800; /* Orange */
    --primary-light: #e3f2fd;
    --complement-light: #fff3e0;
}

.primary-section { background-color: var(--primary); }
.accent-section { background-color: var(--complement); }

Color Accessibility

Ensure your color choices are accessible to all users:

Contrast Ratios

• WCAG AA Standard: 4.5:1 for normal text, 3:1 for large text
• WCAG AAA Standard: 7:1 for normal text, 4.5:1 for large text

Good Contrast Examples

Color Best Practices

• Use CSS variables - Define colors once and reuse throughout your project
• Consider accessibility - Ensure sufficient contrast for readability
• Be consistent - Use a limited color palette for professional appearance
• Test across devices - Colors may appear differently on various screens
• Use meaningful names - Name variables by purpose, not color (e.g., --primary-color not --blue)
• Plan for dark mode - Consider how colors work in both light and dark themes

Color Reference

Quick Color Conversion

Common Mistakes to Avoid

Try It: An Accessible Status Badge

Pairing color with an icon and text — not color alone — using a variable for the badge color:

:root {
    --status-ok: #198754;
}

.status-badge {
    background-color: var(--status-ok);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
}

Rendered result:

Even without the green, "✓ Order Confirmed" still communicates the status on its own.

Frequently Asked Questions