CSS Colors

Colors

CSS supports multiple ways to define colors. The most common formats are:

• Color keywords (e.g., red, rebeccapurple)
• HEX (e.g., #ff0000)
• RGB / RGBA (e.g., rgb(255, 0, 0), rgba(255, 0, 0, 0.5))
• HSL / HSLA (e.g., hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0.5))

Colors can be applied to many properties, such as color, background-color, border-color, and outline-color.

.demo {
  color: #222;
  background-color: rgb(240, 240, 240);
  border: 2px solid hsl(210, 80%, 40%);
}

Short HEX is also supported when each pair is repeated:

.box1 { background: #ffcc00; }
.box2 { background: #fc0; } /* same as #ffcc00 */

RGBA / HSLA add an alpha channel (transparency) where:

• 0 = fully transparent
• 1 = fully opaque

.overlay {
  background: rgba(0, 0, 0, 0.55);
}

Tip: For UI overlays, using alpha on the background color is usually better than using opacity, because opacity also affects child elements.

/* Better */
.overlay { background: rgba(0,0,0,.55); }

/* Avoid if you only want the background transparent */
.bad-overlay { opacity: .55; }

Color Keywords

CSS includes a large set of built-in color keywords. These are easy to read and useful for quick prototypes.

.keyword-demo {
  background: tomato;
  color: white;
  border-color: dodgerblue;
}

Some keywords are especially useful in real projects:

• transparent – fully transparent color
• currentColor – uses the current color value (great for borders/icons)
• inherit – inherits the parent value (works for many properties)

.icon {
  color: #0b5ed7;
  border: 2px solid currentColor;
}

.box {
  background: transparent;
}

Note: Keyword colors depend on the CSS specification and browser support, but common keywords are supported everywhere. For consistent design systems, HEX/RGB/HSL are often preferred.

Summary

• CSS supports keywords, HEX, RGB/RGBA, and HSL/HSLA color formats.
• Use alpha (RGBA/HSLA) for transparent backgrounds instead of opacity when you do not want child elements to fade.
• Use transparent and currentColor for practical UI patterns.