Colors

We're going to cover the three most common ways to specify colors in CSS: named colors, hex codes, and 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 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

CSS Color Properties

• color: text color, such as for paragraphs, headings

• background-color: background color for any element that supports a background color.

• border-color: border color for any element that has a border.

Resources

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

Defining Colors in CSS