Colors

Color is one of the most expressive tools in CSS. You'll use it for text, backgrounds, borders, shadows, and gradients. Understanding color formats lets you write cleaner, more maintainable styles.

Hex Colors

Hex (hexadecimal) is the most common color format in CSS. It represents red, green, and blue channels as two-digit hex values:

color: #0f172a;       /* dark navy */
color: #6367ff;       /* brand purple */
color: #e5e7eb;       /* light gray */
color: #ffffff;       /* white */
color: #000000;       /* black */

You can also use 3-digit shorthand when each pair repeats:

color: #fff;   /* same as #ffffff */
color: #000;   /* same as #000000 */

RGB and RGBA

RGB defines colors using red, green, and blue values from 0 to 255. RGBA adds an alpha (opacity) channel from 0 (transparent) to 1 (opaque):

color: rgb(99, 103, 255);
background: rgba(99, 103, 255, 0.1);   /* 10% opacity */
border: rgba(99, 103, 255, 0.25);      /* 25% opacity */

The alpha channel is particularly useful for overlays, hover states, and subtle tints.

HSL and HSLA

HSL stands for Hue, Saturation, Lightness. Many designers find it more intuitive than hex because you can reason about colors in human terms:

/* hsl(hue, saturation%, lightness%) */
color: hsl(238, 100%, 69%);   /* purple */
color: hsl(142, 76%, 36%);    /* green */
color: hsl(0, 84%, 60%);      /* red */

/* Adjust lightness to create tints and shades */
.light { background: hsl(238, 100%, 95%); }
.dark  { background: hsl(238, 100%, 30%); }

Named Colors

CSS has 140+ named colors like red, blue, tomato, coral, and steelblue. They're convenient for quick prototyping but too imprecise for production work:

color: tomato;
background: aliceblue;
border-color: steelblue;

currentColor

The special keyword currentColor inherits the element's current color value. It's handy for SVG icons and borders that should match the text color:

.icon {
  color: #6367ff;
  fill: currentColor;   /* SVG fills with the same purple */
}

.button {
  color: #6367ff;
  border: 1.5px solid currentColor;  /* border matches text */
}

Opacity vs. Alpha

There are two ways to make something semi-transparent:

/* opacity affects the element AND all its children */
.overlay {
  background: #0f172a;
  opacity: 0.5;
}

/* rgba/hsla only affects the specific property */
.overlay {
  background: rgba(15, 23, 42, 0.5);  /* only background is transparent */
}

Gradients

CSS supports linear and radial gradients as background values:

.hero {
  background: linear-gradient(135deg, #6367ff, #c9beff);
}

.card {
  background: linear-gradient(
    to bottom right,
    rgba(255, 219, 253, 0.4),
    rgba(201, 190, 255, 0.25)
  );
}