CSS Tutorial (CSS Colors)

We can get various colors and their combinations from CSS. Sometimes, we wanted to use various ways to get colors and their different effects. In CSS, all these things are done by applying various types of property’s value. All various types that are used in CSS to assign a value of the color property is shown in the below page.

You can specify your color values in various formats. Following table lists all the possible formats −

Format	Syntax	Example
Hex Code	#RRGGBB	p{color:#FF0000;}
Short Hex Code	#RGB	p{color:#6A7;}
RGB %	rgb(rrr%,ggg%,bbb%)	p{color:rgb(50%,50%,50%);}
RGB Absolute	rgb(rrr,ggg,bbb)	p{color:rgb(0,0,255);}
keyword	aqua, black, etc.	p{color:teal;}

These formats are explained in more detail in the following sections −

CSS Colors – Hex Codes

A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).

A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.

Each hexadecimal code will be preceded by a pound or hash sign ‘#’. Following are the examples to use Hexadecimal notation.

Color	Color Hex
	#000000
	#FF0000
	#00FF00
	#0000FF
	#FFFF00
	#00FFFF

CSS Colors – Short Hex Codes

This is a shorter form of the six-digit notation. In this format, each digit is replicated to arrive at an equivalent six-digit value. For example: #6A7 becomes #66AA77.

A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.

Each hexadecimal code will be preceded by a pound or hash sign ‘#’. The following are the examples to use Hexadecimal notation.

CSS Colors	Colors Hex Code
	#000
	#00F
	#0F0
	#F00
	#FF0
	#FFF

CSS Colors – RGB Values

This color value is specified using the rgb( ) property. This property takes three values, one each for red, green, and blue. The value can be an integer between 0 and 255 or a percentage.

NOTE − All the browsers does not support rgb() property of color so it is recommended not to use it.

Following is the example to show few colors using RGB values.

CSS Color	COLOR RGB Format
	rgb(0,0,0)
	rgb(255,0,0)
	rgb(0,255,0)
	rgb(0,0,255)
	rgb(255,255,0)
	rgb(0,255,255)