facebook twitter
Webucator's Free Introduction to CSS Tutorial

Lesson: Color and Opacity

Welcome to our free Introduction to CSS tutorial. This tutorial is based on Webucator's Introduction to CSS Training course.

In this lesson, you will learn about color and opacity.

Lesson Goals

  • Understand color and opacity.
  • Work with the color property.
  • Work with the opacity property.

About Color and Opacity

CSS makes it really easy to add color to your HTML pages. Almost every element can have color added to it, and CSS provides multiple methods to do so. For a comprehensive list of things in CSS that can have color, see Mozilla's list of Things that can have color (https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color#Things_that_can_have_color).

The opacity of an element is how transparent it is. Everything that can be colored, can also have its opacity changed, and opacity can additionally affect images, which colors do not affect. Opacity and color go hand in hand, and there are several ways to apply color and opacity at the same time.

Color and Opacity Values

There are two main color models used to create colors in CSS. The first is the RGB (Red/Green/Blue) color model, which combines red, green, and blue in different amounts to create a wide range of colors. The second is the HSL (Hue/Saturation/Lightness) color model, which creates colors based on hue, lightness, and saturation. RGB is more popular and more commonly used, but HSL is a much more intuitive system. If you want to play around with different RGB and HSL colors, check out Mozilla's Color picker tool (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool.

Opacity is most commonly expressed as a percentage from 0% (invisible) to 100% (opaque), and/or a number from 0.0 (invisible) to 1.0 (opaque).

Color Keywords

CSS recognizes over a hundred color keywords as acceptable color values ranging from white to honeydew. For a full list of accepted color keywords see Mozilla's List of color keywords (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords.

RGB Hexadecimal Notation

RGB hexadecimal notation is the most commonly used type of color value. Hexadecimal digits are used to represent the amounts of each color component (red, green, and blue) ranging from 0 (00) to 255 (ff). The syntax for hexadecimal notation is below:

Syntax

#rrggbb /* longhand */
#rgb /* shorthand */

In shorthand hexadecimal notation, the six digits are cut down to three, and each digit represents two of itself. For example, #f03 would be #ff0033.

RGB Functional Notation

RGB colors can also be expressed by the rgb() functional notation, which takes three parameters (red, green, and blue). These can either be integers from 0 to 255 or percentages from 0% to 100%. The syntax for RGB functional notation is below:

Syntax

rgb(red, green, blue)

HSL Functional Notation

HSL colors are expressed using the hsl() function notation. The hsl() function notation takes three parameters:

  1. Hue - An angle of the color circle in degrees (deg), radians (rad), gradians (grad), or turns (turn). If units are omitted, deg are assumed.
    1. red = 0 degrees or 360 degrees
    2. green = 120 degrees
    3. blue = 240 degrees
  2. Saturation - A percentage where 100% is completely saturated (full color) and 0% is a shade of gray.
  3. Lightness - A percentage where 100% is white, 50% is "normal" lightness, and 0% is black.

The syntax for hsl() function notation is below:

Syntax

hsl(hue, saturation, lightness)

rgba() and hsla()

Both RGB and HSL functional notations have ways to specify opacity (alpha) at the same time as color. Along with their respective normal notations (rgb() and hsl()), they also have alpha notations (rgba() and hsla()) that accept a fourth parameter (alpha), which is expressed either as a percentage from 0% to 100% or a number between 0.0 and 1.0. These are both well-supported in modern browsers, and are a good way to specify opacity in CSS.

In some modern browsers, the rgb() and rgba() notations are interchangeable, meaning that rgb() can also take the alpha parameter, but this is not well-supported.

color

color is the CSS property used to apply color to the foreground of an element. The most common example of a foreground is text. See the samples below:

Code Sample:

ColorAndOpacity/Demos/color-styles.css
#keyword {
  color: red;
}

#rgb-longhand {
  color: #ff0000;
}

#rgb-shorthand {
  color: #f00;
}

#rgb-function-numbers {
  color: rgb(255, 0, 0);
}

#rgb-function-percentage {
  color: rgb(100%, 0%, 0%);
}

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

#hsl-function {
  color: hsl(0, 100%, 50%);
}

#hsla {
  color: hsla(0, 100%, 50%, 50%);
}

Code Sample:

ColorAndOpacity/Demos/color-demo.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>color</h1>
  <div id="keyword">color: red;</div>
  <div id="rgb-longhand">color: #ff0000;</div>
  <div id="rgb-shorthand">color: #f00;</div>
  <div id="rgb-function-numbers">color: rgb(255, 0, 0);</div>
  <div id="rgba">color: rgba(255, 0, 0, 0.5);</div>
  <div id="rgb-function-percentage">color: rgb(100%, 0%, 0%);</div>
  <div id="hsl-function">color: hsl(0, 100%, 50%);</div>
  <div id="hsla">color: hsla(0, 100%, 50%, 50%);</div>
</body>
</html>

Code Explanation

The code above will render the following:color Demo

opacity

opacity is the CSS property used to set the transparency of an entire element. See the demo below:

Code Sample:

ColorAndOpacity/Demos/opacity-styles.css
#my-div {
  /* To make the changes in opacity
  easier to see, we have added a yellow
  background color and made the text red */
  background-color: yellow;
  color: red;
}

.invisible {
  opacity: 0;
}

.light {
  opacity: .25;
}

.medium {
  opacity: .5;
}

.heavy {
  opacity: .75;
}

.opaque {
  opacity: 1;
}

#sun {
  opacity: .5;
}

Code Explanation

In this demo, opacity was also used to change the transparency of images. This is something that the color property cannot do as images are not affected by the color property.

Code Sample:

ColorAndOpacity/Demos/opacity-demo.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>opacity</h1>
  <div id="my-div">
    <p class="invisible">opacity: 0;</p>
    <p class="light">opacity: .25;</p>
    <p class="medium">opacity: .5;</p>
    <p class="heavy">opacity: .75;</p>
    <p class="opaque">opacity: 1;</p>
  </div>
  <img src="images/sun.png" class="invisible">
  <img src="images/sun.png" class="light">
  <img src="images/sun.png" class="medium">
  <img src="images/sun.png" class="heavy">
  <img src="images/sun.png" class="opaque"> 
</body>
</html>

Code Explanation

The code above will render the following:opacity Demo

Adding Color and Opacity to Text

Duration: 25 to 40 minutes.

In this exercise, you will add color and opacity properties to an HTML file containing three children's stories.

  1. Open Exercises/stories.html in your editor.
  2. Create a CSS file called stories-styles.css and link to it from stories.html.
  3. Using CSS, edit the color and opacity of the different elements in stories.html. The object of this exercise is to practice using the color and opacity properties.
  4. When you are done, open stories.html in your browser. You are welcome to go back to the code and keep working.

You can design it however you like, or you can try to make it look something like: Color and Opacity Solution

Solution:

ColorAndOpacity/Solutions/stories-styles.css
.top-link {
  color: darkorchid;
}

.back-to-top {
  color: #2f2;
}

#pooh h2 {
  color: hsl(56, 100%, 45%);
}

#pooh img {
  opacity: .1;
}

#pooh p {
  color: hsla(23, 80%, 40%, 40%);
}

#alice h2 {
  color: rgb(240, 248, 255);
}

#alice img{
  opacity: .2;
}

#alice p {
  color: rgba(45, 79, 235, .33);
}

#naughty-boy h2 {
  color: #e96df2;
}

#naughty-boy img {
  opacity: .5;
}

#naughty-boy p {
  color: rgb(78%, 45%, 78%);
}