CSS Colors

Color Formats

CSS supports several color formats: named colors, hexadecimal, RGB, RGBA, HSL, and HSLA.

Named colors are predefined keywords like 'red', 'blue', 'green'. There are 140+ named colors in CSS.

Hexadecimal colors use # followed by 6 (or 3) hex digits representing red, green, and blue values.

RGB uses rgb(red, green, blue) with values 0-255 for each color channel.

HSL uses hsl(hue, saturation%, lightness%) - hue is 0-360, saturation and lightness are percentages.

/* Named colors */
h1 {
  color: darkblue;
  background-color: lightgray;
}

/* Hexadecimal */
p {
  color: #333333;      /* Dark gray */
  background: #ff0000; /* Red */
}

/* Shorthand hex (when values repeat) */
.box {
  color: #333;         /* Same as #333333 */
  border: 1px solid #f00; /* Same as #ff0000 */
}

/* RGB */
.alert {
  color: rgb(255, 0, 0);         /* Red */
  background: rgb(255, 255, 0);  /* Yellow */
}

/* HSL */
.button {
  background-color: hsl(200, 100%, 50%); /* Blue */
  color: hsl(0, 0%, 100%);               /* White */
}

Transparency and Alpha

RGBA and HSLA add an alpha channel for transparency, with values from 0 (fully transparent) to 1 (fully opaque).

Transparency affects only the element's color, not its children (unlike opacity property).

Hex colors can also include alpha with 8 digits: #RRGGBBAA.

Use transparency for overlays, hover effects, and layered designs.

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

.highlight {
  background-color: rgba(255, 255, 0, 0.3); /* 30% transparent yellow */
}

/* HSLA (HSL with alpha) */
.banner {
  background-color: hsla(200, 100%, 50%, 0.7); /* 70% opaque blue */
}

/* 8-digit hex with alpha */
.button {
  background-color: #ff000080; /* 50% transparent red */
}

/* Hover effect */
.card {
  background: rgba(255, 255, 255, 0.9);
}

.card:hover {
  background: rgba(255, 255, 255, 1);
}

Color Properties

The color property sets the text color of an element.

The background-color property sets the background color.

The border-color property sets the color of borders.

The outline-color property sets the color of outlines.

Colors inherit from parent elements unless explicitly set.

/* Text color */
p {
  color: #333;
}

/* Background color */
body {
  background-color: #f5f5f5;
}

.hero {
  background-color: navy;
  color: white;
}

/* Border color */
.box {
  border: 2px solid;
  border-color: red;
}

/* Outline color */
button:focus {
  outline: 2px solid;
  outline-color: blue;
}

/* Multiple border colors */
.fancy-border {
  border-style: solid;
  border-width: 2px;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
}

Color Keywords

CSS includes special color keywords: transparent, currentColor, and inherit.

transparent is fully transparent (equivalent to rgba(0,0,0,0)).

currentColor uses the element's current text color value.

inherit explicitly inherits the parent's color value.

These keywords are useful for maintaining consistency and reducing duplication.

/* Transparent */
.overlay {
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/* currentColor */
.icon {
  color: blue;
  border: 2px solid currentColor; /* Border will be blue */
}

.link {
  color: red;
}

.link svg {
  fill: currentColor; /* SVG will be red */
}

/* Inherit */
.child {
  color: inherit; /* Use parent's color */
}

/* Practical use */
button {
  color: white;
  background: blue;
  border: 2px solid transparent;
}

button:hover {
  background: transparent;
  color: blue;
  border-color: currentColor;
}

Color Accessibility

Ensure sufficient color contrast between text and background for readability.

WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Don't rely on color alone to convey information - use text labels, icons, or patterns too.

Test your color choices with colorblind simulators to ensure accessibility.

Use tools like WebAIM's Contrast Checker to verify contrast ratios.

/* Good contrast */
.readable {
  color: #333;           /* Dark gray text */
  background: white;     /* White background */
  /* Contrast ratio: 12.6:1 - Excellent */
}

/* Poor contrast (avoid) */
.hard-to-read {
  color: #ccc;          /* Light gray text */
  background: white;    /* White background */
  /* Contrast ratio: 1.6:1 - Fails WCAG */
}

/* Don't rely only on color */
.error {
  color: red;
  border-left: 4px solid red; /* Visual indicator */
}

.error::before {
  content: '⚠ ';      /* Icon provides meaning */
}

/* Use patterns for charts */
.bar-chart .category-a {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
}