Tutorialspoint.dev

CSS | Colors

CSS Color property is used to set the color of HTML elements. This property is used to set font color, background color etc.

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>
    <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>
    <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 specify 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>
    <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 range 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>
    <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 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>
    <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 specify 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>
    <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>
    <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>
    <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>
    <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 are the list of 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


This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter