Colors

CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e. its text) or else for the background of the element. They can also be used to affect the color of borders and other decorative effects.

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

Format	Syntax	Description	Example
Keyword	<property>: <colorname>	CSS has a set of predefined color names that you can use directly.	red, blue, green, yellow, black, white, etc.
Hexadecimal Code	#RRGGBB	Starts with a hash (#) followed by six hexadecimal digits.	#FF0000 – red
Short Hexadecimal Code	#RGB	Shorter version of hexadecimal format where each of the RGB components is represented by a single digit, and the value is duplicated.	#F00 – red
RGB	rgb(red,green,blue)	Colors can be defined using the rgb() function, which takes three parameters representing the red, green, and blue values.	rgb(0, 0, 255) – blue
RGBA	rgba()	Similar to RGB, with an additional parameter for the alpha (transparency) value. 0 (fully transparent) and 1 (fully opaque)	rgba(0,0,255,0.5) – translucent blue
HSL	hsl()	Colors can be defined using the rgb() function which stands for Hue (0 to 360 degree), Saturation (%), and Lightness (%).	hsl(120, 100%, 50%) – pure green
HSLA	hsla()	Similar to HSL, with an additional parameter for the alpha (transparency) value.	hsl(120, 100%, 50%, 0.5) – translucent green
currentcolor Keyword	currentcolor	It refers to the value of the color property of the element.	color: red; /* Red text color / border: 10px solid currentcolor; / Red border color */
System color	as per OS or browser	CSS allows usage of system colors defined by the user’s OS or browser.	ButtonText, Window, WindowText

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

CSS Colors – Keyword

CSS supports the color names to be directly passed to the property background-color and color. 140 standard color names are supported by CSS.

Few of the examples are listed in the table below:

Color	Color Name
	Black
	Red
	Blue
	Green
	Aquamarine

Here is an example:

<html><head><style>
   #colorkeyword{
      background-color: aqua;
      padding: 10px;
   }
</style></head><body><h3>Color Keyword - example</h3><p>As the keyword passed is aqua, the background will appear as aqua colored..</p><div id="colorkeyword">
      This div element has a colored background based on the color keyword passed, i.e aqua.
   </div></body></html>

CSS Colors – Hexadecimal 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 of hexadecimal notation.

Note: To specify the hexadecimal codes, you can use upper case or lower case letters.

Color	Color Hexadecimal Code
	#000000
	#FF0000
	#00FF00
	#0000FF
	#FFFF00
	#00FFFF
	#FF00FF
	#C0C0C0
	#FFFFFF

Here is an example:

<html><head><style>
   #hexcode {
      background-color: #00ff00;
      padding: 10px;
}
</style></head><body><h3>Hexadecimal code - example</h3><p>As the hexadecimal code is #00ff00 the background will appear green.</p><div id="hexcode">
         This div element has a green background.
      </div></body></html>

CSS Colors – Short Hexadecimal 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 short hexadecimal code will be preceded by a pound or hash sign ‘#’. Following are the examples of short hexadecimal notation.

Note: To specify the hexadecimal codes, you can use upper case or lower case letters.

Color	Short Hexadecimal Code
	#000
	#F00
	#0F0
	#0FF
	#FF0
	#0FF
	#F0F
	#FFF

Here is an example:

<html><head><style>
   #shorthex {
      background-color: #00f;
      padding: 10px;
   }
</style></head><body><h3>Short Hexadecimal code - example</h3><p>As the short hexadecimal code is #00f the background will appear blue.</p><div id="shorthex">
         This div element has a blue background.
      </div></body></html>

CSS Colors – RGB Values

This color value is specified using the rgb( ) property.
It 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.

Color	Color RGB
	rgb(0,0,0)
	rgb(255,0,0)
	rgb(0,255,0)
	rgb(0,0,255)
	rgb(255,255,0)
	rgb(0,255,255)
	rgb(255,0,255)
	rgb(192,192,192)
	rgb(255,255,255)

Here is an example:

<html><head><style>
   #rgbvalue {
      background-color: rgb(255,0,255);
      padding: 10px;
   }
</style></head><body><h3>RGB - example</h3><p>As the rgb(255,0,255) is set the background will appear accordingly.</p><div id="rgbvalue">
      This div element has a colored background based on the rgb values.
   </div></body></html>

CSS Colors – RGBA Values

This color value is specified using the rgba( ) property.
It takes four values, one each for red, green, and blue and the last value as the alpha (transparency) value.
The alpha value can be any value between 0 and 1.

NOTE: All the browsers do not support rgba() property of color so it is not recommended.

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

