Colors in CSS are most often specified by:
- a valid color name - like "red"
- an RGB value - like "rgb(255, 0, 0)"
- a HEX value - like "#ff0000"
Color Names
Colors set by using color names:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Color Names Examples</h2>
<p>Note: You will learn more about the background-color and the color property later in our tutorial.</p>
<h2 style="background-color:red">
Red background-color
</h2>
<h2 style="background-color:green">
Green background-color
</h2>
<h2 style="background-color:blue;color:white">
Blue background-color and white text color
</h2>
<h2 style="background-color:orange">
Orange background-color
</h2>
<h2 style="background-color:yellow">
Yellow background-color
</h2>
<h2 style="background-color:cyan">
Cyan background-color
</h2>
<h2 style="background-color:black;color:white">
Black background-color and white text color
</h2>
</body>
</html>
RGB (Red, Green, Blue)
RGB color values can be specified using this formula: rgb(red, green, blue).
Each parameter (red, green, 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. Experiment by mixing the RGB values below:
<!DOCTYPE html>
<html>
<body>
<h2>RGB Color Examples</h2>
<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, 165, 0)">
Background-color set by using rgb(255, 165, 0)
</h2>
<h2 style="background-color:rgb(255, 255, 0)">
Background-color set by using rgb(255, 255, 0)
</h2>
<h2 style="background-color:rgb(0, 255, 255)">
Background-color set by using rgb(0, 255, 255)
</h2>
</body>
</html>
Hexadecimal Colors
RGB values can also be specified using hexadecimal color values 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). Note: HEX values are case-insensitive: "#ff0000" is the same as "FF0000".
<!DOCTYPE html>
<html>
<body>
<h2>HEX Color Examples</h2>
<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:#FFA500">
Background-color set by using #FFA500
</h2>
<h2 style="background-color:#FFFF00">
Background-color set by using #FFFF00
</h2>
<h2 style="background-color:#00FFFF">
Background-color set by using #00FFFF
</h2>
</body>
</html>
No comments:
Write comments