CodingRider

Sign In

🟢 CSS Colors

Colors in CSS are used to style the foreground (text), background, borders, and other visual parts of elements. CSS provides multiple ways to define colors using names, HEX codes, RGB, HSL, and more.

✅ 1. Color Properties


color: Sets the color of the text.
background-color: Sets the background color of an element.
border-color: Sets the border color.

✅ 2. Ways to Specify Colors

🔷 Named Colors

CSS supports 140+ named colors like red, blue, green, orange, etc. 
h1 {
  color: blue;
}

🔷 HEX Codes

A 6-digit combination of numbers and letters, starting with #. 
body {
  background-color: #f4f4f4;
}

🔷 RGB (Red, Green, Blue)

Specifies color using rgb(0–255, 0–255, 0–255). 

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

🔷 RGBA (with transparency)

The a stands for alpha (opacity), from 0 (transparent) to 1 (opaque). css CopyEdit 
div {
  background-color: rgba(0, 0, 255, 0.3); /* semi-transparent blue */
}

🔷 HSL (Hue, Saturation, Lightness) 


h2 {
  color: hsl(120, 100%, 40%);
}


🔧 Example: Different Color Methods

<!DOCTYPE html>
<html>
<head>
  <style>
    .named { color: red; }
    .hex { color: #00cc99; }
    .rgb { color: rgb(0, 128, 255); }
    .rgba { background-color: rgba(255, 0, 0, 0.2); }
    .hsl { color: hsl(240, 100%, 50%); }
  </style>
</head>
<body>

  <p class="named">This is a named color.</p>
  <p class="hex">This is a HEX color.</p>
  <p class="rgb">This is an RGB color.</p>
  <p class="rgba">This has an RGBA background.</p>
  <p class="hsl">This is an HSL color.</p>

</body>
</html>

🖼️ Output Behavior:

* The first paragraph appears red using a named color.
* The second shows teal-green using a HEX code
* The third is sky blue via RGB.
* The fourth has a light red transparent background.
* The fifth is deep blue using HSL.

🎨 Tips for Using Colors

* Use HEX or RGB when you need precision.
* Use rgba() for transparency effects.
* HSL is useful for adjusting color lightness or saturation easily.
* Prefer consistent formats across your stylesheets for readability.

📘 Summary Table

Format Examples Description
Named blue,green Predefined colors names
HEX #ff6600 Hexadecimal RGB
RGB rgb(255, 0, 0) Red, Green, Blue values
RGBA rgba(0, 0, 0, 0.5) RGB + transparency
HSL hsl(120, 100%, 50%) Hue, saturation, Lightness

Colors are essential for making your website visually appealing and accessible.

Try It Yourself

Try It Yourself


Output: