Defining Colors in CSS

We discussed how to select specific HTML elements in the previous lesson. Now, let's explore what we can do with those selected elements.

A great starting point is changing its color.

After selecting a <p> element, you can change the text color by specifying a color property.

p {
  color: red;
}

The color property accepts descriptive color names such as red, darkorange, and so on.

However, there are so many different colors in the world, and not all of them have names. That is why CSS offers more accurate ways to specify colors, including RGB, HEX, and HSL.

Defining a color using RGB

RGB stands for Red, Green, and Blue. They are the fundamental colors in computer science. Mixing them together can create every color in the world.

The RGB color is defined with the function rgb():

rgb(<red>, <green>, <blue>)

The parameters <red>, <green>, and <blue> define the intensity of each color, using integer values between 0 and 255.

0 is the weakest, and 255 is the strongest.

For example, the following example is the same as color: red;.

p {
  color: rgb(255, 0, 0);
}

If you mix the colors together, you will be able to create all kinds of different colors.

p {
  color: rgb(168, 189, 45);
}

Adding transparency

There is also a sibling function called rgba(), which takes an extra parameter.

p {
  color: rgba(<red>, <green>, <blue>, <alpha>);
}

The last parameter, <alpha>, specifies the element's transparency.

It accepts values from 0 to 1. 0 being completely transparent, and 1 being completely solid.

p {
  color: rgba(167, 189, 45, 0.408);
}

Defining HEX color

HEX colors are specified with a hexadecimal number like this:

#rrggbb

The hex color code always starts with a #, and it is essentially a shorthand for the rgb() formula.

Each variable, rr, gg, and bb, is a hex value from 00 to ff, which corresponds to decimal numbers from 0 to 255.

For example:

p {
  color: #ff0000;
}

This is the same as color: rgb(255, 0, 0); and color: red;.

Similarly, you can specify an alpha value to control the transparency of the element.

#rrggbbaa

aa also takes values from 00 to ff, which are remapped to decimal values between 0 and 1.

p {
  color: #a7bd2d68;
}

The above example is equivalent to rgba(167, 189, 45, 0.408).

HSL color

If you are familiar with graphic design, you are probably familiar with this color model. HSL takes three variables:

hsl(<hue>, <saturation>, <lightness>)

hue is the degree on a color wheel, from 0 to 360. A color wheel looks like this:

Notice that this wheel has no black, white, or gray. That is the job for the parameters saturation and lightness.

saturation takes a percentage value, from 0 to 100, which determines how much gray should be added to the original color. 0 means the color is completely gray, and 100 means no gray is added.

lightness is also a percentage value, which determines how much black or white is added to the original color.

Lastly, hsla() is a similar formula that allows you to specify an alpha value, which controls the element's transparency.

hsla(hue, saturation, lightness, alpha)

p {
  color: hsla(69, 62%, 46%, 0.408);
}

This example is the same as #a7bd2d68 and rgba(167, 189, 45, 0.408).