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.
|
1 2 3 4 5 6 7 |
<!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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!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> |
