This lesson explains how you can specify colors in your CSS using different methods. You can use simple color names, hex codes, RGB, or HSL values. Each method has its use and gives you different ways to represent colors in your design.

Using color names is straightforward, while hex codes offer a wider range of colors. RGB and HSL let you fine-tune colors even more by letting you adjust each component separately.

Syntax

Follow below syntax to set colors in CSS code.

• Color Name:

  element {
    property: colorName;
  }

  Explanation: Sets a color using its name, like red, blue, or green.

• Hex Code:

  element {
    property: #hexValue;
  }

  Explanation: Sets a color using a six-digit hexadecimal value preceded by a #, like #ff5733.

• RGB:

  element {
    property: rgb(red, green, blue);
  }

  Explanation: Sets a color using red, green, and blue values in the range of 0 to 255.

• HSL:

  element {
    property: hsl(hue, saturation, lightness);
  }

  Explanation: Sets a color using hue (0 to 360), saturation, and lightness (percentages).

Example 1: Using Color Names and Hex Codes

In this example, we will style a heading and a paragraph using a color name for the text and a hex code for the background color.

Explanation:

• Text Color on Heading:
  • Color: Blue is applied using a color name.
• Paragraph Background:
  • Background Color: A light beige color is set using the hex code #ffebcd.
• Outcome: Different methods show how you can control the appearance of text and background.

Example 2: Using RGB and HSL

In this example, we will style a heading using RGB and a paragraph using HSL. This example shows how you can control the color components for fine-tuning the design.

Explanation:

• Heading Color with RGB:
  • RGB Values: The values 255, 99, 71 generate a color similar to tomato red.
• Paragraph Color with HSL:
  • HSL Values: The hue of 120 creates a green tone. The saturation of 60% and lightness of 40% adjust the vibrancy and brightness.
• Outcome:
  • Different Methods: Both RGB and HSL are used to set colors, giving you flexible options for designing your web page.

This lesson shows you multiple methods to set colors in CSS. You now have a clear idea of how to use color names, hex codes, RGB, and HSL to style your web elements.