CommonLounge Archive

CSS Colors

March 19, 2019

In this tutorial, we will learn how to specify color values in CSS, and develop an understanding of the CSS color models like rgb, rgba, hsl and hex color codes. Once you know how to specify the colors, the same color values can be used everywhere in CSS, whether you are specifying text color, background color, or whatever else.

Keywords

The simplest, oldest way to specify color in CSS is to use the color keywords. These are specific strings that represent particular color values. For example, look at the following code:

HTML:

<p>This paragraph has a blue background</p>

CSS:

p {
  background-color: blue;
}

Click on “Try it Now” below and hit the Run button to see the result for yourself.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
      p {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <p>This paragraph has a blue background</p>
  </body>
</html>

While easy to understand, it only really allows us to specify very few color values. There are around 165 different keywords available for use in modern web browsers.

You’ll probably use pure colors like red, black and white regularly in your work, but beyond that, you’ll want to use another color system.

RGB

The second way to specify color values we’ll talk about is the RGB, or Red Green and Blue color system. These values are a bit more complex and less easy to understand, but they are a lot more versatile than keywords we looked at the last section. You can use RGB values to represent any color you want to use in your color scheme.

An RGB value is a function — rgb() — which is given three parameters that represent the intensity of the red, green and blue channel values of the colors. Each parameter is an integer between 0 and 255.

Let’s rewrite our last example to use RGB colors:

HTML:

<p>This paragraph has a blue background</p>

CSS:

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

Click on “Try it Now” below and hit the Run button to see the result for yourself!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
      p {
          background-color: rgb(0,0,255);
      }
    </style>
  </head>
  <body>
    <p>This paragraph has a blue background</p>
  </body>
</html>

Note: You may be wondering why we specify the values from 0 to 255 and not 1 to 256? Computer systems tend to count from 0, not 1. So to allow 256 possible values, RGB colors take values in the range of 0 to 255.

HSL

The next color system we’ll talk about is the HSL model, which was implemented after a lot of interest from designers — instead of red, green and blue values, the hsl() function accepts hue, saturation, and lightness values. Like red, green and blue, these also help us distinguish between colors, but in a different way. Here’s what they mean:

  1. hue: the base shade of the color. This takes a value between 0 and 360, presenting the angles around a color wheel.
  2. saturation: how saturated is the color? This takes a value from 0-100%, where 0 is no color (it will appear as a shade of grey) and 100% is full color saturation.
  3. lightness: how light or bright is the color? This takes a value from 0-100%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white)

An HSL color cylinder. (Image courtesy of Wikipedia, distributed under the CC BY-SA 3.0 license.)

Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white).

Let us look at a code example.

HTML:

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>

CSS:

/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: hsl(0,100%,50%);
}
/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: hsl(240,100%,50%);
}

Click on Try it Now below and hit the Run button to see the result for yourself!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
      /* equivalent to the red keyword */
      p:nth-child(1) {
          background-color: hsl(0,100%,50%);
      }
      /* equivalent to the blue keyword */
      p:nth-child(2) {
          background-color: hsl(240,100%,50%);
      }
    </style>
  </head>
  <body>
    <p>This paragraph has a red background</p>
    <p>This paragraph has a blue background</p>
  </body>
</html>

The HSL color model is intuitive to designers that are used to working with such color models. It is useful for, for example, finding a set of shades to go together in a monochrome color scheme:

/* three different shades of red*/
background-color: hsl(0,100%,50%);
background-color: hsl(0,100%,60%);
background-color: hsl(0,100%,70%);

RGBA and HSLA

RGB and HSL both have corresponding modes — RGBA and HSLA — that allow you to set not only what color you want to display, but also what transparency you want that color to have. Their corresponding functions take the same parameters, plus a fourth value in the range 0–1 — which sets the transparency, or alpha channel. 0 is completely transparent, and 1 is completely opaque.

Let’s show another quick example — first the HTML:

<p>This paragraph has a transparent red background</p>
<p>This paragraph has a transparent blue background</p>

Now the CSS:

p {
  height: 50px;
  width: 350px;
}
/* Transparent red */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
}
/* Transparent blue */
p:nth-child(2) {
  background-color: hsla(240,100%,50%,0.5);
}

Click on “Try it Now” below and hit the Run button to see the result for yourself!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
      p {
          height: 50px;
          width: 350px;
      }
      /* Transparent red */
      p:nth-child(1) {
          background-color: rgba(255,0,0,0.5);
      }
      /* Transparent blue */
      p:nth-child(2) {
          background-color: hsla(240,100%,50%,0.5);
      }
    </style>
  </head>
  <body>
    <p>This paragraph has a transparent red background</p>
    <p>This paragraph has a transparent blue background</p>
  </body>
