HTML Colors
Color Names
In HTML, a color can be specified by using a color name:
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:red">
Background-color set by using red
</h2>
<h2 style="background-color:orange">
Background-color set by using orange
</h2>
<h2 style="background-color:yellow">
Background-color set by using yellow
</h2>
<h2 style="background-color:blue;color:white">
Background-color set by using blue
</h2>
<h2 style="background-color:cyan">
Background-color set by using cyan
</h2>
</body>
</html>
RESULTS
Background-color set by using red
Background-color set by using orange
Background-color set by using yellow
Background-color set by using blue
Background-color set by using cyan
RGB Value
In HTML, a color can also be specified as an RGB value, using this formula: rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
For example, rgb(255,0,0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.
To display the color black, all color parameters must be set to 0, like this: rgb(0,0,0).
To display the color white, all color parameters must be set to 255, like this: rgb(255,255,255).
Experiment by mixing the RGB values below:
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:rgb(255,0,0)">
Background-color set by using rgb(255,0,0)
</h2>
<h2 style="background-color:rgb(0,255,0)">
Background-color set by using rgb(0,255,0)
</h2>
<h2 style="background-color:rgb(0,0,255)">
Background-color set by using rgb(0,0,255)
</h2>
<h2 style="background-color:rgb(255,255,0)">
Background-color set by using rgb(255,255,0)
</h2>
<h2 style="background-color:rgb(255,0,255)">
Background-color set by using rgb(255,0,255)
</h2>
<h2 style="background-color:rgb(0,255,255)">
Background-color set by using rgb(0,255,255)
</h2>
</body>
</html>
RESULTS
Background-color set by using rgb(255,0,0)
Background-color set by using rgb(0,255,0)
Background-color set by using rgb(0,0,255)
Background-color set by using rgb(255,255,0)
Background-color set by using rgb(255,0,255)
Background-color set by using rgb(0,255,255)
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:rgb(0,0,0);color:white">
Background-color set by using rgb(0,0,0)
</h2>
<h2 style="background-color:rgb(90,90,90);color:white">
Background-color set by using rgb(90,90,90)
</h2>
<h2 style="background-color:rgb(128,128,128);color:white">
Background-color set by using rgb(128,128,128)
</h2>
<h2 style="background-color:rgb(200,200,200);color:white">
Background-color set by using rgb(200,200,200)
</h2>
<h2 style="background-color:rgb(255,255,255);">
Background-color set by using rgb(255,255,255)
</h2>
</body>
</html>
RESULTS
Background-color set by using rgb(0,0,0)
Background-color set by using rgb(90,90,90)
Background-color set by using rgb(128,128,128)
Background-color set by using rgb(200,200,200)
Background-color set by using rgb(255,255,255)
HEX Value
In HTML, a color can also be specified using a hexadecimal value in the form: #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as decimal 0-255).
For example, #FF0000 is displayed as red, because red is set to its highest value (FF) and the others are set to the lowest value (00).
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:#FF0000">
Background-color set by using #FF0000
</h2>
<h2 style="background-color:#00FF00">
Background-color set by using #00FF00
</h2>
<h2 style="background-color:#0000FF">
Background-color set by using #0000FF
</h2>
<h2 style="background-color:#FFFF00">
Background-color set by using #FFFF00
</h2>
<h2 style="background-color:#FF00FF">
Background-color set by using #FF00FF
</h2>
<h2 style="background-color:#00FFFF">
Background-color set by using #00FFFF
</h2>
</body>
</html>
RESULTS
Background-color set by using #FF0000
Background-color set by using #00FF00
Background-color set by using #0000FF
Background-color set by using #FFFF00
Background-color set by using #FF00FF
Background-color set by using #00FFFF
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:#000000;color:white">
Background-color set by using #000000
</h2>
<h2 style="background-color:#808080;color:white">
Background-color set by using #808080
</h2>
<h2 style="background-color:#FFFFFF;">
Background-color set by using #FFFFFF
</h2>
</body>
</html>
RESULTS
Comments
Post a Comment