07 Sep 2017
HTML Colors
Colors are the most important part of any webpage. We can specify colors in our webpage by using:
- Color names
- An RGB value
- A HEX codes.
Let’s discuss these methods one by one.
Html Colors – Color Names
We can specify a color by direct using a color names:
Color | Name |
---|---|
Black | |
Blue | |
Yellow | |
Cyan | |
Red | |
Purple |
Example:
<html>
<body>
<div style=”background:blue”>
Div with Background-color Blue
</div>
<div style=”background:red”>
Div with Background-color Red
</div>
<div style=”background:green”>
Div with Background-color Green
</div>
<div style=”background:yellow”>
Div with Background-color Yellow
</div>
<div style=”background:cyan”>
Background-color set by using Cyan
</div>
</body>
</html>
<body>
<div style=”background:blue”>
Div with Background-color Blue
</div>
<div style=”background:red”>
Div with Background-color Red
</div>
<div style=”background:green”>
Div with Background-color Green
</div>
<div style=”background:yellow”>
Div with Background-color Yellow
</div>
<div style=”background:cyan”>
Background-color set by using Cyan
</div>
</body>
</html>
Html Colors – RGB Value
We can also specify a color as an RGB value, this property takes 3 values red, green and blue, each parameter defines the intensity of color between 0 and 255.
Color | RGB Value |
---|---|
rgb(255,0,0) | |
rgb(0,0,0) | |
rgb(0,255,0) | |
rgb(0,0,255) | |
rgb(192,192,192) | |
rgb(255,255,255) |
Example:
<html>
<body>
<div style=”background:rgb(255,0,0)”>
Div with Background-color Red
</div>
<div style=”background:rgb(0,255,0)”>
Div with Background-color Green
</div>
<div style=”background:rgb(0,0,255)”>
Background-color set by using Blue
</div>
</body>
</html>
<body>
<div style=”background:rgb(255,0,0)”>
Div with Background-color Red
</div>
<div style=”background:rgb(0,255,0)”>
Div with Background-color Green
</div>
<div style=”background:rgb(0,0,255)”>
Background-color set by using Blue
</div>
</body>
</html>
Html Colors – Hex Codes
Hex Code is a 6 digit representation of color, specified with: #RRGGBB (RR- red, GG- green, BB- blue).
We can use upper case or lower case letters to specify hexadecimal values.
Color | RGB Value |
---|---|
#000000 | |
#E1E1E1 | |
#FFFFFF | |
#808080 | |
#A1A1A1 | |
#FF55FF |
Example:
<html>
<body>
<div style=”background:#000000″> </div>
<div style=”background:#E1E1E1″> </div>
<div style=”background:#FFFFFF”> </div>
<div style=”background:#808080″> </div>
</body>
</html>
<body>
<div style=”background:#000000″> </div>
<div style=”background:#E1E1E1″> </div>
<div style=”background:#FFFFFF”> </div>
<div style=”background:#808080″> </div>
</body>
</html>
Leave a Reply
You must be logged in to post a comment.
No Responses