CSS Color

Color value

HTML colors are defined using a hexadecimal (hex) notation. The hexadecimal value combines Red, Green, and Blue color values (RGB). The lowest value is 0 (hex 00). The highest value is 255 (hex FF).

Hex values are written as three double-digit numbers, starting with a # sign, such as #01EEFF.

The following table lists the color name, hex color values and rgb color values.

COLOR	HEXCOLOR	RGB COLOR
Black	#000000	rgb(0,0,0)
Red	#FF0000	rgb(255,0,0)
Green	#00FF00	rgb(0,255,0)
Blue	#0000FF	rgb(0,0,255)
Yellow	#FFFF00	rgb(255,255,0)
Cyan	#00FFFF	rgb(0,255,255)
Magenta	#FF00FF	rgb(255,0,255)
Gray	#C0C0C0	rgb(192,192,192)
White	#FFFFFF	rgb(255,255,255)


<!DOCTYPE HTML> 
<html> 
<body> 
    <p style="background-color:#C0C0C0"> 
    Color set by using hex value <!--   ww  w . j av a 2 s .c  o m-->
    </p> 
    <p style="background-color:rgb(192,192,192)"> 
    Color set by using rgb value 
    </p> 
    <p style="background-color:gray"> 
    Color set by using color name 
    </p> 
</body> 
</html>

Click to view the demo

In the code above we use color value in various forms to set the background color of a paragraph.

The code above generates the following result.

Predefined color names

We can also use keyword to reference color:

For example,aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

Color Name	Hex	Decimal
black	#000000	0,0,0
green	#008000	0,128,0
silver	#C0C0C0	192,192,192
lime	#00FF00	0,255,0
gray	#808080	128,128,128
olive	#808000	128,128,0
white	#FFFFFF	255,255,255
yellow	#FFFF00	255,255,0
maroon	#800000	128,0,0
navy	#000080	0,0,128
red	#FF0000	255,0,0
blue	#0000FF	0,0,255
purple	#800080	128,0,128
teal	#008080	0,128,128
fushia	#FF00FF	255,0,255
aqua	#00FFFF	0,255,255

RGB value short form

Use hexadecimal value for each of the red, green, and blue components. Each pair is in hexadecimal notation in the range 00 - FF.

hex values are usually prefixed with #, such as #ffffff, which represents white. A "pure" blue would be written #0000FF, "pure" red is written #FF0000.

#RGB is a shorter form of the six-digit notation described above. In this format, each digit is replicated to get an equivalent six-digit value, for example #F7C becomes #FF77CC.


<!DOCTYPE HTML>
<html>
    <head>
        <style>
body {<!--from   ww  w .  j a v  a 2  s.  co  m-->
    background-color: yellow;
}

div#one {
    width: 50px;
    height: 50px;
    border: 1px solid rgb(128, 128, 128);
    margin: 5px;
    float: left;
    background-color: #000;
}
        </style>
    </head>
    <body>
        <div id='one'></div>
    </body>
</html>

Click to view the demo

The gray colors:

Color Name	Hex	Decimal
darkgray	#a9a9a9	169,169,169
darkslategray	#2f4f4f	47,79,79
dimgray	#696969	105,105,105
gray	#808080	128,128,128
lightgray	#d3d3d3	211,211,211
lightslategray	#778899	119,136,153
slategray	#708090	112,128,144

The code above generates the following result.

Color functions

There are a number of functions that allow you to create a color.

Function	Description	Example
rgb(r, g, b)	using the RGB model.	color: rgb(100, 100, 100)
rgba(r, g, b, a)	using the RGB model with an alpha value to specify opacity. 0 is fully transparent; 1 is fully opaque.	color: rgba(112, 128, 144, 0.4)
hsl(h, s, l)	using the hue, saturation, and lightness (HSL) model.	color: hsl(100, 100%, 22%)
hsla(h, s, l, a)	HSL with an alpha value to specify opacity.	color: hsla(100, 100%, 22%, 0.4)

rgb(rrr.rr%,ggg.gg%,bbb.bb%) uses RGB values in the range 0% to 100%, with decimal values allowed (e.g., 75.5%). The value for black would thus be rgb(0%,0%,0%), whereas blue would be rgb(0%,0%,100%).

In rgb(rrr,ggg,bbb) the accepted range of values is 0-255. The range is the decimal equivalent of 00-FF in hexadecimal. In this format, green would be rgb(0,255,0), and white would be represented as rgb(255,255,255).

The following code uses color functions to set colors.


<!DOCTYPE HTML>
<html>
    <head>
<style>
body {<!--  ww w .  jav  a2 s .c  om-->
    background-color: pink;
    line-height: 32px;
}
span {
    border: 1px solid rgb(0, 0, 0);
}
span#keyword {
    background-color: yellow;
}
span#rgb {
    background-color: rgb(200, 0, 0);
    color: #fff;
}
span#hexadecimal {
    background-color: #000000;
    color: #ffffff;
}
span#short-hex {
    background-color: #fff;
    color: #000;
}
span#transparent {
    background-color: transparent;
}
</style>
    </head>
    <body>
        <p>
            <span id='keyword'>color keyword</span>,
            <span id='rgb'>RGB value</span>, 
            <span id='hexadecimal'>hexadecimal value</span> 
            <span id='short-hex'>short hexadecimal</span> 
            <span id='transparent'>transparent</span>
        </p>
    </body>
</html>

Click to view the demo

We can even use transparent as a color.

The code above generates the following result.