CSS Colors

Prev Next

The color property in CSS is used to set the color of HTML elements. This property can be applied to text, backgrounds, borders, and other decorative effects. There are several ways to define colors in CSS, including:

• Built-in color

• RGB

• HEX

• HSL

Built-in Color Names

CSS provides 140 built-in color names, such as "red," "blue," "green," etc.

Example:

<!DOCTYPE html>
<html>
<head>

  <title>CSS Colors</title>

  <style>
    .color-name {
      color: blue;
      background-color: yellow;
    }
  </style>

</head>

<body>

  <p class="color-name">This is a paragraph with blue text and a yellow background using built-in color names.</p>

</body>
</html>

Output:

This is a paragraph with blue text and a yellow background using built-in color names.

RGB Color Values

The rgb() function defines colors using the Red-Green-Blue model, with values ranging from 0 to 255.

Example:

<!DOCTYPE html>
<html>
<head>

  <title>CSS Colors</title>

  <style>
    .color-name {
      color: blue;
      background-color: yellow;
    }
  </style>

</head>

<body>

  <p class="color-name">This is a paragraph with blue text and a yellow background using built-in color names.</p>

</body>
</html>

Output:

This is a paragraph with red text and a green background using RGB values.

HEX values define colors using hexadecimal notation, with values ranging from 00 to FF.

Example:

<!DOCTYPE html>

<html>
<head>

  <title>CSS Colors</title>

  <style>
    .color-hex {
      color: #ff0000; /* Red */
      background-color: #00ff00; /* Green */
    }
  </style>

</head>

<body>

  <p class="color-hex">This is a paragraph with red text and a green background using HEX values.</p>

</body>
</html>

Output:

This is a paragraph with red text and a green background using HEX values.

HSL Color Values

The hsl() function defines colors using the Hue-Saturation-Lightness model. Hue is an angle (0-360), saturation is a percentage (0-100%), and lightness is a percentage (0-100%).

Example:

<!DOCTYPE html>

<html>
<head>

  <title>CSS Colors</title>

  <style>
    .color-hsl {
      color: hsl(0, 100%, 50%); /* Red */
      background-color: hsl(120, 100%, 50%); /* Green */
    }
  </style>

</head>

<body>

  <p class="color-hsl">This is a paragraph with red text and a green background using HSL values.</p>

</body>
</html>

Output:

This is a paragraph with red text and a green background using HSL values.

Prev Next