CSS Colors
The color property of CSS helps to set the color of the HTML element(s). This helps to set the foreground color of text, text decorations, and borders.
Syntax
/* Syntax
selector {
color: value
}
*/
selector {
/* colorname can be any colour, such as red, blue, yellow, purple, green, etc. */
color: colorname;
}Note: In CSS we use color, not colour.
Example Code
<!doctype html>
<html>
<head>
<style>
h1 {
color: red;
}
p {
color: skyblue;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>Output of Example Code
This will set the color of the heading to red and the color of the paragraph to blue. like that
This is a heading
This is a paragraph
Color Values
The color property can take the following values:
- Color Name: You can use the name of the color as a value. For example, red, blue, yellow, purple, green, etc.
- Hexadecimal: You can use the hexadecimal value of the color. For example, #ff0000, #0000ff, #00ff00, etc.
- RGB: You can use the RGB value of the color. For example, rgb(255, 0, 0), rgb(0, 0, 255), rgb(0, 255, 0), etc.
- RGBA: You can use the RGBA value of the color. For example, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5), rgba(0, 255, 0, 0.5), etc.
- HSL: You can use the HSL value of the color. For example, hsl(0, 100%, 50%), hsl(240, 100%, 50%), hsl(120, 100%, 50%), etc.
- HSLA: You can use the HSLA value of the color. For example, hsla(0, 100%, 50%, 0.5), hsla(240, 100%, 50%, 0.5), hsla(120, 100%, 50%, 0.5), etc.
Let's see an example of each of these values.
Color Name
h1 {
color: red;
}Hexadecimal
The hex code consists of a hash(#) symbol followed by six characters. These six characters are arranged into a set of three pairs (RR, GG, and BB).
Each character pair defines the intensity level of the colour, where R stands for red, G stands for green, and B stands for blue.
The intensity value lies between 00 (no intensity) and ff (maximum intensity).
Breaking the Character Set (RRGGBB):
- RR: RR defines the intensity of color red, ranging from 00 (no red) to FF (maximum red).
- GG: GG defines the intensity of color Green, with values from 00 (no green) to FF (full green).
- BB: GG defines the intensity of color Blue, varying from 00 (no blue) to FF (full blue).
Syntax of Hexadecimal
seletor {
color: #RRGGBB;
}Example of Hexadecimal
<!doctype html>
<html>
<head>
<style>
h1 {
color: #ff0000;
/*Pure Red*/
}
h2 {
color: #00ff00;
/* Pure Green */
}
h3 {
color: #0000ff;
/* Pure Blue */
}
h4 {
color: #b700ff;
/* Custom Color */
}
</style>
</head>
<body>
<h1>CoderrShyam</h1>
<h2>A Developer</h2>
<h3>Founder Coderrshyam.vercel.app</h3>
<h4>Hello World</h4>
</body>
</html>Output of Hexadecimal
This will set the color of the heading to red, green, blue, and custom color. like that
CoderrShyam
A Developer
Founder Coderrshyam.vercel.app
Hello World
RGB
RGB stands for Red, Green, and Blue. It is a color model that defines colors by the intensity of red, green, and blue.
Each argument value lies between 0 and 255.
Syntax of RGB
selector {
color: rgb(red, green, blue);
}Example of RGB
<!doctype html>
<html>
<head>
<style>
body {
background-color: rgb(152, 152, 152);
}
h1 {
color: rgb(0, 0, 0);
/* red:0, green:0, blue:0 -> Black */
}
h2 {
color: rgb(255, 255, 255);
/* red:255, green:255, blue:255 -> white */
}
h3 {
color: rgb(30, 150, 220);
/* red:30, green:150, blue:220 -> Custom Color */
}
</style>
</head>
<body>
<h1>CoderrShyam</h1>
<h2>A Developer</h2>
<h3>Coderrshyam.vercel.app founder</h3>
</body>
</html>Output of RGB
This will set the color of the heading to black, white, and custom color. like that
CoderrShyam
A Developer
Coderrshyam.vercel.app founder
RGBA
RGBA stands for Red, Green, Blue, and Alpha. It is a color model that defines colors by the intensity of red, green, and blue, along with the alpha channel.
Each argument value lies between 0 and 255, and the alpha channel lies between 0 and 1.
Syntax of RGBA
selector {
color: rgba(red, green, blue, alpha);
}Example of RGBA
<!doctype html>
<html>
<head>
<style>
body {
background-color: rgb(152, 152, 152);
}
h1 {
color: rgba(0, 0, 0, 0.8);
/* red:0, green:0, blue:0, Alpha: 0.8 = 80% */
}
h2 {
color: rgb(255, 255, 255, 0.6);
/* red:255, green:255, blue:255 */
}
h3 {
color: rgba(30 150 220 / 60%);
/* red:30, green:150, blue:200, alpha:60% */
}
</style>
</head>
<body>
<h1>CoderrShyam</h1>
<h2>A Developer</h2>
<h3>Coderrshyam.vercel.app founder</h3>
</body>
</html>Output of RGBA
This will set the color of the heading to black, white, and custom color. like that
CoderrShyam
A Developer
Coderrshyam.vercel.app founder
HSL
HSL stands for Hue, Saturation, and Lightness. It is a color model that defines colors by the hue, saturation, and lightness.
- Hue(h): It defines the type of color. It ranges from 0 to 360.
- Saturation(s): It defines the intensity of the color. It ranges from 0% to 100%.
- Lightness(l): It defines the brightness of the color. It ranges from 0% to 100%.
Syntax of HSL
selector {
color: hsl(hue, saturation, lightness);
}Example of HSL
<!doctype html>
<html>
<head>
<style>
body {
background-color: rgb(152, 152, 152);
}
h1 {
color: hsl(235, 100%, 50%);
}
p {
color: hsl(0, 0%, 0%);
}
</style>
</head>
<body>
<h1>CoderrShyam</h1>
<p>A Developer</p>
</body>
</html>Output of HSL
This will set the color of the heading to blue and the paragraph to black. like that
CoderrShyam
A Developer
HSLA
HSLA is similar to HSL; here, A stands for alpha value, which is used to set the opacity. Alpha values lie between 0 and 1.
Syntax of HSLA
selector {
color: hsla(hue, saturation, lightness, alpha);
}Example of HSLA
<!doctype html>
<html>
<head>
<style>
body {
background-color: rgb(152, 152, 152);
}
h1 {
color: hsla(235, 100%, 50%, 0.8);
}
p {
color: hsla(0, 0%, 0%, 0.6);
}
</style>
</head>
<body>
<h1>CoderrShyam</h1>
<p>A Developer</p>
</body>
</html>Output of HSLA
This will set the color of the heading to blue and the paragraph to black. like that
CoderrShyam
A Developer
Conclusion
In this tutorial, we learned about the color property of CSS. We learned how to set the color of the HTML element(s) using the color property. We also learned about the different color values that the color property can take, such as color name, hexadecimal, RGB, RGBA, HSL, and HSLA.
How is this guide?
February 26th, 2026
CSS Comments
Comments help with documentation and are helpful for the future users who read that code, so that they can understand it easily.
CSS Backgrounds
Learn how to style element backgrounds with colors, images, gradients, and advanced background properties in CSS.
© 2026CoderrShyamAll Rights Reserved.