Colors - Color Values and Usage

What are CSS Colors?

CSS provides multiple ways to specify colors for text, backgrounds, borders, and other elements. Understanding color formats helps you create visually appealing and accessible designs.

Why Colors Matter

Colors affect:

Brand identity - Consistent color scheme
User experience - Visual hierarchy and emphasis
Accessibility - Sufficient contrast for readability
Mood and emotion - Colors convey feelings

Color Formats - Quick Reference

Format	Syntax	Example	Use Case
Named Colors	`color-name`	`color: red;`	Quick prototyping
Hexadecimal	`#RRGGBB`	`color: #FF5733;`	Most common
RGB	`rgb(r, g, b)`	`color: rgb(255, 87, 51);`	Decimal values
RGBA	`rgba(r, g, b, a)`	`color: rgba(255, 87, 51, 0.5);`	With transparency
HSL	`hsl(h, s%, l%)`	`color: hsl(9, 100%, 60%);`	Intuitive adjustments
HSLA	`hsla(h, s%, l%, a)`	`color: hsla(9, 100%, 60%, 0.5);`	HSL with transparency

Detailed Explanation

1. Named Colors

What it is: CSS has 140+ predefined color names.

Syntax:

color: color-name;

CSS Example:

.red-text {
    color: red;
}

.blue-bg {
    background-color: blue;
}

.green-border {
    border: 2px solid green;
}

Common named colors:

Basic: red, blue, green, yellow, orange, purple, pink, brown
Grayscale: black, white, gray, lightgray, darkgray
Shades: lightblue, darkblue, lightgreen, darkgreen

When to use:

Quick prototyping
Simple demos
Not recommended for production (use hex or RGB for precision)

2. Hexadecimal Colors

What it is: Six-digit code representing Red, Green, Blue values in hexadecimal (0-9, A-F).

Syntax:

color: #RRGGBB;
color: #RGB; /* Shorthand */

Format:

#RRGGBB - Full format
#FF0000 = Red (RR=FF, GG=00, BB=00)
#00FF00 = Green
#0000FF = Blue
#FFFFFF = White
#000000 = Black

Shorthand:

#RGB = #RRGGBB
#F00 = #FF0000 (Red)
#0F0 = #00FF00 (Green)
#00F = #0000FF (Blue)

CSS Example:

.primary {
    color: #007bff; /* Blue */
}

.success {
    color: #28a745; /* Green */
}

.danger {
    color: #dc3545; /* Red */
}

.warning {
    color: #ffc107; /* Yellow */
}

.dark {
    color: #343a40; /* Dark gray */
}

.light {
    background-color: #f8f9fa; /* Light gray */
}

When to use:

Most common format in production
Design tools export hex colors
Easy to copy/paste

3. RGB Colors

What it is: Specifies colors using Red, Green, Blue values (0-255).

Syntax:

color: rgb(red, green, blue);

CSS Example:

.red {
    color: rgb(255, 0, 0); /* Pure red */
}

.green {
    color: rgb(0, 255, 0); /* Pure green */
}

.blue {
    color: rgb(0, 0, 255); /* Pure blue */
}

.purple {
    color: rgb(128, 0, 128);
}

.gray {
    color: rgb(128, 128, 128);
}

When to use:

When working with decimal values
JavaScript color manipulation
More readable than hex for some people

4. RGBA Colors (with Alpha/Transparency)

What it is: RGB with an alpha channel for transparency (0-1).

Syntax:

color: rgba(red, green, blue, alpha);

Alpha values:

0 = Fully transparent
0.5 = 50% transparent
1 = Fully opaque

CSS Example:

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* 50% transparent black */
}

.semi-transparent-blue {
    background-color: rgba(0, 123, 255, 0.3); /* 30% opaque blue */
}

.glass-effect {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

Real-world scenario: Modal overlay with semi-transparent background:

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
}

5. HSL Colors

What it is: Hue, Saturation, Lightness - more intuitive for color adjustments.

Syntax:

color: hsl(hue, saturation%, lightness%);

Values:

Hue: 0-360 (color wheel degrees)
- 0 = Red
- 120 = Green
- 240 = Blue
- 360 = Red (full circle)
Saturation: 0-100%
- 0% = Grayscale
- 100% = Full color
Lightness: 0-100%
- 0% = Black
- 50% = Normal
- 100% = White

CSS Example:

.red {
    color: hsl(0, 100%, 50%); /* Pure red */
}

.green {
    color: hsl(120, 100%, 50%); /* Pure green */
}

.blue {
    color: hsl(240, 100%, 50%); /* Pure blue */
}

.light-blue {
    color: hsl(200, 80%, 70%); /* Light blue */
}

.dark-blue {
    color: hsl(200, 80%, 30%); /* Dark blue */
}

Creating color variations:

:root {
    --primary-hue: 200;
}

.primary {
    background-color: hsl(var(--primary-hue), 80%, 50%);
}

.primary-light {
    background-color: hsl(var(--primary-hue), 80%, 70%); /* Lighter */
}

.primary-dark {
    background-color: hsl(var(--primary-hue), 80%, 30%); /* Darker */
}

When to use:

Creating color variations (lighter/darker)
More intuitive than RGB
Easy to adjust brightness and saturation

6. HSLA Colors (with Alpha)

What it is: HSL with transparency.

Syntax:

color: hsla(hue, saturation%, lightness%, alpha);

CSS Example:

.semi-transparent-red {
    background-color: hsla(0, 100%, 50%, 0.5);
}

.glass-card {
    background-color: hsla(0, 0%, 100%, 0.1);
    backdrop-filter: blur(10px);
}

Color Properties

1. color (Text Color)

CSS Example:

p {
    color: #333; /* Dark gray text */
}

a {
    color: #007bff; /* Blue links */
}

.error {
    color: #dc3545; /* Red error text */
}

2. background-color

CSS Example:

body {
    background-color: #f8f9fa; /* Light gray background */
}

.card {
    background-color: white;
}

.highlight {
    background-color: #fff3cd; /* Yellow highlight */
}

3. border-color

CSS Example:

.box {
    border: 2px solid #ddd;
}

.box:hover {
    border-color: #007bff;
}

Common Color Patterns

Pattern 1: Color Palette

:root {
    /* Primary colors */
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #17a2b8;
    
    /* Neutral colors */
    --white: #ffffff;
    --light: #f8f9fa;
    --dark: #343a40;
    --black: #000000;
    
    /* Text colors */
    --text-primary: #212529;
    --text-secondary: #6c757d;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--white);
}

Pattern 2: Dark Mode

:root {
    --bg-color: #ffffff;
    --text-color: #333333;
}

[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

Pattern 3: Gradient Backgrounds

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

.gradient-2 {
    background: linear-gradient(to right, #f093fb 0%, #f5576c 100%);
}

.gradient-3 {
    background: linear-gradient(45deg, #fa709a 0%, #fee140 100%);
}

Accessibility - Color Contrast

WCAG Guidelines:

Normal text: Minimum 4.5:1 contrast ratio
Large text (18px+): Minimum 3:1 contrast ratio

Good contrast examples:

/* Good: Dark text on light background */
.good-contrast-1 {
    color: #333;
    background-color: #fff;
}

/* Good: Light text on dark background */
.good-contrast-2 {
    color: #fff;
    background-color: #333;
}

/* Bad: Low contrast */
.bad-contrast {
    color: #999; /* Too light */
    background-color: #fff;
}

Colors - Color Values and Usage

On this page