In this tutorial, we’ll be learning about colors in CSS.

Without CSS, our web pages would look pretty dull. In HTML we get a plain white background, black text and blue links. And that’s about it.

So let’s use CSS to add some color!

Working with colors

The CSS color property sets the color of our text:

p {
  color: lime;
}

The color property can accept any CSS color value. Which are categorized as: named colors, hex colors, RGB & RGBa colors or HSL & HSLa colors.

Let’s take a look at each!

Named Colors

p {
  color: lime;
}

Named colors (or keyword colors) are CSS keywords that define colors. Such as: red, blue, lime, aqua, lightcoral, etc.

CSS originally started with 16 colors, however today there tons of options. Check out the list of supported colors.

Named colors are great for convenience. However, to get more specific colors we should look at other options.

Hex Colors

Hex (or hexidecimal) colors, are defined with alphanumeric values.

For example:

p {
  color: #00FFFF;
}

Each hex color is expressed as a six-digit combination of numbers and letters defined by its mix of red, green and blue (RGB).

In the above example, the first two characters represent the red value, the second two the green value, and the third the blue value. The range is from 00 to FF.

The hex code is essentially shorthand for its RGB value!

In the case where our pairs of red, blue, and green values are all doubles, we can abbreviate the value to a 3 character shorthand. So #FFFFFF can be abbreviated to #FFF.

color: #FFFFFF; /* white */
color: #FFF;    /* also white! */

RGB and RGBa Colors

Alternatively, you can use rgb() to calculate a color from its RGB notation.

To define our colors, we use a comma-separated list of three numeric values (ranging from 0 to 255). The first represents the red value, the second is the green value, and the third is the blue value. For example:

color: rgb(255, 255, 255);  /* white */
color: rgb(0, 0, 0);        /* black */
color: rgb(255, 0, 0);      /* red */
color: rgb(34, 139, 34);    /* forest green*/

We can use rgba() to adjust opacity. With RGBa we add a fourth value. The value is a number within a range from 0.0 (fully transparent) to 1 (fully opaque). For example:

p {
  color: rgba(0, 255, 255, .5);
}

HSL and HSLa Colors

HSL (Hue Saturation Lightness) colors are a more recent addition to CSS.

As with RGB we also use a comma-separated list of three values. The first is the degree of Hue (from 0 to 360), then a Saturation percentage (from 0% to 100%), and then a Lightness percentage (from 0% to 100%).

color: hsl(0, 0%, 0%);    /* black */
color: hsl(0, 0%, 100%);  /* white */

HSL colors are opaque by default.

To add opacity, use hsla() adding a fourth value ranging from 0.0 (fully transparent) to 1 (fully opaque).

color: hsla(180, 100%, 50%, .5);

Color accessibility

When working with colors we should always mindful of accessibility. By ensuring the contrast ratio between the color of the text and the background meets a certain standard. This way people with vision considerations are still able to read the content of the page.

The ratio is determined by comparing the luminosity of the text and background color values. And we can compare colors with the Web Content Accessibility Guidelines (WCAG) color checker tool.

Wrapping up..

And there you go! We’ve seen how to add color to our pages with named, HEX, RGB & HSL colors. Next up we’ll be looking at working with backgrounds in CSS. See you then!

Related posts:

• The CSS Box Model