Learn CSS: Colors

Key Concepts

Review core concepts you need to learn to master this subject

CSS color name keywords

CSS HSL Colors

CSS rgb() Colors

CSS Hexadecimal Colors

CSS Color Alpha Values

CSS color name keywords

h1 {
  color: aqua;
}

li {
  color: khaki;
}

Color name keywords can be used to set color property values for elements in CSS.

CSS HSL Colors

h1 {
  color: aqua;
}

li {
  color: khaki;
}

CSS colors can be declared with the HSL color system using hsl() syntax. This syntax contains three values: hue (the color value itself), saturation (intensity), and lightness.

Hue values range from 0 to 360 while saturation and lightness values are represented as percentages.

CSS rgb() Colors

h1 {
  color: aqua;
}

li {
  color: khaki;
}

CSS colors can be declared with RGB colors using rgb() syntax.

rgb() should be supplied with three values representing red, green, and blue. These values range can from 0 to 255.

CSS Hexadecimal Colors

h1 {
  color: aqua;
}

li {
  color: khaki;
}

CSS colors can be represented in hexadecimal (or hex) notation. Hexadecimal digits can represent sixteen different values using 0-10 and a-f.

Hexadecimal colors are composed of 6 characters–each group of two represents a value between 0 and 255 for red, green, or blue. For example #ff0000 is all red, no green, and no blue.

When both characters of all three colors are repeated, hex colors can be abbreviated to only three values, so #0000ff could also be represented as #00f.

CSS Color Alpha Values

h1 {
  color: aqua;
}

li {
  color: khaki;
}

Alpha values determine the transparency of colors in CSS. Alpha values can be set for both RGB and HSL colors by using rgba() and hsla() and providing a fourth value representing alpha. Alpha values can range between 0.0 (totally transparent) and 1.0 (totally opaque).

The CSS transparent value can also be used to create a fully transparent element.

CSS Color

Lesson 1 of 1

1
CSS supports a wide variety of colors. These include named colors, like blue, black, and LimeGreen, along with colors described by a numeric value. Using a numeric system allows us to take advant…
2
Before discussing the specifics of color, it’s important to make two distinctions about color. Color can affect the following design aspects: 1. The foreground color 2. The background color Foreg…
3
One syntax that we can use to specify colors is called hexadecimal. Colors specified using this system are called hex colors. A hex color begins with a hash character (#) which is followed by…
4
There is another syntax for representing RGB values that uses decimal numbers. It looks like this: h1 { color: rgb(23, 45, 23); } Here, each of the three values represents a color component, an…
5
The hexadecimal and RGB color system can represent many more colors than the small set of CSS named colors. We can use this new set of colors to refine our web page’s style. In both hex and decima…
6
The RGB color scheme is convenient because it’s very close to how computers represent colors internally. There’s another equally powerful system in CSS called the hue-saturation-lightness color sch…
7
All of the colors we’ve seen so far have been opaque, or non-transparent. When we overlap two opaque elements, nothing from the bottom element shows through the top element. In this exercise, we’ll…
8
We’ve completed our extensive tour of the colors in CSS! Let’s review the key information we’ve learned. There are four ways to represent color in CSS: * Named colors — there are 147 named…