🌈 CSS Text Color Properties & Color Units

Last Updated: November 2025

The color property in CSS is used to set the text color of an element.

🗣 Hinglish Tip: color property sirf text ke liye hoti hai — background ke liye alag property hoti hai background-color.

Basic Color Names

CSS supports 140+ named colors such as:
red, green, blue, orange, purple, gray, black, white

h1 {
  color: orange;
}

A HEX code (hexadecimal value) defines color using numbers (0–9) and letters (A–F).

p {
  color: #ff0000; /* Red */
}

💡 You can also use short-hand HEX values like #f00 for #ff0000.

🗣 Hinglish Tip: HEX color ek code jaisa hota hai — har 2 digits ek color component (Red, Green, Blue) dikhata hai.

RGB stands for Red, Green, Blue.
Each value ranges from 0 to 255.

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

💡 Use rgb() jab aapko precise numeric control chahiye ho brightness aur shade par.

RGBA adds an Alpha channel for transparency.
Alpha value range: 0 (fully transparent) → 1 (fully solid).

h3 {
  color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
}

🗣 Hinglish Tip: A ka matlab hai “Alpha” — matlab kitni transparency chahiye.

HSL = Hue, Saturation, Lightness.
Hue is a color wheel angle (0°–360°), saturation is color intensity, and lightness controls brightness.

p {
  color: hsl(200, 100%, 50%); /* Bright blue */
}

Add transparency with HSLA:

p {
  color: hsla(200, 100%, 50%, 0.6); /* Slightly transparent blue */
}

🗣 Hinglish Tip: HSL mein hue ek “color wheel angle” hota hai — jaise 0° = red, 120° = green, 240° = blue.

currentColor uses the current text color wherever needed (like borders or shadows).

button {
  color: currentColor;
}

💡 Very useful for consistent theming and icon coloring!