The color property in CSS is used to set the color of HTML elements. The color property is used to set the background color, border color, the font color of an element.
You can specify your color values in various formats as below.
- Hex Code - like "#3399CC", "#CC0000", "#FF66FF" etc.
Hex represent colors using a six-digit code, preceded by a hash character, like #rrggbb, in which rr, gg, and bb represents the red, green and blue component of the color respectively.
The value of each component can vary from 00 (no color) and FF (full color) in hexadecimal notation, or 0 and 255 in decimal equivalent notation. Thus #ffffff represents white color and #000000 represents black color. - Short Hex Code - like "#6C0", "#F93", "#C9F" etc.
- RGB % - rgb(40%,40%,40%)
- RGB Absolute - like "rgb(0,255,0)", "rgb(255,0,255)", "rgb(0,0,0)" etc.
This color value is specified using the rgb( ) property. This property takes three values, one each for red, green, and blue. The value can be an integer between 0 and 255 or a percentage. - color keyword - like "red", "green", "blue", "yellow", etc. The color names are case-insensitive.
- HSL - It is a short form of Hue, Saturation, and Lightness.
Hue: It can be defined as the degree on the color wheel from 0 to 360. 0 represents red, 120 represents green, 240 represents blue.
Saturation: It takes value in percentage in which 100% represents fully saturated, i.e., no shades of gray, 50% represent 50% gray, but the color is still visible, and 0% represents fully unsaturated, i.e., completely gray, and the color is invisible.
Lightness: The lightness of the color can be defined as the light that we want to provide the color in which 0% represents black (there is no light), 50% represents neither dark nor light, and 100% represents white (full lightness).
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Learn CSS Colors</title>
<style>
#hex{
color: #3399CC;
}
#shorthex{
color: #6C0;
}
#rgb{
color: rgb(40%,40%,40%);
}
#rgbab{
color: rgb(0,255,0);
}
#keyword{
color: yellow;
}
#hsl{
color: hsl(H, S, L);
}
</style>
</head>
<body>
<h1 id="hex">Learn Hex code color</h1>
<h1 id="shorthex">Learn Short Hex code color</h1>
<h1 id="rgb">Learn RGB color</h1>
<h1 id="rgbab">Learn Hex code color</h1>
<h1 id="keyword">Learn keyword color</h1>
<h1 id="hsl">Learn HSL color</h1>
</body>
</html>
Output :
Learn Hex code color
Learn Short Hex code color
Learn RGB color
Learn Hex code color
Learn keyword color
Learn HSL color
Comments