Colors

Computer monitors are made up of thousands of tiny squares called pixels. Each pixel can be a different color. The color of each pixel is a mixture of the amounts of red, green and blue.

We're going to cover the three most common ways to specify colors in CSS:

• named colors

• hex codes

• RGB values

Named Colors

p {
    color: red;
}

Using named colors is the easiest format for adding color in CSS, but is primarily used for prototypes, since they only represent a small fraction of the available colors.

There are currently 140 color names supported by modern browsers. Red, blue gold, and maroon are just a few examples. You can find the full list below.

Color Names — HTML Color CodesHTML Color Codes

Hex Codes

p {
    color: #644B92;
}

Hex color codes are specified by a hashtag followed by three pairs of characters that represent the intensity of the three primary colors (red, green, and blue). Possible values range from 0 to 255, but are expressed in hexadecimal. 00 (the lowest intensity) to FF (the highest intensity).

• White: #FFFFFF (highest intensity for all)

• Black: #000000 (lowest intensity for all)

• Red: #FF0000

• Green: #00FF00

• Blue: #0000FF

Transparency can be specified by adding two additional digits. Values range from 00 (completely transparent) to 99 (completely opaque).

.p1 {
  background-color: #FF0000;
}
.p2 {
  background-color: #FF000050;
}

Since there are so many possibilities, web developers use color picker tools to find the hex values for colors.

Color Picker — HTML Color CodesHTML Color Codes

p {
    rgb(116, 96, 152);
}

RGB Values

RBG color codes are similar to hex, except represented by decimal values between 0 and 255 for the intensity of the red, green and blue colors.

• White: rgb(255, 255, 255) (highest intensity for all)

• Black: rgb(0, 0, 0) (lowest intensity for all)

• Red: rgb(255, 0, 0)

• Green: rgb(0, 255, 0)

• Blue: rgb(0, 0, 255)

Transparency : add a fourth value to indicate the transparency. Values range from 0 (completely transparent) to 1 (completely opaque).

.p1 {
    background-color: rgb(255, 0, 0);
}

.p2 {
    background-color: rgb(255, 0, 0, .5);
}

HSL

Defining Colors in CSS

Resources

The following page has a very good overview of the different options and formats for specifying colors.

Defining Colors in CSS