HTML color shades

Colors consist of a red, green, and blue element. But what happens when a color contains just a red element? or just a green or blue element? What about if a color consists of equal amounts of red, green, and blue?

This lesson focuses on:

Red shades
Green shades
Blue shades
Equal amount of shades
Gradients

Red shades

You can create a bunch of red shades by setting the red part of a color to anything above zero, and the green and blue parts to 0.

Red shades
Shade	Hex value	RGB value
	#000000	rgb(0,0,0)
	#080000	rgb(8,0,0)
	#100000	rgb(16,0,0)
	#180000	rgb(24,0,0)
	#200000	rgb(32,0,0)
	#280000	rgb(40,0,0)
	#300000	rgb(48,0,0)
	#380000	rgb(56,0,0)
	#400000	rgb(64,0,0)
	#480000	rgb(72,0,0)
	#500000	rgb(80,0,0)
	#580000	rgb(88,0,0)
	#600000	rgb(96,0,0)
	#680000	rgb(104,0,0)
	#700000	rgb(112,0,0)
	#780000	rgb(120,0,0)
	#800000	rgb(128,0,0)
	#880000	rgb(136,0,0)
	#900000	rgb(144,0,0)
	#980000	rgb(152,0,0)
	#A00000	rgb(160,0,0)
	#A80000	rgb(168,0,0)
	#B00000	rgb(176,0,0)
	#B80000	rgb(184,0,0)
	#C00000	rgb(192,0,0)
	#C80000	rgb(200,0,0)
	#D00000	rgb(208,0,0)
	#D80000	rgb(216,0,0)
	#E00000	rgb(224,0,0)
	#E80000	rgb(232,0,0)
	#F00000	rgb(240,0,0)
	#F80000	rgb(248,0,0)
	#FF0000	rgb(255,0,0)

By keeping the blue and green parts of a color at 0, there are 256 red color possibilites. However, this is not the complete set of red shades you can produce. You can set the blue or green parts of a color to a number greater than 0 and still have shades of red, though it will not be a true red, but will be altered by blue and green.

Example:

<table border="1" cellpadding="5" width="90%"> <tr> <td bgcolor="#d62735">Red shades</td> <td bgcolor="#d30e0e">altered by</td> </tr> <tr> <td bgcolor="#870909">blue and green</td> <td bgcolor="#f73131">mixture</td> </tr> </table>

Output:

Red shades	altered by
blue and green	mixture

Green shades

You can create a bunch of green shades by setting the green part of a color to anything above zero, and the red and blue parts to 0.

Green shades
Shade	Hex value	RGB value
	#000000	rgb(0,0,0)
	#000800	rgb(0,8,0)
	#001000	rgb(0,16,0)
	#001800	rgb(0,24,0)
	#002000	rgb(0,32,0)
	#002800	rgb(0,40,0)
	#003000	rgb(0,48,0)
	#003800	rgb(0,56,0)
	#004000	rgb(0,64,0)
	#004800	rgb(0,72,0)
	#005000	rgb(0,80,0)
	#005800	rgb(0,88,0)
	#006000	rgb(0,96,0)
	#006800	rgb(0,104,0)
	#007000	rgb(0,112,0)
	#007800	rgb(0,120,0)
	#008000	rgb(0,128,0)
	#008800	rgb(0,136,0)
	#009000	rgb(0,144,0)
	#009800	rgb(0,152,0)
	#00A000	rgb(0,160,0)
	#00A800	rgb(0,168,0)
	#00B000	rgb(0,176,0)
	#00B800	rgb(0,184,0)
	#00C000	rgb(0,192,0)
	#00C800	rgb(0,200,0)
	#00D000	rgb(0,208,0)
	#00D800	rgb(0,216,0)
	#00E000	rgb(0,240)
	#00E800	rgb(0,232,0)
	#00F000	rgb(0,240,0)
	#00F800	rgb(0,248,0)
	#00FF00	rgb(0,255,0)

By keeping the blue and red parts of a color at 0, there are 256 green color possibilites. However, this is not the complete set of green shades you can produce. You can set the blue or red parts of a color to a number greater than 0 and still have shades of green, though it will not be a true green, but will be altered by blue and red.

Example:

<table border="1" cellpadding="5" width="90%"> <tr> <td bgcolor="#d62735">Greenshades</td> <td bgcolor="#d30e0e">altered by</td> </tr> <tr> <td bgcolor="#870909">blue and red</td> <td bgcolor="#f73131">mixture</td> </tr> </table>

Output:

Green shades	altered by
blue and red	mixture

Blue shades

You can create a bunch of blue shades by setting the blue part of a color to anything above zero, and the red and green parts to 0.

