Controlling Text Color in CSS

The color property sets the text color of an element. CSS provides multiple ways to define colors.

Named Colors

p { color: red; }
h1 { color: navy; }
a { color: teal; }

CSS has 147 named colors, but they offer limited control.

Hexadecimal

h1 { color: #2c3e50; }
p  { color: #333333; }   /* Shorthand: #333 */
a  { color: #3498db; }

Hex codes use 6 characters (or 3 as shorthand). You can add 2 more digits for alpha (transparency): #3498db80.

RGB and RGBA

h1 { color: rgb(44, 62, 80); }
p  { color: rgba(0, 0, 0, 0.7); }  /* 70% opacity */

HSL and HSLA

HSL (Hue, Saturation, Lightness) is often the most intuitive:

h1 { color: hsl(210, 50%, 25%); }
p  { color: hsla(0, 0%, 20%, 0.8); }

• Hue — 0-360 (color wheel position)
• Saturation — 0-100% (gray to full color)
• Lightness — 0-100% (black to white)

The currentColor Keyword

.icon {
    border: 2px solid currentColor;  /* Uses the element's text color */
}