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