CSS Text Color

In CSS, the color property is used to specify the color of text. It allows you to define the desired color for your text content.

Here are different ways to specify the text color:

Named Colors

CSS provides a set of predefined color names that you can use to specify text color.

Example
Try yourself 
        
            p {
   color: red;
}

This sets the text color of <p> elements to red.

Hexadecimal Colors

Hexadecimal color values represent colors using a combination of six digits, ranging from 0 to 9 and A to F. Each pair of digits represents the intensity of red, green, and blue (RGB) channels.

Example
Try yourself 
        
            h1 {
   color: #336699;
}

This sets the text color of <h1> elements to a shade of blue.

RGB Colors

RGB color values specify the intensity of red, green, and blue channels using numeric values ranging from 0 to 255.

Example
Try yourself 
        
            h1 {
   color: rgb(255, 0, 0);
}

This sets the text color of <h1> elements to red using RGB values.

RGBA Colors

RGBA color values are similar to RGB, but with an additional alpha channel that specifies the opacity or transparency. The alpha value ranges from 0 to 1, where 0 is fully transparent and 1 is fully opaque.

Example
Try yourself 
        
            h1 {
   color: rgba(0, 128, 0, 0.5);
}

This sets the text color of <h1> elements to a semi-transparent shade of green.

HSL and HSLA Colors

HSL (Hue, Saturation, Lightness) and HSLA (HSL with alpha) color values allow you to specify the color using hue, saturation, and lightness components. Hue is represented by an angle between 0 and 360 degrees, while saturation and lightness are percentages.

Example
Try yourself 
        
            p {
   color: hsl(210, 50%, 50%);
}

This sets the text color of <p> elements to a medium shade of blue.

These are some common ways to specify text color in CSS. You can choose the method that best suits your needs and design preferences. Additionally, the color property can be combined with other text-related properties like font-family, font-size, and font-weight to style and customize the appearance of text on your web page.