CSS color Property

Last Updated : 12 Nov, 2024

The color property is used to specify the text color. It accepts color values as color name, HEX, RGB, RGBA, HSL, or HSLA values. This property plays a crucial role in defining text appearance, ensuring readability, and enhancing the overall design aesthetics of web content.

Syntax

color: color | initial | inherit;

Property Values

color: Specifies the color to apply. It can be a keyword, hex code, RGB/RGBA, HEX, HSL/HSLA value, or global values.
- RGB/RGBA Values: Use the red, green, and blue color model, with optional alpha transparency.
- Hexadecimal Values: Colors represented in hexadecimal format starting with #.
- HSL/HSLA Values: Define colors using hue, saturation, lightness, and optional alpha transparency.
Initial: Sets the color to its default value.
Inherit: Inherits the color value from its parent element.

Using Color Keywords

Named colors are predefined names in CSS for specific colors such as “blue,” “green,” and “red.” It provides a simple way to assign colors without needing to know their RGB or HEX values.

Syntax

color: color_name;

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            color: black;
        }

        p {
            font-size: 20px;
            color: green;
        }

        .red-color {
            font-size: 20px;
            color: red;
        }

        .blue-color {
            font-size: 20px;
            color: blue;
        }
    </style>
</head>

<body>
    <h1>
        CSS Color Property
    </h1>

    <p>
        GEEKSFORGEEKS: A computer science portal
    </p>

    <p class="red-color">
        GEEKSFORGEEKS: A computer science portal
    </p>

    <p class="blue-color">
        GEEKSFORGEEKS: A computer science portal
    </p>
</body>

</html>

Output

RGB/RGBA Value

Here R stands for Red, G stands for Green, and B stands for Blue. The color will be assigned to the text by using the range of these values. These values range from 0 to 255. And, A stands for Alpha channel. Which represents the opacity or opaque of the color.

Syntax

color: RGBA(value, value, value, value);

<h1 style="color: RGB(0, 0, 0);">
    CSS color property
</h1>

<p style="color: RGB(0, 150, 0);">
    RGB(0, 150, 0)-This is the code for green color.
</p>

<p style="color: RGB(255, 0, 0);">
    RGB(255, 0, 0)-This is the code for red color.
</p>

<p style="color: RGB(0, 0, 255);">
    RGB(0, 0, 255)-This is the code for blue color.
</p>

Output

Hexa-Decimal Value

It represents the value of the color in hexadecimal format. It should start with the prefix #. These values range from #000000 to #FFFFFF. And, If there is an alpha channel that defines the opacity of the color, then we will represent it by adding FF (if 100%) after the hex code.

Syntax:

color: #AAE123;

<h1 style="color: #000000;">
    CSS color property
</h1>

<p style="color: #00aa00;">
    #00AA00-This is the code for green color.
</p>

<p style="color: #ff0000;">
    #FF0000-This is the code for red color.
</p>

<p style="color: #0000ff;">
    #0000FF-This is the code for blue color.
</p>

Output

HSL/HSLA values

HSL stands for Hue, Saturation, and Lightness. The range of hue will be from (0 to 360 degree), saturation means the Grey effect it ranges from (0 to 100%), and Lightness means the effect of light which ranges from (0 to 100%).

Syntax

color: HSL(value, value, value);

<h1 style="color: HSL(0, 0, 0);">
    CSS Color property
</h1>

<p style="color: HSL(147, 50%, 47%);">
    HSL(147, 50%, 47%)-This is the code for green color.
</p>

<p style="color: HSL(0, 100%, 50%);">
    HSL(0, 100%, 50%)-This is the code for red color.
</p>

<p style="color: HSL(240, 100%, 50%);">
    HSL(240, 100%, 50%)-This is the code for blue color.
</p>