CSS Colors

By /

In this chapter, you will learn how to add colors to your web pages using CSS. Colors can make text, backgrounds, borders, and other elements look more attractive and easier to understand. Let’s see the different ways you can use colors in CSS.

How to Add Colors in CSS

One of the easiest ways to use colors in CSS is with the color property.

For example:

p {
  color: blue;
}

This changes the text color of the paragraph to blue. You can use colors in different ways in CSS. The most common methods are:

  1. Color names
  2. HEX values
  3. RGB values

Let’s understand each one.

1. Using Color Names

CSS supports many predefined color names, such as:

  • red
  • blue
  • green
  • yellow
  • purple
  • orange

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Color Names</title>

  <style>
    h1 {
      color: blue;
    }

    p {
      color: green;
    }

    h2 {
      color: red;
    }
  </style>
</head>

<body>

  <h1>This Heading is Blue</h1>

  <p>This Paragraph is Green</p>

  <h2>This Heading is Red</h2>

</body>
</html>

Result

  • The <h1> heading will appear blue.
  • The paragraph will appear green.
  • The <h2> heading will appear red.

Using color names is simple and easy when you are starting with CSS.

2. Using HEX Colors

A HEX color is a color value that starts with a hash symbol (#).

For example:

p {
  color: #ff0000;
}

The value #ff0000 represents the color red. A HEX color usually contains six characters after the # symbol.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS HEX Colors</title>

  <style>
    h1 {
      color: #0000ff;
    }

    p {
      color: #008000;
    }

    h2 {
      color: #ff0000;
    }
  </style>
</head>

<body>

  <h1>This Heading is Blue</h1>

  <p>This Paragraph is Green</p>

  <h2>This Heading is Red</h2>

</body>
</html>

Here:

  • #0000ff is blue.
  • #008000 is green.
  • #ff0000 is red.

HEX colors are commonly used when designing websites because they give you access to many different color shades.

3. Using RGB Colors

RGB stands for:

  • R – Red
  • G – Green
  • B – Blue

RGB colors use three values to create a color.

The basic syntax is:

color: rgb(red, green, blue);

Each value can be between 0 and 255.

For example:

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

This creates the color red.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS RGB Colors</title>

  <style>
    h1 {
      color: rgb(0, 0, 255);
    }

    p {
      color: rgb(0, 128, 0);
    }

    h2 {
      color: rgb(255, 0, 0);
    }
  </style>
</head>

<body>

  <h1>This Heading is Blue</h1>

  <p>This Paragraph is Green</p>

  <h2>This Heading is Red</h2>

</body>
</html>

Here:

  • rgb(0, 0, 255) creates blue.
  • rgb(0, 128, 0) creates green.
  • rgb(255, 0, 0) creates red.

Changing the Background Color

You can use the background-color property to change the background color of an element.

For example:

body {
  background-color: lightblue;
}

This changes the background color of the entire web page.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Background Color</title>

  <style>
    body {
      background-color: lightblue;
    }

    h1 {
      color: darkblue;
    }

    p {
      color: black;
    }
  </style>
</head>

<body>

  <h1>Welcome to CSS</h1>

  <p>This page has a light blue background.</p>

</body>
</html>

You can also add a background color to a specific element.

p {
  background-color: yellow;
}

This adds a yellow background behind the paragraph.

Quick Recap

  • The color property changes the text color.
  • CSS colors can be written using color names, HEX values, and RGB values.
  • HEX colors start with #.
  • RGB uses red, green, and blue values.
  • The background-color property changes an element’s background.

Frequently Asked Questions (FAQs)

Q1. What are CSS colors?

CSS colors are used to add color to HTML elements, including text, backgrounds, borders, and other parts of a web page.

Q2. How can I add colors in CSS?

You can add colors in CSS by using color-related properties. CSS supports different color formats, including color names, HEX values, and RGB values.

Q3. What are the common ways to write colors in CSS?

The most common ways to write CSS colors are using predefined color names, HEX color values, and RGB color values.

Q4. What is a HEX color in CSS?

A HEX color is a color value that begins with a hash symbol and is commonly used in CSS to define specific colors and shades.

Q5. What is RGB in CSS?

RGB stands for Red, Green, and Blue. It uses different values for these three colors to create a wide range of colors.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top