Blue shades
Shade	Hex value	RGB value
	#000000	rgb(0,0,0)
	#000008	rgb(0,0,8)
	#000010	rgb(0,0,16)
	#000018	rgb(0,0,24)
	#000020	rgb(0,0,32)
	#000028	rgb(0,0,40)
	#000030	rgb(0,0,48)
	#000038	rgb(0,0,56)
	#000040	rgb(0,0,64)
	#000048	rgb(0,0,72)
	#000050	rgb(0,0,80)
	#000058	rgb(0,0,88)
	#000060	rgb(0,0,96)
	#000068	rgb(0,0,104)
	#000070	rgb(0,0,112)
	#000078	rgb(0,0,120)
	#000080	rgb(0,0,128)
	#000088	rgb(0,0,136)
	#000090	rgb(0,0,144)
	#000098	rgb(0,0,152)
	#0000A0	rgb(0,0,160)
	#0000A8	rgb(0,0,168)
	#0000B0	rgb(0,0,176)
	#0000B8	rgb(0,0,184)
	#0000C0	rgb(0,0,192)
	#0000C8	rgb(0,0,200)
	#0000D0	rgb(0,0,208)
	#0000D8	rgb(0,0,216)
	#0000E0	rgb(0,0,240)
	#0000E8	rgb(0,0,232)
	#0000F0	rgb(0,0,240)
	#0000F8	rgb(0,0,248)
	#0000FF	rgb(0,0,255)

By keeping the red and green parts of a color at 0, there are 256 blue color possibilites. However, this is not the complete set of blue shades you can produce. You can set the red or green parts of a color to a number greater than 0 and still have shades of blue, though it will not be a true blue, but will be altered by red and green.

Example:

<table border="1" cellpadding="5" width="90%"> <tr> <td bgcolor="#334980">Blue shades</td> <td bgcolor="#5274cc">altered by</td> </tr> <tr> <td bgcolor="#a3afcc">red and green</td> <td bgcolor="#494f6e">mixture</td> </tr> </table>

Output:

Blue shades	altered by
red and green	mixture

Equal amount of shades

What happens when you apply an equal amount of red, green, and blue? You get gray!

Gray shades
Shade	Hex value	RGB value
	RGB(0,0,0)	#000000
	RGB(8,8,8)	#080808
	RGB(16,16,16)	#101010
	RGB(24,24,24)	#181818
	RGB(32,32,32)	#202020
	RGB(40,40,40)	#282828
	RGB(48,48,48)	#303030
	RGB(56,56,56)	#383838
	RGB(64,64,64)	#404040
	RGB(72,72,72)	#484848
	RGB(80,80,80)	#505050
	RGB(88,88,88)	#585858
	RGB(96,96,96)	#606060
	RGB(104,104,104)	#686868
	RGB(112,112,112)	#707070
	RGB(120,120,120)	#787878
	RGB(128,128,128)	#808080
	RGB(136,136,136)	#888888
	RGB(144,144,144)	#909090
	RGB(152,152,152)	#989898
	RGB(160,160,160)	#A0A0A0
	RGB(168,168,168)	#A8A8A8
	RGB(176,176,176)	#B0B0B0
	RGB(184,184,184)	#B8B8B8
	RGB(192,192,192)	#C0C0C0
	RGB(200,200,200)	#C8C8C8
	RGB(208,208,208)	#D0D0D0
	RGB(216,216,216)	#D8D8D8
	RGB(224,224,224)	#E0E0E0
	RGB(232,232,232)	#E8E8E8
	RGB(240,240,240)	#F0F0F0
	RGB(248,248,248)	#F8F8F8
	RGB(255,255,255)	#FFFFFF

By applying an equal amount of red, green, and blue to a color, there are 256 gray color possibilites. However, this is not the complete set of gray shades you can produce. You can set the red, green, and blue parts of a color to different values and still have shades of gray.

Example:

<table border="1" cellpadding="5" width="90%"> <tr> <td bgcolor="#babba8">Gray shades</td> <td bgcolor="#786b63">where the</td> </tr> <tr> <td bgcolor="#a09a8b">red, green, and blue</td> <td bgcolor="#8b8c85">parts are are a different value</td> </tr> </table>

Output:

Gray shades	where the
red, green, and blue	parts are a different value

Gradients

When it comes to color, sometimes you have more than one color to choose from and you don't know which one to choose. In such a scenario, sometimes you can choose more than one.

Have you ever seen one of those fading backgrounds some webpages have? You know, the one where it starts out as one color and changes through several different colors? Here is an example of this.

This type of fading color background is called a gradient and can add that extra dazzle to a webpage to make it more attractive. You can make your own gradients using Adobe Photoshop and many other image editing software or online at the online gradient maker.