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:

h1 {
  background-color: red;

}

h2 {
  background-color: #0000FF;

}

h3 {
  background-color: rgb(255, 99, 71);

}

Run Example