CSS Colors

The color property in CSS is used to define the text color, text decoration color, and even the border color of HTML elements.

Syntax

				
					selector {
  color: value;
}

Example:

				
					/* Set paragraph text color to dark green */
p {
  color: darkgreen;
}

Color by Name

CSS supports named colors like blue , red , green , purple , black , white , and many more.

Example:

				
					<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    h2 {
      color: teal;
    }
  </style>
</head>
<body>

  <h2>Welcome to Learn With Arshyan</h2>

</body>
</html>

Color using Hexadecimal (#RRGGBB)

A hex code start with # followed by 6 characters representing red, green, and blue.

Example:

				
					<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    h1 {
      color: #1E90FF;  /* Dodger Blue */
    }
    h2 {
      color: #FF69B4;  /* Hot Pink */
    }
    h3 {
      color: #228B22;  /* Forest Green */
    }
  </style>
</head>
<body>

  <h1>Arshyan’s Courses</h1>
  <h2>Explore New Skills</h2>
  <h3>Grow Your Career</h3>

</body>
</html>

RGB – Red, Green, Blue

PGB values range from 0 to 225 for each color channel.

				
					selector {
  color: rgb(red, green, blue);
}

Example:

				
					<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    p {
      color: rgb(100, 100, 255); /* Light Blue */
    }
  </style>
</head>
<body>

  <p>Learn With Arshyan – Let's Start Coding!</p>

</body>
</html>

RGBA – RGB with Opacity

RGBA adds an alpha value (opacity) from 0 (transparent) to 1 (opaque).

				
					selector {
  color: rgba(red, green, blue, alpha);
}

Example:

				
					<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    h2 {
      color: rgba(0, 128, 0, 0.6); /* Semi-transparent green */
    }
  </style>
</head>
<body>

  <h2>Transparent Learning with Arshyan</h2>

</body>
</html>

HSL – Hue, Saturation, Lightness

HSL stands for:

Hue (0-360): Color type (e.g., red, blue, green)
Saturation (0%-100%): Color intensity
Lightness (0%-100%): Lightness or darkness

				
					selector {
  color: hsl(hue, saturation, lightness);
}

Example:

				
					<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    h1 {
      color: hsl(150, 80%, 45%); /* Vibrant green */
    }
  </style>
</head>
<body>

  <h1>Design Bright with Arshyan!</h1>

</body>
</html>

HSLA – HSL with Opacity

HSLA is HSL + alpha channel for transparency.

				
					selector {
  color: hsla(hue, saturation, lightness, alpha);
}

Example:

				
					<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    p {
      color: hsla(300, 70%, 50%, 0.5); /* Semi-transparent purple */
    }
  </style>
</head>
<body>

  <p>Learning Never Looked So Soft</p>

</body>
</html>

Quick Tips

Used named colors for quick styling.
Prefer hex or RGB/HSL for precise control.
Use RGBA or HSLA to create transparency effects.
Color accessibility matters: ensure good contrast between text and background.