Complete CSS Colors Guide

1. What are CSS Colors?

CSS provides several ways to define colors, including HEX, RGB, RGBA, HSL, HSLA and predefined color names. Choosing the right format makes your styles easier to maintain while helping create consistent, accessible and visually appealing websites.

2. CSS Color Formats

Stylesheets support multiple functions to represent color coordinates:

3. Predefined Named Colors

CSS includes 148 predefined color keywords like red, gold, tomato, rebeccapurple, and cornflowerblue.

4. Custom CSS Variables

Declaring color variables inside the :root selector helps you manage themes and avoid hardcoding color codes.

:root {
  --primary-color: #3498DB;
  --secondary-color: #2ECC71;
}

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

5. Every CSS Color Property

You can style various parts of your elements using specific CSS color properties:

6. Opacity & Transparency

Transparency can be declared in several ways in CSS:

• Opacity Property: Applying opacity: 0.5; makes the entire element (including text and children) translucent.
• Alpha Channels: Using rgba(), hsla(), or 8-digit HEX leaves child elements fully opaque.
• transparent Keyword: Sets background transparency without affecting text.
• currentColor Keyword: Automatically inherits the text color of the current element.

7. CSS Color Level 4 & 5

Modern browsers support wide color gamuts that go beyond the standard sRGB space.

CSS Color Level 4: Wide-Gamut Spaces

Functions like lab(), lch(), hwb(), oklab(), and oklch() allow monitors to project brighter, more saturated reds, greens, and blues.

CSS Color Level 5: Dynamic Color Functions

Introduces color mixing functions like color-mix() and Relative Color Syntax (RCS) to modify color values directly in your stylesheets:

/* CSS Level 5 examples */
background-color: color-mix(in srgb, var(--primary) 80%, white);
background-color: rgb(from var(--primary) r g b / 50%); /* RCS */

8. Variables in Frameworks

Color variables can be declared in popular design frameworks like Tailwind CSS, Bootstrap, and Material Design:

theme: { extend: { colors: { brand: '#3498db' } } }

$primary: #3498db;

palette: { primary: { main: '#3498db' } }

9. Dark Mode Implementation

You can implement dark mode easily by redefining your CSS variables inside media queries or target classes:

:root {
  --background: #FFFFFF;
  --text: #1E293B;
  --border: #E2E8F0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0F172A;
    --text: #F8FAFC;
    --border: #334155;
  }
}

10. WCAG Accessibility Rules

To ensure readable contrast between text and background colors, you must comply with WCAG accessibility standards:

• WCAG AA Standard: Requires a minimum contrast ratio of 4.5:1 for body copy and 3.0:1 for large text.
• WCAG AAA Standard: Requires a minimum contrast ratio of 7.0:1 for body copy and 4.5:1 for large text.

11. Comparison Tables

12. CSS Design Examples

.btn { background-color: #3498DB; color: white; border: 1px solid #2980B9; }

.alert { background: #FADBD8; border-left: 5px solid #E74C3C; color: #78281F; }

13. Frequently Asked Questions