Color	Color RGBA
	rgba(0,0,0,0)
	rgba(255,0,0,0.2)
	rgba(0,255,0,0.3)
	rgba(0,0,255,0.5)
	rgba(255,255,0,0.7)
	rgba(0,255,255,0.1)
	rgba(255,0,255,1)
	rgba(192,192,192,0.4)
	rgba(255,255,255,1)

Here is an example:

<html><head><style>
   #rgbavalue {
      background-color: rgba(255,0,255,0.2);
      padding: 10px;
   }
</style></head><body><h3>RGBA - example</h3><p>As the rgba(255,0,255,0.2) is set the background will appear with transparency value of 0.2.</p><div id="rgbavalue">
      This div element has a colored background based on the rgba values.
   </div></body></html>

CSS Colors – HSL Values

This color value is specified using the hsl() function.
HSL stands for hue, saturation and lightness.
Hue is represented in degrees (0-360), saturation and lightness are represented as percentages (0% – 100%).

Following is the example to show few colors using HSL property.

Color	Color HSL
	hsl(0,0%,50%)
	hsl(255,80%,70%)
	hsl(290,100%,60%)
	hsl(360,70%,20%)
	hsl(89,80%,67%)

Here is an example:

<html><head><style>
   #hslvalue {
      background-color: hsl(355,70%,50%);
      padding: 10px;
}
</style></head><body><h3>HSL - example</h3><p>As the hsl(355,70%,50%) is set the background will appear based on the hsl values passed.</p><div id="hslvalue">
      This div element has a colored background based on the hsl values hsl(355,70%,50%).
   </div></body></html>

CSS Colors – HSLA Values

This color value is specified using the hsl() function.
HSLA stands for hue, saturation, lightness and alpha.
It takes four values, first for hue, second for saturation, third for lightness and fourth is the alpha (transparency) value.
Hue is represented in degrees (0-360), saturation and lightness are represented as percentages (0% – 100%), and alpha value can be in between 0 and 1.

Following is the example to show few colors using HSLA property.

Color	Color HSLA
	hsla(0,0%,50%,0.5)
	hsla(255,80%,70%,1)
	hsla(290,100%,60%,0.2)
	hsla(360,70%,20%,0.4)
	hsla(89,80%,67%,0.9)

Here is an example:

<html><head><style>
   #hslavalue {
      background-color: hsla(355,70%,50%,0.4);
      padding: 10px;
   }
</style></head><body><h3>HSLA - example</h3><p>As the hsla(355,70%,50%,0.4) is set the background will appear based on the hsla values passed, with high transparency.</p><div id="hslavalue">
      This div element has a colored background based on the hsl values hsla(355,70%,50%,0.4).
   </div></body></html>

CSS Colors – currentcolor keyword

The currentcolor keyword signifies the value of the color property of an element. It can be passed to any other styling property using the keyword currentcolor.

Here is an example:

<html><head><style>
   #currcolor {
      color: red;
      border: 5px solid currentcolor;
   }
</style></head><body><h2>The currentcolor Keyword</h2><p>As the currentcolor keyword is used for border after color property is set as red, the border will also appear red.</p><div id="currcolor">
      This div element has a red text color and a red border.
   </div></body></html>

CSS Colors – Building Color Codes

You can build millions of color codes using our Color Code Builder. Check the HTML Color Code Builder.

To use this tool, you would need a Java Enabled Browser.

CSS Colors – Browser Safe Colors

Here is the list of 216 colors which are supposed to be most safe and computer independent colors. These colors vary from hexa code 000000 to FFFFFF. These colors are safe to use because they ensure that all computers would display the colors correctly when running a 256 color palette −

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

CSS Colors – Related Properties

All the properties related to color are listed in the table below:

Property	Description
opacity	Sets the transparency level of an element.
hue	Represents the hue angle of an element.
color	Sets the foreground of an element’s text and text decoration.
background-color	Sets the color of the background.
border-color	Sets the color of the border of an element.
box-shadow	Adds a shadow effect around an element.
outline-color	Sets the color of the outline around an element.
text-shadow	Adds shadow to the text of an element.

CSS Colors – Keyword

CSS Colors – Hexadecimal Codes

CSS Colors – Short Hexadecimal Codes

CSS Colors – RGB Values

CSS Colors – RGBA Values

CSS Colors – HSL Values

CSS Colors – HSLA Values

CSS Colors – currentcolor keyword

CSS Colors – Building Color Codes

CSS Colors – Browser Safe Colors

CSS Colors – Related Properties

Comments

Leave a Reply Cancel reply