CSS Colors

CSS Color is a property used to set the color of text, borders, backgrounds, and other elements on a web page. Colors can be represented in different formats: HEX, RGB, HSL, or by predefined keywords.

learn code with durgesh images

HEX Color Values

Definition: HEX (hexadecimal) colors are six-digit codes representing a combination of red, green, and blue (RGB). Each pair of digits ranges from 00 to FF (0–255 in decimal).

Format: #RRGGBB

Example:

p {
  color: #ff5733; /* Orange-red color */
}

Advbantages :

Compact & Easy: Short, simple to write (#ff5733).
Precise: Exact control over colors for branding.
Widely Supported: Works in all browsers.
Shorthand Possible: Can write #ffcc00 as #fc0.
Consistent: Same color across devices and platforms.

RGB Color Values

Definition: RGB colors define colors using the red, green, and blue components. Each component can have a value from 0 to 255.

Format: rgb(red, green, blue)

Example:

p {
  color: rgb(255, 87, 51);
}

Advanced: RGBA adds an alpha channel for transparency.

p {
  color: rgba(255, 87, 51, 0.5); /* 50% transparent orange-red */
}

Advantages:

Allows precise control over color mixing.
Transparency via RGBA is useful for overlays and layered designs.

HSL Color Values

Definition: HSL (Hue, Saturation, Lightness) represents colors in a way that is closer to how humans perceive color.

Format: hsl(hue, saturation%, lightness%)

Hue: 0–360° on the color wheel (0 = red, 120 = green, 240 = blue)
Saturation: 0% = grey, 100% = full color
Lightness: 0% = black, 50% = normal, 100% = white

Example:

p {
  color: hsl(14, 100%, 60%);
}

Advantages:

Easy to adjust brightness and saturation.
Ideal for creating harmonious color schemes and gradients.

Tip: You can also use HSLA to add transparency:

p {
  color: hsla(14, 100%, 60%, 0.7); /* 70% opacity */
}

Color Keywords

Definition: CSS also supports named colors, which are predefined color keywords.

Example:

h1 {
  color: darkgreen;
}

Advantages:

Easy to use for quick styling.
No need to memorize HEX or RGB codes.

Limitations:

Limited color choices compared to HEX, RGB, or HSL.
Not suitable for brand-specific colors.

Comparing Color Types

Color Type	Syntax Example	Advantages	Use Case
HEX	`#ff5733`	Compact, widely supported	Branding, exact colors
RGB	`rgb(255, 87, 51)`	Precise, easy to adjust	Dynamic colors, transparency with RGBA
HSL	`hsl(14, 100%, 60%)`	Human-friendly, easy lightness/saturation	Color palettes, gradients, responsive design
Keyword	`darkgreen`	Easy, readable	Quick styling or prototypes

CSS Colors Example with HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Colors Example</title>
  <style>
    /* HEX Colors */
    h1 {
      color: #ff5733; /* Bright orange-red */
    }

    /* RGB Colors */
    h2 {
      color: rgb(0, 128, 255); /* Blue text */
    }

    /* RGBA Colors (with transparency) */
    p {
      color: rgba(255, 87, 51, 0.8); /* Semi-transparent orange-red */
      background-color: rgba(0, 0, 0, 0.1); /* Light transparent background */
      padding: 10px;
    }

    /* HSL Colors */
    span {
      color: hsl(120, 60%, 40%); /* Dark green text */
      font-weight: bold;
    }

    /* HSLA Colors */
    div.overlay {
      background-color: hsla(210, 50%, 50%, 0.5); /* Semi-transparent blue */
      padding: 15px;
      margin: 10px 0;
    }

    /* Color Keywords */
    a {
      color: darkorange; /* Keyword color for links */
      text-decoration: none;
      font-weight: bold;
    }

    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f0f0f0; /* HEX fallback for background */
    }

  </style>
</head>
<body>

  <h1>HEX Color Example</h1>
  <h2>RGB Color Example</h2>
  <p>RGBA Color Example: This paragraph uses <span>semi-transparent text</span> over a transparent background.</p>

  <div class="overlay">
    HSLA Color Example: Semi-transparent blue box using HSLA.
  </div>

  <p>Color Keywords Example: <a href="#">Click Here</a> for more info.</p>

</body>
</html>

Output :

learn code with durgesh images