Menu
CSS

color

The color property in CSS is used to set the color of the text in an HTML element. This property accepts various types of values, including named colors, HEX values, RGB, RGBA, HSL, and HSLA. Here’s an overview of how to use the color property:

 

Named Colors

CSS provides a list of predefined color names.

p {
    color: red;
}

h1 {
    color: blue;
}

h2 {
    color: darkgreen;
}

 

HEX Values

A hexadecimal value represents the intensity of red, green, and blue in a color.

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

h1 {
    color: #0000ff; /* Blue */
}

h2 {
    color: #006400; /* Dark Green */
}

 

RGB Values

RGB values define a color using the red, green, and blue components.

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

h1 {
    color: rgb(0, 0, 255); /* Blue */
}

h2 {
    color: rgb(0, 100, 0); /* Dark Green */
}

 

RGBA Values

RGBA values are similar to RGB but include an alpha channel for opacity.

p {
    color: rgba(255, 0, 0, 1); /* Red, fully opaque */
}

h1 {
    color: rgba(0, 0, 255, 0.5); /* Blue, 50% opaque */
}

h2 {
    color: rgba(0, 100, 0, 0.75); /* Dark Green, 75% opaque */
}

 

HSL Values

HSL stands for Hue, Saturation, and Lightness.

p {
    color: hsl(0, 100%, 50%); /* Red */
}

h1 {
    color: hsl(240, 100%, 50%); /* Blue */
}

h2 {
    color: hsl(120, 100%, 25%); /* Dark Green */
}

 

HSLA Values

HSLA is similar to HSL but includes an alpha channel for opacity.

p {
    color: hsla(0, 100%, 50%, 1); /* Red, fully opaque */
}

h1 {
    color: hsla(240, 100%, 50%, 0.5); /* Blue, 50% opaque */
}

h2 {
    color: hsla(120, 100%, 25%, 0.75); /* Dark Green, 75% opaque */
}

 

Practical Example

Here's a complete example applying different text colors to various HTML elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Color Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .red-text {
            color: red; /* Named color */
        }
        .blue-text {
            color: #0000ff; /* HEX value */
        }
        .darkgreen-text {
            color: rgb(0, 100, 0); /* RGB value */
        }
        .semi-transparent-blue-text {
            color: rgba(0, 0, 255, 0.5); /* RGBA value */
        }
        .hsl-red-text {
            color: hsl(0, 100%, 50%); /* HSL value */
        }
        .hsla-darkgreen-text {
            color: hsla(120, 100%, 25%, 0.75); /* HSLA value */
        }
    </style>
</head>
<body>
    <p class="red-text">This is red text.</p>
    <p class="blue-text">This is blue text.</p>
    <p class="darkgreen-text">This is dark green text.</p>
    <p class="semi-transparent-blue-text">This is semi-transparent blue text.</p>
    <p class="hsl-red-text">This is HSL red text.</p>
    <p class="hsla-darkgreen-text">This is HSLA dark green text.</p>
</body>
</html>

 

Using CSS Variables for Colors

CSS variables can make managing colors easier and more consistent across your stylesheet.

:root {
    --main-color: #3498db; /* HEX value */
    --secondary-color: hsl(120, 100%, 25%); /* HSL value */
}

body {
    color: var(--main-color);
}

h1 {
    color: var(--secondary-color);
}

 

Adjusting Colors for Different Screen Sizes

You can use media queries to adjust the text color for different screen sizes:

body {
    color: black; /* Default color */
}

@media (max-width: 600px) {
    body {
        color: gray; /* Color for small screens */
    }
}

@media (min-width: 1200px) {
    body {
        color: darkblue; /* Color for large screens */
    }
}

The color property is fundamental in CSS for defining the appearance of text, allowing you to enhance the readability and aesthetic of your web content.

CSS