CSS Color
In HTML CSS uses color values to specify a color. You can specify the Colors in various formats like RGB, HEX, HSL, RGBA, and HSLA values.
The given following table will help you to understand the color format of CSS.
| Fromat | Syntax | Example |
|---|---|---|
| Hex Code | #800000 | p[color: #800000;} |
| Short Hex Code | #RGB | p{color:#6A7;} |
| RGB % | rgb(rrr%,ggg %,bbb%) | p{color:rgb(50%, 50%, 50%); } |
| Keyword | red, black etc. | p{color:green;} |
Text color
If you want to change the color of text then set the color of the text.
|
1 2 3 4 5 6 |
<html> <body> <h1 style="backgroundcolor:red;color:#6A7;">Hello CSS</h1> <p style="background-color:#800000;">We are learning CSS</p> </body> </html> |
Border Color
If you want to change the border color of text then set the color of the text.
<!DOCTYPE html>
<html>
<body>
<h1 style="border:2px solid red">Hello CSS</h1>
<h2 style="border:2px solid blue">Border color</h2>
</body>
</html>CSS Colors- Hex Codes
In Hex codes there are 6 digits to represent the color. Each hexadecimal code will be used within the hash ‘#’ sign.
There are the following 6 digits values of Hex Code in detail.
- The first two digits represents red value(RR).
- The second two digits represent the green value(GG).
- The third two digits represents blue value(BB).
The following table will help you to implement the Hexadecimal notation:
| Color Name | Color Hex |
|---|---|
| Black | #000000 |
| Red | #FF0000 |
| Green | #00FF00 |
| Blue | #0000FF |
Let us see an example of CSS color-hex codes:
<!DOCTYPE html>
<html>
<head>
<style>
Black
h1{ color: #0000ff;}
H2{color: #FF0000;}
</style>
</head>
<body><h1>Hexa code CSS Example1</h1>
<h2>Hexa code CSS Example2</h2>
</body>
</html>CSS Colors- RGB Values
In CSS Color, RGB values are represented by rgb() property. It takes three values red, green, and blue. The value can be an integer between 0 and 225 or a percentage.
NOTE: There are various browsers not supported in rgb() property of color.
The following table will help you to implement Hexadecimal notation:
| Color Name | RGB Value |
|---|---|
| Black | rgb(0,0,0) |
| Red | rgb(255,0,0) |
| Green | rgb(0,225,0) |
| Blue | rgb(0,0,225) etc. |
Let us see an example of CSS color-RGB values:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: rgb(0, 191, 255);
color: rgb(255, 0, 0);
</style>
</head>
<body>
<div>
<h1>RGB Value CSS Example1</h1>
<h2>RGB Value CSS Example2</h2>
</div>
</body>
</html>
