Table of Contents

CSS Colors

Colors in CSS can be represented in 3 ways.

  1. a valid color name (example: "white", "blue", "green")
  2. an RGB value (example: "rgb(255, 255, 255)")
  3. a Hex value (example: "#FFFFFF")

Valid Color Names

When you add CSS colors to any element you can use valid color names such as "white", "blue", "green", "pink", "black", etc...

There are about 140 valid color names you can choose from. Take a look at all the colors here: http://htmlcolorcodes.com/color-names/. When you have a color you would like to use for your CSS element you can use the following syntax to specify the color of an element.

p {
    color:blue;
}

RGB values

An RGB value is represented in Red, Green, and Blue numbers ranging from 0 to 255.

To specify an RGB value you would write it like the following: rgb(255, 255, 255). In this RGB value we are stating that we want Red to have a brightness of 255, Green to have a brightness of 255, and Blue to have a brightness of 255. And this would give us a color of white.

Take a look at a few more examples below:

RGB Examples

Using RGB values you can have an unlimited amount of colors.

Hex values

A Hex value is represented similar to an RGB value; however, instead of RGB syntax we will use Hex syntax.

Take a look at the following example: #FF0000 this would give us a color of red. The first 2 numbers or letters represent the Red, the middle set of numbers/letters represent the Green values, and the last 2 numbers/letters represent the Blue values.

A Hex value will be dark at 0 and brightest at F. The scale goes in order from 0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F

Take a look at a few more examples below:

Hex Examples

Using Hex values you can also have an unlimited amount of colors.

The color attribute

From the example above we specify that we want the color to be a certain value:

p {
    color:blue;
}

This will give the text a color of blue. But, what if we wanted to give the element a background color? Well, let's move on to that next.