| Previous | Home | Next |
CSS has several options for defining colors of both text and background areas on your pages.These options can entirely replace the color attributes in plain HTML. In addition, you get new options that you just didn't have in plain HTML.
CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element(i.e., its text) or else for the background of the element. They can also be used to affect the color of borders and other decorative effects.
Various types of colors in CSS
Colors in CSS are defined on a sRGB color space. sRGB stands for “Standard Red Green Blue” where colors are defined through three channels: Red, Green and Blue. From there, we have various ways to describe color with CSS. Some of them like keywords and hexadecimal has been there almost since the beginning of the web, while other like HSL or RGB came later.
- RGB: by itself, I don’t use RGB since I usually use a color picker giving me hex triplet. But when I need to edit the alpha-channel, I use RGBa of course.
- Hexadecimal: this is what I use the most in real projects. As said above, any web color picker on the internet will give you at least a hex code. It’s kind of the standard.
- Keywords: I use them either for demos when I don’t care much about the color I pick, or for greyscale like white, black and silver.
- HSL: I never use HSL because I’m not used to it. It’s a really really good representation of the RGB model but it doesn’t look very intuitive to me so I stick with RGB.
<html>
<head>
<style>
p.hexa{
background-color:#00CC99;
font:Arial, Helvetica, sans-serif; color:#000000;
}
p.rgb {
background-color:rgb(250,250,0);
font:Arial, Helvetica, sans-serif; color:rgb(0,0,0);
}
p.colorname {
background-color:red;
font:Arial, Helvetica, sans-serif; color:Black;
}
</style>
</head>
<body>
<p class="hexa">This is used to show hexadecimal color</p>
<p class="rgb">This is used to show RGB color</p>
<p class="colorname">This is used to show color with name</p>
</body>
</html>
Output
| Previous | Home | Next |