CSS Colors

RGB

Historically, the most common way of specifying a color in digital format has been through the RGB color model. This model specifies a color by combining red, green and blue. Almost all monitors we use today have pixels made up of red, green and blue diodes. These three colors are often called the additive primary colors, since we can choose almost any color we want by combining them in different ways.

CSS allows us to specify RGB colors using a hexadecimal notation or a functional notation. They're both equally capable, and it is mostly a matter of taste which one you use. Both options allow us to choose a number between 0 and 255 for the red, green and blue components.

255 * 255 * 255 = 16 777 216

In other words, we have access to over 16 million different colors.

Hex notation

The hexadecimal notation uses the hexadecimal characters (0-9, A-F) to specify the portion of each additive primary color.

h1 {
  color: #RRGGBB;
}

We tell the CSS parser we are using hexadecimal notation by starting the value with a # symbol and follow it up with the red, green and blue components.

In addition to the RGB components, we can specify an optional alpha component that represents the color's transparency.

.dark {
  color: #4A5768;
}

.dark-alpha {
  color: #4A5768C0;
}

I am dark

I have the same RGB components, but am 75% opaque

Functional notation

The functional notation uses the numbers between 0 and 255 to specify the portion of each additive primary color.

h1 {
  color: rgb(0-255, 0-255, 0-255);
}

As with the hex notation, we can specify an optional alpha component that represents the color's transparency.

.dark-alpha {
  color: rgba(74, 87, 104, 75%);
}

Copy
rgba(255, 255, 255, 0.9)

Copy
#CACACA

<div class="book-quote">
  <p>
    I had a little pride, as I have said, and that was good. More would have been fatal.
  </p>
  <footer>
    -- Circe, <em>page 72</em>
  </footer>
</div>

.book-quote {
  background-color: rgb(55, 55, 55);
  padding: 1em;
  border-radius: 1em;
}

.book-quote footer {
  text-align: right;
}