CSS color Property

CSS color Property

The color property in CSS defines the text color of an element. It allows you to set text colors using various formats, including named colors, HEX, RGB, HSL, and more.

1. Syntax

selector {
  color: value;
}

Value Type	Example	Description
Named Color	red, blue, green	Uses predefined color names.
HEX Code	#ff5733	Defines colors using hexadecimal format.
RGB	rgb(255, 87, 51)	Uses Red, Green, Blue values (0-255).
RGBA	rgba(255, 87, 51, 0.5)	Adds alpha for transparency.
HSL	hsl(9, 100%, 60%)	Uses Hue, Saturation, and Lightness.
HSLA	hsla(9, 100%, 60%, 0.5)	Adds alpha for transparency.

2. Example – Changing Text Color

h1 {
  color: blue;
}

p {
  color: #ff5733;
}

span {
  color: rgb(34, 193, 195);
}

<h1>Blue Heading</h1>
<p>Orange paragraph text.</p>
<span>Custom RGB color</span>

✅ Text colors are set for different elements.

3. Example – Using Transparency (RGBA and HSLA)

p {
  color: rgba(255, 0, 0, 0.5); /* 50% transparent red */
}

span {
  color: hsla(120, 100%, 50%, 0.3); /* 30% transparent green */
}

✅ Useful for faded or semi-transparent text.

4. Example – Applying Color to Links

a {
  color: purple;
}

a:hover {
  color: orange;
}

✅ Links change color when hovered.

5. Best Practices

✔ Use HEX or RGB for consistency across browsers.
✔ Use contrast for readability (e.g., dark text on a light background).
✔ Avoid hardcoded colors—use variables in CSS custom properties.