CSS provides many ways to define colors, each useful in different situations. Below is a clear overview with examples for each color format.
🎨 CSS Color Formats:
1. Named Colors:
CSS includes a set of predefined color keywords.
.box {
background-color: red;
color: white;
}
<p class=""box>This box has red background color & white text color</p>
Output:
This box has red background color & white text color
Common named colors: red, blue, green, black, white, gold, skyblue, tomato, rebeccapurple.
RGB Colors:
Defines colors using red, green, and blue values from 0–255.
.box {
background-color: rgb(255, 99, 71); /* tomato */
color: rgb(7,7,245); /*blue*/
}
<p>Tomato background & blue color text</p>
Output:
Tomato background & blue color text
Hexadecimal colors:
Hex colors use the format #RRGGBB (or shorthand #RGB).
Example:
.box {
background-color: #ffff00; /* a shade of yellow */
color: #f0f; /* shorthand for magenta (ff00ff)*/
}
<p class="box">Yellow background & magenta color text</p>
Output:
Yellow background & magenta color text
For more idea about styling with css colors,
Visit
HTML Colors page.
