CSS | Colors - GeeksforGeeks

03 Dec, 2018
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:
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:
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:
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:
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:
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:
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:
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:
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:
List of Colors: Following are the list of few CSS colors.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Basics
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?