Colors

By default, an HTML page is rendered by web browsers quite boring in terms of the colors used.

We have a white background, black color, and blue links. That’s it.

In the previous example, we used the CSS rule

p {
  color: red;
}

You intuitively know that this applies the color red to p tags.

Before going into more complex topics of CSS, let’s talk about colors a bit more.

You’ll work with colors all the time.

The two main properties you’ll use are color and background-color.

Both of them accept a color value, which can be in different forms.

Named colors

First, we have CSS keywords that define colors.

We have a lot of them! Like white, black, red, blue, yellow, but also fancy ones like darkviolet, floralwhite, forestgreen.

On my blog, I have this article https://flaviocopes.com/rgb-color-codes/ with the full list of colors and conversions between names, RGB, and hex notations.

RGB and RGBa (rgb() / rgba())

Named colors are not the only option.

You can use rgb() to calculate a color from its RGB color code, which sets the color based on its red-green-blue parts ranging from 0 to 255:

p {
  color: rgb(255, 255, 255); /* white */
  background-color: rgb(0, 0, 0); /* black */
}

rgba() lets you add the alpha channel to enter a transparent part, so the image can be see-through. That can be a number from 0 to 1:

p {
  background-color: rgba(0, 0, 0, 0.5);
}

Hexadecimal notation (#nnnnnn)

Another commonly used option is to express the RGB parts of the colors in hexadecimal notation, which is composed of 3 blocks.

black, which is rgb(0,0,0) in RGB is expressed as #000000 . We can shortcut the 2 numbers in each pair to 1 if they are equal, so it becomes #000 .

white, rgb(255,255,255) can be expressed as #ffffff or #fff.

The hexadecimal notation lets express a number from 0 to 255 in just 2 digits since they can go from 0 to “15” (f).

You can see a calculator here.

We can add the alpha channel to support transparency or opacity by adding 1 or 2 more digits at the end, for example, #00000033. Not all browsers support the shortened notation, so use all 6 digits to express the RGB part.

We also have other notations, but I think those are the most common ones you should know about.