Intro to CSS Colors

Colors are an important aspect of web design. They can help create a visual hierarchy, emphasize important elements, and establish a brand identity. With CSS, you have a wide range of color options available to you, from predefined color names to hexadecimal codes to RBG values. In this lesson, we explore some of the different ways to add colors to your website.

Color Names

CSS provides a list of predefined color names that you can use. These names are easy to remember and can save you time when you need a quick color change. Examples include red, green, blue, black, white, orange, purple, and many more. To use a color name in CSS, simply use the color name as the value for the color property. For example, if you want to make a heading red, you can use the following.

h1 {
  color: red;
}

Hexadecimal Colors

Hexadecimal values are another way to specify colors in CSS. Hexadecimal colors are represented by a six-digit code, with each digit representing a different component of the color (red, green, and blue). The values range from 00 to FF, with 00 being the darkest and FF being the lightest. For example, #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue. The example below sets the main heading to red using the hexadecimal value.

h1 {
  color: #FF0000;
}

RGB Colors

RGB stands for Red, Green, Blue. You can set a value for each of the three colors number from 0 to 255, where 0 means no amount of the color and 255 is the full amount. The example below uses rgb colors to turn the main heading red. Notice the first number, which stands for red is the full value of 255 and the green and blue values are set to 0.

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

RGBA – Color and Opacity

RGBA is similar to the RGB color model, but includes an additional “Alpha” parameter, which represents the opacity of the color. The red, green, and blue values are still 0 to 255, but the additional value is set between 0 and 1 and refers to opacity. An opaque object does not allow light to go through it. So a value of 1 means totally opaque. A value of 0 means totally transparent. The example below will result in a main heading being red with an opacity of 0.5 or 50%.

h1 {
  color: rgba(255, 0, 0, 0.5);
}