</html>

Transparent colors are very useful for richer visual effects — blending of backgrounds, semi-transparent UI elements, etc.

Hexadecimal values

The next ubiquitous color system is hexadecimal values, or hex codes. Each hex value consists of a hash/pound symbol (#) followed by six hexadecimal digits, each of which can take a value between 0 and f (which represents 15) — so one of 0123456789abcdef. Out of the six digits, the first two represent the red channel, the next two represent the green channel and the last two represent the blue channel.

Let’s quickly understand what we mean by the hexadecimal number system. It may be useful to compare it to the decimal number system, that we’re already familiar with:

  • In the decimal number system (a base-10 number system), we have 10 digits (0 to 9). A value of 342 can be represented as:
  342
= 3 * 10^2 + 4 * 10^1 + 2 * 10^0
= 3 * 100 + 4 * 10 + 2 * 1
= 300 + 40 +2
= 342
  • In the hexadecimal number system (a base-16 number system), we have 16 digits (0 to 9 and then a to f). A value of 5a can be represented as:
  5a3
= 5 * 16^2 + a * 16^1 + 3 * 16^0
= 5 * 256 + 10 * 16 + 3 * 1
= 1280 + 160 + 3
= 1443

We saw that the first two hexadecimal digits represent the value for color red, the next two for green, and the last two for blue. Thus, between 00 (which stands for 0) and FF (which stands for F*16 + F*1 = 255) i.e., 0 to 255, we have 256 values for each channel.

Let’s look at this again with an example. Let us convert a color like #4a90e2 (a shade of blue) to rgb:

  #4a90e2
= [Red](4a), [Green](90), [Blue](e2)
= [Red](16*4 + 1*a), [Green](16*9 + 1*0), [Blue](16*e + 1*2)
= [Red](16*4 + 1*10), [Green](16*9 + 1*0), [Blue](16*14 + 1*2)
= [Red](74), [Green](144), [Blue](226)
= rgb(74,144,226)

Hope that makes it clear. The main point you want to remember is that in 6-digit hex color codes, the first two digits are red, the next two green and the last two blue, and that 00 is the minimum and ff is the maximum possible value for each.

Let us look at a code example.

HTML

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>

CSS

/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: #ff0000;
}
/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: #0000ff;
}

Click on Try it Now below and hit the Run button to see the result for yourself!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
      /* equivalent to the red keyword */
      p:nth-child(1) {
          background-color: #ff0000;
      }
      /* equivalent to the blue keyword */
       p:nth-child(2) {
          background-color: #0000ff;
      }
    </style>
  </head>
  <body>
    <p>This paragraph has a red background</p>
    <p>This paragraph has a blue background</p>
  </body>
</html>

Time for a quick question:

Comparision with RGB

The hex values have the widest possible support. In addition, the RGB system is also nearly as well supported as the hex values — you probably won’t come across any browsers that don’t support them in your work. The RGB values are arguably a bit more intuitive and easy to understand than hex values. You may consider hex values as a shorthand for RGB.

Opacity

There is another way to specify transparency via CSS — the opacity property. Instead of setting the transparency of a particular color, this sets the transparency of all selected elements and their children. Again, let’s study an example so we can see the difference.

HTML:

<p>This paragraph is using RGBA for transparency</p>
<p>This paragraph is using opacity for transparency</p>

CSS:

/* Red with RGBA */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
}
/* Red with opacity */
p:nth-child(2) {
  background-color: rgb(255,0,0);
  opacity: 0.5;
}

Click on “Try it Now” below and hit the Run button to see the result for yourself:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
      /* Red with RGBA */
      p:nth-child(1) {
          background-color: rgba(255,0,0,0.5);
      }
      /* Blue with opacity */
      p:nth-child(2) {
          background-color: rgb(0,0,255);
          opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <p>This paragraph is using RGBA for transparency</p>
    <p>This paragraph is using opacity for transparency</p>
  </body>
</html>

Note the difference — the first box that uses the RGBA color only has a semi-transparent background, whereas everything in the second box is transparent, including the text. You’ll want to think carefully about when to use each — for example RGBA is useful when you want to create an overlaid image caption where the image shows through the caption box but the text is still readable. Opacity, on the other hand, is useful when you want to create an animation effect where a whole UI element goes from completely visible to hidden.

Conclusion

In this tutorial, we looked at a few ways to specify CSS Colors in the stylesheets. We have also took a look at how we can specify transparency in CSS with the opacity property.

Further reading

If you want to understand how to use colors better in your designs, we encourage you to go through the CommonLounge tutorial on Color Theory in UI Design. It will help you get a better understanding of how to think about selecting colors in your web designs from a UI Designer’s perspective.

© 2016-2022. All rights reserved.