CSS Colors

|December 3, 2020

CSS has three main ways to set a color: named colors like lightcoral, hex codes like #000000, and RGB values like rgb(255, 255, 255). There's also RGBA, which adds transparency so you can layer colors on top of each other. Every color property accepts all of them, so color, background-color, border-color, and the rest work the same way once you know the syntax.

This is a written version of my beginner CSS crash course video. If you'd rather watch me build it in the editor, the video is embedded near the bottom.

Key Takeaways

CSS accepts color as a named keyword, a hex code, or an rgb() value, and they're interchangeable on any color property.
Named colors are quick to read but limited to a fixed list of roughly 140 keywords.
Hex and RGB can express any color in the 24-bit range, which is why most stylesheets lean on them.
RGBA (and the 8-digit hex form) add an alpha channel from 0 to 1 for transparency.
Stacking semi-transparent colors lets lower layers bleed through, which is the basis for overlays and tints.

Setting up the demo

First you need something to color. Start with a plain HTML5 page linked to a stylesheet.

html

<!-- colors.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>CSS Colors</title>
  <link rel="stylesheet" href="colors.css" />
</head>
<body>
  <div id="color-container">
    <h1>CSS Colors</h1>
    <h2>Using colors with CSS</h2>
  </div>
</body>
</html>

The container's id can be anything you want. It just needs a name you can target from CSS. I like to split the editor so the HTML sits on the left and the stylesheet on the right, then keep a browser tab open to refresh as I go.

Named colors

The fastest way to set a color is to type its name.

css

#color-container {
  background-color: lightcoral;
}

Save, refresh, and the container fills with a soft coral. lightcoral is one I reach for often, but the list is long. If you're in VS Code, delete the value and start typing: it suggests matching keywords as you go. Type light and you get every light variant, type dark and you get the dark ones, and common names like lightgray, white, red, and black are all there.

Named colors read well in a stylesheet, so they're good for learning and rough drafts. The catch is there are only about 140 of them (MDN: named colors). As soon as a design needs a specific brand color, you've outgrown the list.

Hex codes

Hex codes get rid of that limit. A hex color is a # followed by six characters: two for red, two for green, two for blue, each running from 00 to ff.

css

h1 {
  color: #000000; /* black: no red, no green, no blue */
}

All zeros is black. All fs (#ffffff) is white. Anything in between is a mix. In VS Code, hover over the value and a color picker appears: pick a hue on the right, then slide the shade on the left, and the editor writes the hex for you.

Two shortcuts worth knowing:

3-digit shorthand. When each pair repeats, you can collapse it. #000000 becomes #000, #ffffff becomes #fff, #3366cc becomes #36c.
8-digit hex for transparency. Add two more characters for alpha. #00000059 is black at roughly 35% opacity.

Hex covers the full 24-bit color range, so you can represent basically any color you'd want on the web. That range is the main reason hex beats named colors for real work.

RGB

rgb() expresses the same idea as hex, just in decimal.

css

h2 {
  color: rgb(255, 255, 255); /* white */
}

It takes three values in parentheses, each from 0 to 255. 0 contributes none of that channel, 255 contributes all of it. rgb(255, 0, 0) is pure red, rgb(0, 0, 0) is black, and rgb(255, 255, 255) is white because all three channels are maxed out. VS Code gives you the same hover color picker here and fills in the numbers when you pick a color.

Hex and RGB describe identical colors. Which one you use is mostly preference. RGB reads more clearly when you're adjusting a single channel by hand, and hex is more compact to paste around.

RGBA and transparency

Add a fourth value and rgb() becomes rgba(). That fourth value is alpha, the opacity, and it runs from 0 (fully transparent) to 1 (fully opaque).

html

<h3>This is alpha</h3>

css

h3 {
  color: rgba(0, 0, 0, 0.35);
}

The text color here is black, but at 0.35 alpha it lets 65% of whatever is behind it show through. In VS Code's color picker there's a transparency slider alongside the usual controls. Alpha works anywhere a color works, including background-color, borders, and shadows.

Layering colors with alpha

Transparent colors let lower layers through, so you can stack them. Wrap the heading in another element and give that one its own semi-transparent background.

html

<div id="sub-container">
  <h3>This is alpha</h3>
</div>

css

#sub-container {
  background-color: rgba(255, 0, 0, 0.35); /* red at 35% over the coral container */
}

You don't get solid red. The coral container underneath bleeds through the 35% red, and the two mix optically. Swap the red for rgba(0, 128, 0, 0.35) and the blend shifts toward green. Change the alpha and it shifts again.

Play with the hue and the alpha together and you'll quickly see how overlays on real sites are built.

Where to go next

This covers the basics. CSS color also includes hsl() and hwb() for describing colors by hue and lightness, the newer space-separated syntax (rgb(0 0 0 / 35%)), gradients, and drop shadows. Those build on the same three foundations, so get comfortable with named colors, hex, and RGB first.

Share this article: