CSS Colors
CSS colors are used to specify a color. It can set color for both the foreground and background of an element. CSS colors are most important for a website.
There are various format for the color values. here are the common formats of the colors:
Format of Colors | Syntax | Example |
---|---|---|
Color Name | name | black |
HEX Color Code | #RRGGBB | #00ffff |
Short form of HEX Color Code | #RGB | #000 |
RGB with % | rgb(r%,g%,b%) | rgb(50%,50%,50%) |
RGB | rgb(r,g,b) | rgb(255,0,0) |
CSS Color in HEX Code
It is a hexadecimal code for a color represented in six digit. It is a combination of three color values. they are red, green and blue. The first two digits are for red values, second two digits are for green values and last two digits are represented blue values.
Here are some hexadecimal color code:
Hex Code | Hex Code Color |
---|---|
#FF0000 | |
#17C0DA | |
#3C3C3C | |
#0000FF | |
#FFA500 | |
#000000 | |
#3CB371 |
Short Form of Hex Value
This is the short form of hexadecimal color code. Some six digits hex code can be written in three digits code. Here, from each color component you can combine the duplicate digits into one. It is not possible for all hexadecimal color code. It is possible only when the values of each color component are same. The #FFCC00 color code can be converted into #FCO but it is not possible to convert #3CB371 into shorthand form.
Here are some shorthand hexadecimal color code:
Hex Code | Hex Code Color |
---|---|
#FC0 | |
#000 | |
#F00 | |
#FFF | |
#0FF | |
#F0F | |
#FF0 |
CSS Color in RGB
This color format can be specified by using rgb() property. The rgb() property also takes three values. They are red, green and blue. You can give the values in two format, one is the integer (0 to 255) value and other is the percentage.
RGB Value | RGB Color |
---|---|
rgb(255,0,255) | |
rgb(255, 255, 255) | |
rgb(255, 0, 0) | |
rgb(0, 0, 0) | |
rgb(60, 179, 113) | |
rgb(60, 60, 60) | |
rgb(106, 90, 205) |
Note: The rgb() property is not supported by all browsers.
Example of CSS Color:
background-color: red;
}
h2 {
background-color: #0000FF;
}
h3 {
background-color: rgb(255, 99, 71);
}
Run Example