Lesson 3 – CSS Colors

In order to specify a color, CSS3 uses different color values. Mostly, these values set the element’s forefront color that its text or the background color. Sometimes, you may also use them for other decorative effects such as setting border colors.

In the following example, we set the text color of paragraph element to aqua.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>CSS3 Colors</title>
    <style>
       p {
    		color: aqua;
}
    </style>
</head>
<body>
    

Setting the text color

This is how you set the text color with CSS3.

</body> </html>

The output of the above code will be as under.

The output of the above code will be as under.

Similarly, here is how you will change the color of background and border of an element.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>CSS3 Colors</title>
  <style>
    .background {
    background-color: aquamarine;
    border: 1px solid red;
}

    </style>

</head>
<body>
    

Setting the text color

This is how you set the text color with CSS3.

</body> </html>

The browser will transform the above style rule as under.

You can choose from various formats to specify the color values. The following is a brief explanation of every format.

Color Keywords

CSS3 allows you to use color keywords such as black, blue, aqua, aquamarine, etc. to set color values as we have seen in the above examples.

Hex Codes

A hexadecimal code contains six digits which represent a certain color. Its syntax is #RRGGBB where RR represents a red value, GG stands for green and BB are the blue value. A hash (#) or pound sign precedes every hexadecimal code.


<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS3 Colors</title>
</head>
<body>
    <h1 style="background-color: #f14141">Example of Hexadecimal Color Codes</h1>
</body>
</html>

The above code will produce the following result.

Short Hex Codes

Short Hex codes are also the hexadecimal codes but they contain 3 digits instead of 6. For instance, you can write #FF777AA as #F7A.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS3 Colors</title>
</head>
<body>
    <h1 style="background-color: #f7a">Example of Short Hexadecimal Color Codes</h1>
</body>
</html>

Here is how the above code will look like in the browser.

RGB Values

The Red, Green, Blue or simply RGB value can either be a percentage or an integer. You will use the RGB() property to set the color where each letter stands for red, green and blue respectively.

In the following example we set the background colors of two elements using an integer value for the first and percentage for the second.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS3 Colors</title>
</head>
<body>
    <h1 style="background-color: rgb(218, 51, 51)">Example of Short Hexadecimal Color Codes</h1>
    <p style="background-color: rgb(100%, 50%, 50%)">Changing background color using RGB percentage value</p>
</body>
</html>

Here is the final output of the above code.

In the next chapter, we will discuss how to add images in CSS3.