CSS Colors

CSS Colors

Colors bring a page to life! CSS gives you many ways to write them.

1. Color names

The easiest: just say the name.

h1 {
  color: tomato;
}
p {
  color: dodgerblue;
}

There are 148 named colors: red, blue, gold, navy, lavender, and more.

2. RGB values

RGB = Red, Green, Blue, each from 0 to 255.

p {
  color: rgb(255, 0, 0);    /* pure red */
  color: rgb(0, 0, 255);    /* pure blue */
  color: rgb(255, 255, 255);/* white */
  color: rgb(0, 0, 0);      /* black */
}

Mix the three lights to make any color!

3. RGBA (with alpha)

rgba() adds an alpha channel for transparency, from 0 (invisible) to 1 (solid).

p {
  color: rgba(255, 0, 0, 0.5); /* half-transparent red */
}

4. HSL values

Hue (angle on a color wheel), Saturation (%), Lightness (%).

p {
  color: hsl(0, 100%, 50%);     /* red */
  color: hsl(120, 100%, 50%);   /* green */
  color: hsl(240, 100%, 50%);   /* blue */
}

Add a for alpha: hsla(0, 100%, 50%, 0.5).

The modern syntax (level 4)

Newer syntax lets you use the / separator for alpha (like rgb(255 0 0 / 0.5)) and 8-digit hex like #ff000080. Modern browsers support both old and new:

p {
  color: #ff000080;              /* red with 50% alpha */
  color: rgb(255 0 0 / 0.5);     /* modern space syntax */
  color: hsl(0 100% 50% / 0.5);
}

Shortcut keywords

• currentColor: the same color as the element's color property.
• transparent: fully see-through.

TL;DR

• Names: tomato, navy, gold.
• rgb(r,g,b), rgba(r,g,b,a).
• #ff0000 and #ff000080 (hex + alpha).
• hsl(h,s%,l%), hsla(h,s%,l%,a).
• Add transparent and currentColor to your toolbox.