CSS – Colors
CSS – Colors
To specify a certain background color and foreground (like text) color, we need to set color value in the color property in CSS. Using various formats, we can specify color values that are described as below table,
Format
Syntax
Description
Example
Hex code
#RRGGBB
R-Red, G-Green and B-Blue. 6-digit code with 1st two digit for R, next 2-digit for G and last 2-digit for B.
p{color:#00FF00;}
Hex code in short forms.
#RGB
3-digit notation where each digit represents same 2-digit value. #RGB is equivalent to #RRGGBB
p{color:#0FF;}
RGB% or RGB absolute
color: rgb (rrr%, ggg%,bbb%)
or,
color:rgb(rrr,ggg,bbb)
rgb() property can take 3 values red, green and blue in integer ( 0 to 255) or a %
p{color:rgb (50%, 50%, 25%);}
or,
p{color:rgb(0,125,255);}
Keyword
Black, aqua, red, teal, etc.
Using color name
P {color: blue;}
Example:
<!DOCTYPE html>
<html>
<head>
<style type = "text/css" >
body {
background-color: #0FF;
}
h1 {
color: maroon;
margin-left: 40px;
}
h2{color:rgb(10%,20%,70%);}
h3{color:rgb(125,0,255);}
p{color:#FF000F;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is rgb in %.</h2>
<h3>This is absolute rgb value.</h3>
<p>This is hex color in 6-digit.</p>
</body>
</html>
Output:
Quiz :
Quiz 1: What are different ways; we can set color in CSS?
Quiz 2: What is difference between RGB% and absolute value? Give examples.
