Open In App

CSS Colors

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

CSS Color property is used to set the color of HTML elements. This property is used to set font color, background color, etc. The color of an element can be defined in the following ways:

  • Built-In Color
  • RGB Format
  • RGBA Format
  • Hexadecimal Notation
  • HSL
  • HSLA

Built-In Color: These are a set of predefined colors which are used by its name. For example: red, blue, green etc.

Syntax:

h1 {
    color: color-name;
}

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>CSS color property</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>
        GeeksforGeeks
    </h1>
</body>
 
</html>


Output:

color property

RGB Format: The RGB(Red, Green, Blue) format is used to define the color of an HTML element by specifying the R, G, B values range between 0 to 255. For example: RGB value of Red color is (255, 0, 0), Green color is (0, 255, 0), Blue color is (0, 0, 255) etc.

Syntax:

h1 {
    color: rgb(R, G, B);
}

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>CSS color property</title>
    <style>
        h1 {
            color: rgb(0, 153, 0);
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>
        GeeksforGeeks
    </h1>
</body>
 
</html>


Output:

color property

RGBA Format: The RGBA format is similar to the RGB, but the difference is RGBA contains A (Alpha) which specifies the transparency of elements. The value of alpha lies between 0.0 to 1.0 where 0.0. represents fully transparent and 1.0 represents not transparent.

Syntax:

h1 {
    color:rgba(R, G, B, A);
}

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>CSS RGBA color property</title>
    <style>
        h1 {
            color: rgba(0, 153, 0, 0.5);
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>
        GeeksforGeeks
    </h1>
</body>
 
</html>


Output:

color property

Hexadecimal Notation: The hexadecimal notation begins with # symbol followed by 6 characters each ranging from 0 to F. For example: Red #FF0000, Green #00FF00, Blue #0000FF etc.

Syntax:

h1 {
    color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
}

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>CSS hex property</title>
    <style>
        h1 {
            color: #009900;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>
        GeeksforGeeks
    </h1>
</body>
 
</html>


Output:

color property

HSL: HSL stands for Hue, Saturation, and Lightness respectively. This format uses the cylindrical coordinate system.

  • Hue: Hue is the degree of the color wheel. Its value lies between 0 to 360 where 0 represents red, 120 represents green and 240 represents blue color.
  • Saturation: It takes a percentage value, where 100% represents completely saturated, while 0% represents completely unsaturated (gray).
  • Lightness: It takes percentage value, where 100% represents white, while 0% represents black.

Syntax:

h1 {
    color:hsl(H, S, L);
}

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>CSS hsl color property</title>
    <style>
        h1 {
            color: hsl(120, 100%, 30%);
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>
        GeeksforGeeks
    </h1>
</body>
 
</html>


Output:

color property

HSLA:

The HSLA color property is similar to HSL property, but the difference is HSLA contains A (Alpha) which specifies the transparency of elements. The value of alpha lies between 0.0 to 1.0 where 0.0. represents fully transparent and 1.0 represents not transparent.

Syntax:

h1 {
    color:hsla(H, S, L, A);
}

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>CSS hsla color property</title>
    <style>
        h1 {
            color: hsla(120, 100%, 50%, 0.50);
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>
        GeeksforGeeks
    </h1>
</body>
 
</html>


Output:

color property

Text Color: It is used to set the color of the text.

Syntax:

h1 {
    color:color_name;
}

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>CSS text color property</title>
    <style>
        h1 {
            color: #009900;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>
        GeeksforGeeks
    </h1>
</body>
 
</html>


Output:

color property

Background Color: It is used to set the background color of an HTML element.

Syntax:

h1 {
    background-color:color_name;
}

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>CSS background color property</title>
    <style>
        h1 {
            background-color: green;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>
        GeeksforGeeks
    </h1>
</body>
 
</html>


Output:

background color property

Border Color: It is used to set the border color of an element. Border-style is used to set the border type.

Syntax:

h1 {
    border-style:solid/dashed/dotted
    border-color:color_name;
}

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>CSS border color</title>
    <style>
        h1 {
            border-style: solid;
            border-color: green;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>
        GeeksforGeeks
    </h1>
</body>
 
</html>


Output:

border color

List of Colors: Following is the list of a few CSS colors.

Color Name Hex(RGB) Decimal(RGB) Color
Red FF0000 255, 0, 0  
Pink FFC0CB 255, 192, 203  
Orange FFA500 255, 165, 0  
Yellow FFFF00 255, 255, 0  
Violet EE82EE 238, 130, 238  
Green 008000 0, 128, 0  
Aqua 00FFFF 0, 255, 255  
Blue 0000FF 0, 0, 255  
Brown A52A2A 165, 42, 42  
White FFFFFF 255, 255, 255  
Gray 808080 128, 128, 128  
Black 000000 0, 0, 0  


Last Updated : 06 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads