INFO
If you want to get HTML Color codes with every single detail you should check out this link. This is so usefull for helping with web design type works. There are showing Color names, color codes , Color search engines, Similar color codes and names, also search storiesALSO
#f0f8ff | #ffffff | #f4f4f4 | #000000 | #7eddfc | #c9c9c9 | #3ff260 | #9496d6 |
#9fb7cc | #aaaa77 | #fad6b9 | #a7bf4e | #d09cd6 | #d6923e | #facf78 | #faf878 |
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 tutorial 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.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) |
<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.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) |
<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.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) |
<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!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 |
<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 programs or online at the online gradient maker.
Here we share some Common HTML Font Samples with color usage.
Verdana, Arial, Helvetica - size=4 | Sample | font face="Verdana,Arial,Helvetica size="4" color="black" |
Arial - size=4 | Sample | font face="Arial" size="4" color="green" |
Impact - size=9 | Sample | font face="Impact" size="9" color="red" |
Courier - size=4 | Sample | font face="Courier" size="4" color="blue" |
Courier New - size=4 | Sample | font face="Courier New" size="4" color="blue" |
Book Antigua - size=6 | Sample | font face="Book Antigua" size="6" |
Bookman Old Style - size=3 | Sample | font face="Bookman Old Style" font size="3" color="orange" |
Century Gothic - size=6 | Sample | font face="Century Gothic" size="6" color="purple" |
Times New Roman - size=4 | Sample | font face="Times New Roman" font size="4" color="black" |
Times New Roman italicized - size=4 | Sample | font face="Times New Roman" font size="4" color="black" |
Times New Roman italicized & bold - size=4 | Sample | font face="Times New Roman" size="4" color="black" |
Modern - size=5 | Sample | font face="Modern" size="5" color="black" |
Modern,Arial - size=5 | Sample | font face="Modern,Arial" size="5" color="blue" |
Comment: 0