CSS Colors
CSS Color property is employed to define the color of HTML elements. This property is employed to define the font color, background color, and border color.
The color of an element can be defined in the following ways:
- Predefined Color
- RGB Format
- RGBA Format
- Hexadecimal Notation
- HSL
- HSLA
Predefined Color
CSS contains a set of predefined colors that you can utilize to define colors in your style sheets.
Syntax:
h1
{
color: color-name;
}
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Colors
</title>
</head>
<body>
<h1>
Tutorials4Coding
</h1>
<p>
A code learning platform
</p>
</body>
</html>
CSS
h1
{
color: blue;
}
p
{
color: red;
}
Output
RGB Format
RGB stands for Red, Green, Blue.
Syntax:
h1
{
color: rgb(red, green, blue);
}
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Colors
</title>
</head>
<body>
<h1>
Tutorials4Coding
</h1>
<h3>
A code learning platform
</h3>
<p>
Learn Coding Easily!
</p>
</body>
</html>
CSS
h1
{
color: rgb(255, 38, 0);
}
h3
{
color: rgb(77, 238, 3);
}
p
{
color: rgb(5, 2, 204);
}
Output
RGBA Format
RGBA is the same as RGB, only it contains an additional opacity (alpha) value that ranges from 0 to 1.
Syntax:
h1
{
color: rgba(red, green, blue,
alpha);
}
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Colors
</title>
</head>
<body>
<h1>
Tutorials4Coding
</h1>
<p>
Learn Coding Easily!
</p>
</body>
</html>
CSS
h1
{
color: rgba(4, 181, 235, 0.5);
}
p
{
color: rgb(5, 2, 204, 0.6);
}
Output
Hexadecimal Notation
The hexadecimal representation consists of a hash (#) character and six characters.
Syntax:
h1
{
color: #rrggbb;
}
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Colors
</title>
</head>
<body>
<h1>
Tutorials4Coding
</h1>
<p>
Learn Coding Easily!
</p>
</body>
</html>
CSS
h1
{
color: #07eeff;
}
p
{
color: #234EDD;
}
Output
HSL
HSL represents hue, saturation, and lightness. It is another means of specifying color.
- Hue(H): Hue indicates the color category. Its range is from 0 to 360. 0 is for red, 120 is for green, and 240 is for blue.
- Saturation(S): Saturation defines the color's strength. 0% is no color (gray), and 100% is the full color.
- Lightness (L): 0% is black, and 100% is white.
Syntax:
h1
{
color: hsl(hue, saturation,
lightness);
}
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Colors
</title>
</head>
<body>
<h1>
Tutorials4Coding
</h1>
<p>
Learn Coding Easily!
</p>
</body>
</html>
CSS
h1
{
color: hsl(0, 100%, 50%);
}
p
{
color: hsl(240, 100%, 50%);
}
Output
HSLA
HSLA is the same as HSL, only it includes an additional opacity (alpha) value that ranges from 0 to 1.
Syntax:
h1 {
color: hsla(hue, saturation, lightness, alpha);
}Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Colors
</title>
</head>
<body>
<h1>
Tutorials4Coding
</h1>
<p>
Learn Coding Easily!
</p>
</body>
</html>
CSS
h1
{
color: hsla(9, 100%, 64%, 0.8);
}
p
{
color: hsla(240, 100%, 50%, 1);
}
Output
