Category: HTML

HTML Color Names

On this page, you will find a table of colour names that are supported by most browsers.

Only 16 ”color names” are supported by the W3C HTML 4.0 standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow).

Black | #000000 |%%(display:block; width: 100px; background:#000000;) %% |Green | #008000 |%%(display:block; width: 100px; background:#008000;) %%
Silver | #C0C0C0 |%%(display:block; width: 100px; background:#C0C0C0;) %%|Lime | #00FF00|%%(display:block; width: 100px; background:#00FF00;) %%
Gray | #808080 |%%(display:block; width: 100px; background:#808080;) %%|Olive | #808000|%%(display:block; width: 100px; background:#808000;) %%
White | #FFFFFF |%%(display:block; width: 100px; background:#FFFFFF;) %%|Yellow| #FFFF00|%%(display:block; width: 100px; background:#FFFF00;) %%
Maroon | #800000 |%%(display:block; width: 100px; background:#800000;) %%|Navy | #000080|%%(display:block; width: 100px; background:#000080;) %%
Red | #FF0000 |%%(display:block; width: 100px; background:#FF0000;) %%|Blue | #0000FF|%%(display:block; width: 100px; background:#0000FF;) %%
Purple | #800080 |%%(display:block; width: 100px; background:#800080;) %%|Teal | #008080|%%(display:block; width: 100px; background:#008080;) %%
Fuchsia| #FF00FF |%%(display:block; width: 100px; background:#FF00FF;) %%|Aqua | #00FFFF|%%(display:block; width: 100px; background:#00FFFF;) %%

For all other colors, you should use the Color HEX__ value.

|~AliceBlue|#F0F8FF|%%(display:block; width: 100px; background:#F0F8FF;) %%
|~AntiqueWhite|#FAEBD7|%%(display:block; width: 100px; background:#FAEBD7;) %%
|~Aqua|#00FFFF|%%(display:block; width: 100px; background:#00FFFF;) %%
|~Aquamarine|#7FFFD4|%%(display:block; width: 100px; background:#7FFFD4;) %%
|~Azure|#F0FFFF|%%(display:block; width: 100px; background:#F0FFFF;) %%
|~Beige|#F5F5DC|%%(display:block; width: 100px; background:#F5F5DC;) %%
|~Bisque|#FFE4C4|%%(display:block; width: 100px; background:#FFE4C4;) %%
|~Black|#000000|%%(display:block; width: 100px; background:#000000;) %%
|~BlanchedAlmond|#FFEBCD|%%(display:block; width: 100px; background:#FFEBCD;) %%
|~Blue|#0000FF|%%(display:block; width: 100px; background:#0000FF;) %%
|~BlueViolet|#8A2BE2|%%(display:block; width: 100px; background:#8A2BE2;) %%
|~Brown|#A52A2A|%%(display:block; width: 100px; background:#A52A2A;) %%
|~BurlyWood|#DEB887|%%(display:block; width: 100px; background:#DEB887;) %%
|~CadetBlue|#5F9EA0|%%(display:block; width: 100px; background:#5F9EA0;) %%
|~Chartreuse|#7FFF00|%%(display:block; width: 100px; background:#7FFF00;) %%
|~Chocolate|#D2691E|%%(display:block; width: 100px; background:#D2691E;) %%
|~Coral|#FF7F50|%%(display:block; width: 100px; background:#FF7F50;) %%
|~CornflowerBlue|#6495ED|%%(display:block; width: 100px; background:#6495ED;) %%
|~Cornsilk|#FFF8DC|%%(display:block; width: 100px; background:#FFF8DC;) %%
|~Crimson|#DC143C|%%(display:block; width: 100px; background:#DC143C;) %%
|~Cyan|#00FFFF|%%(display:block; width: 100px; background:#00FFFF;) %%
|~DarkBlue|#00008B|%%(display:block; width: 100px; background:#00008B;) %%
|~DarkCyan|#008B8B|%%(display:block; width: 100px; background:#008B8B;) %%
|~DarkGoldenRod|#B8860B|%%(display:block; width: 100px; background:#B8860B;) %%
|~DarkGray|#A9A9A9|%%(display:block; width: 100px; background:#A9A9A9;) %%
|~DarkGreen|#006400|%%(display:block; width: 100px; background:#006400;) %%
|~DarkKhaki|#BDB76B|%%(display:block; width: 100px; background:#BDB76B;) %%
|~DarkMagenta|#8B008B|%%(display:block; width: 100px; background:#8B008B;) %%
|~DarkOliveGreen|#556B2F|%%(display:block; width: 100px; background:#556B2F;) %%
|~Darkorange|#FF8C00|%%(display:block; width: 100px; background:#FF8C00;) %%
|~DarkOrchid|#9932CC|%%(display:block; width: 100px; background:#9932CC;) %%
|~DarkRed|#8B0000|%%(display:block; width: 100px; background:#8B0000;) %%
|~DarkSalmon|#E9967A|%%(display:block; width: 100px; background:#E9967A;) %%
|~DarkSeaGreen|#8FBC8F|%%(display:block; width: 100px; background:#8FBC8F;) %%
|~DarkSlateBlue|#483D8B|%%(display:block; width: 100px; background:#483D8B;) %%
|~DarkSlateGray|#2F4F4F|%%(display:block; width: 100px; background:#2F4F4F;) %%
|~DarkTurquoise|#00CED1|%%(display:block; width: 100px; background:#00CED1;) %%
|~DarkViolet|#9400D3|%%(display:block; width: 100px; background:#9400D3;) %%
|~DeepPink|#FF1493|%%(display:block; width: 100px; background:#FF1493;) %%
|~DeepSkyBlue|#00BFFF|%%(display:block; width: 100px; background:#00BFFF;) %%
|~DimGray|#696969|%%(display:block; width: 100px; background:#696969;) %%
|~DodgerBlue|#1E90FF|%%(display:block; width: 100px; background:#1E90FF;) %%
|~Feldspar|#D19275|%%(display:block; width: 100px; background:#D19275;) %%
|~FireBrick|#B22222|%%(display:block; width: 100px; background:#B22222;) %%
|~FloralWhite|#FFFAF0|%%(display:block; width: 100px; background:#FFFAF0;) %%
|~ForestGreen|#228B22|%%(display:block; width: 100px; background:#228B22;) %%
|~Fuchsia|#FF00FF|%%(display:block; width: 100px; background:#FF00FF;) %%
|~Gainsboro|#DCDCDC|%%(display:block; width: 100px; background:#DCDCDC;) %%
|~GhostWhite|#F8F8FF|%%(display:block; width: 100px; background:#F8F8FF;) %%
|~Gold|#FFD700|%%(display:block; width: 100px; background:#FFD700;) %%
|~GoldenRod|#DAA520|%%(display:block; width: 100px; background:#DAA520;) %%
|~Gray|#808080|%%(display:block; width: 100px; background:#808080;) %%
|~Green|#008000|%%(display:block; width: 100px; background:#008000;) %%
|~GreenYellow|#ADFF2F|%%(display:block; width: 100px; background:#ADFF2F;) %%
|~HoneyDew|#F0FFF0|%%(display:block; width: 100px; background:#F0FFF0;) %%
|~HotPink|#FF69B4|%%(display:block; width: 100px; background:#FF69B4;) %%
|~IndianRed |#CD5C5C|%%(display:block; width: 100px; background:#CD5C5C;) %%
|~Indigo |#4B0082|%%(display:block; width: 100px; background:#4B0082;) %%
|~Ivory|#FFFFF0|%%(display:block; width: 100px; background:#FFFFF0;) %%
|~Khaki|#F0E68C|%%(display:block; width: 100px; background:#F0E68C;) %%
|~Lavender|#E6E6FA|%%(display:block; width: 100px; background:#E6E6FA;) %%
|~LavenderBlush|#FFF0F5|%%(display:block; width: 100px; background:#FFF0F5;) %%
|~LawnGreen|#7CFC00|%%(display:block; width: 100px; background:#7CFC00;) %%
|~LemonChiffon|#FFFACD|%%(display:block; width: 100px; background:#FFFACD;) %%
|~LightBlue|#ADD8E6|%%(display:block; width: 100px; background:#ADD8E6;) %%
|~LightCoral|#F08080|%%(display:block; width: 100px; background:#F08080;) %%
|~LightCyan|#E0FFFF|%%(display:block; width: 100px; background:#E0FFFF;) %%
|~LightGoldenRodYellow|#FAFAD2|%%(display:block; width: 100px; background:#FAFAD2;) %%
|~LightGrey|#D3D3D3|%%(display:block; width: 100px; background:#D3D3D3;) %%
|~LightGreen|#90EE90|%%(display:block; width: 100px; background:#90EE90;) %%
|~LightPink|#FFB6C1|%%(display:block; width: 100px; background:#FFB6C1;) %%
|~LightSalmon|#FFA07A|%%(display:block; width: 100px; background:#FFA07A;) %%
|~LightSeaGreen|#20B2AA|%%(display:block; width: 100px; background:#20B2AA;) %%
|~LightSkyBlue|#87CEFA|%%(display:block; width: 100px; background:#87CEFA;) %%
|~LightSlateBlue|#8470FF|%%(display:block; width: 100px; background:#8470FF;) %%
|~LightSlateGray|#778899|%%(display:block; width: 100px; background:#778899;) %%
|~LightSteelBlue|#B0C4DE|%%(display:block; width: 100px; background:#B0C4DE;) %%
|~LightYellow|#FFFFE0|%%(display:block; width: 100px; background:#FFFFE0;) %%
|~Lime|#00FF00|%%(display:block; width: 100px; background:#00FF00;) %%
|~LimeGreen|#32CD32|%%(display:block; width: 100px; background:#32CD32;) %%
|~Linen|#FAF0E6|%%(display:block; width: 100px; background:#FAF0E6;) %%
|~Magenta|#FF00FF|%%(display:block; width: 100px; background:#FF00FF;) %%
|~Maroon|#800000|%%(display:block; width: 100px; background:#800000;) %%
|~MediumAquaMarine|#66CDAA|%%(display:block; width: 100px; background:#66CDAA;) %%
|~MediumBlue|#0000CD|%%(display:block; width: 100px; background:#0000CD;) %%
|~MediumOrchid|#BA55D3|%%(display:block; width: 100px; background:#BA55D3;) %%
|~MediumPurple|#9370D8|%%(display:block; width: 100px; background:#9370D8;) %%
|~MediumSeaGreen|#3CB371|%%(display:block; width: 100px; background:#3CB371;) %%
|~MediumSlateBlue|#7B68EE|%%(display:block; width: 100px; background:#7B68EE;) %%
|~MediumSpringGreen|#00FA9A|%%(display:block; width: 100px; background:#00FA9A;) %%
|~MediumTurquoise|#48D1CC|%%(display:block; width: 100px; background:#48D1CC;) %%
|~MediumVioletRed|#C71585|%%(display:block; width: 100px; background:#C71585;) %%
|~MidnightBlue|#191970|%%(display:block; width: 100px; background:#191970;) %%
|~MintCream|#F5FFFA|%%(display:block; width: 100px; background:#F5FFFA;) %%
|~MistyRose|#FFE4E1|%%(display:block; width: 100px; background:#FFE4E1;) %%
|~Moccasin|#FFE4B5|%%(display:block; width: 100px; background:#FFE4B5;) %%
|~NavajoWhite|#FFDEAD|%%(display:block; width: 100px; background:#FFDEAD;) %%
|~Navy|#000080|%%(display:block; width: 100px; background:#000080;) %%
|~OldLace|#FDF5E6|%%(display:block; width: 100px; background:#FDF5E6;) %%
|~Olive|#808000|%%(display:block; width: 100px; background:#808000;) %%
|~OliveDrab|#6B8E23|%%(display:block; width: 100px; background:#6B8E23;) %%
|~Orange|#FFA500|%%(display:block; width: 100px; background:#FFA500;) %%
|~OrangeRed|#FF4500|%%(display:block; width: 100px; background:#FF4500;) %%
|~Orchid|#DA70D6|%%(display:block; width: 100px; background:#DA70D6;) %%
|~PaleGoldenRod|#EEE8AA|%%(display:block; width: 100px; background:#EEE8AA;) %%
|~PaleGreen|#98FB98|%%(display:block; width: 100px; background:#98FB98;) %%
|~PaleTurquoise|#AFEEEE|%%(display:block; width: 100px; background:#AFEEEE;) %%
|~PaleVioletRed|#D87093|%%(display:block; width: 100px; background:#D87093;) %%
|~PapayaWhip|#FFEFD5|%%(display:block; width: 100px; background:#FFEFD5;) %%
|~PeachPuff|#FFDAB9|%%(display:block; width: 100px; background:#FFDAB9;) %%
|~Peru|#CD853F|%%(display:block; width: 100px; background:#CD853F;) %%
|~Pink|#FFC0CB|%%(display:block; width: 100px; background:#FFC0CB;) %%
|~Plum|#DDA0DD|%%(display:block; width: 100px; background:#DDA0DD;) %%
|~PowderBlue|#B0E0E6|%%(display:block; width: 100px; background:#B0E0E6;) %%
|~Purple|#800080|%%(display:block; width: 100px; background:#800080;) %%
|~Red|#FF0000|%%(display:block; width: 100px; background:#FF0000;) %%
|~RosyBrown|#BC8F8F|%%(display:block; width: 100px; background:#BC8F8F;) %%
|~RoyalBlue|#4169E1|%%(display:block; width: 100px; background:#4169E1;) %%
|~SaddleBrown|#8B4513|%%(display:block; width: 100px; background:#8B4513;) %%
|~Salmon|#FA8072|%%(display:block; width: 100px; background:#FA8072;) %%
|~SandyBrown|#F4A460|%%(display:block; width: 100px; background:#F4A460;) %%
|~SeaGreen|#2E8B57|%%(display:block; width: 100px; background:#2E8B57;) %%
|~SeaShell|#FFF5EE|%%(display:block; width: 100px; background:#FFF5EE;) %%
|~Sienna|#A0522D|%%(display:block; width: 100px; background:#A0522D;) %%
|~Silver|#C0C0C0|%%(display:block; width: 100px; background:#C0C0C0;) %%
|~SkyBlue|#87CEEB|%%(display:block; width: 100px; background:#87CEEB;) %%
|~SlateBlue|#6A5ACD|%%(display:block; width: 100px; background:#6A5ACD;) %%
|~SlateGray|#708090|%%(display:block; width: 100px; background:#708090;) %%
|~Snow|#FFFAFA|%%(display:block; width: 100px; background:#FFFAFA;) %%
|~SpringGreen|#00FF7F|%%(display:block; width: 100px; background:#00FF7F;) %%
|~SteelBlue|#4682B4|%%(display:block; width: 100px; background:#4682B4;) %%
|~Tan|#D2B48C|%%(display:block; width: 100px; background:#D2B48C;) %%
|~Teal|#008080|%%(display:block; width: 100px; background:#008080;) %%
|~Thistle|#D8BFD8|%%(display:block; width: 100px; background:#D8BFD8;) %%
|~Tomato|#FF6347|%%(display:block; width: 100px; background:#FF6347;) %%
|~Turquoise|#40E0D0|%%(display:block; width: 100px; background:#40E0D0;) %%
|~Violet|#EE82EE|%%(display:block; width: 100px; background:#EE82EE;) %%
|~VioletRed|#D02090|%%(display:block; width: 100px; background:#D02090;) %%
|~Wheat|#F5DEB3|%%(display:block; width: 100px; background:#F5DEB3;) %%
|~White|#FFFFFF|%%(display:block; width: 100px; background:#FFFFFF;) %%
|~WhiteSmoke|#F5F5F5|%%(display:block; width: 100px; background:#F5F5F5;) %%
|~Yellow|#FFFF00|%%(display:block; width: 100px; background:#FFFF00;) %%
|~YellowGreen|#9ACD32|%%(display:block; width: 100px; background:#9ACD32;) %%
%%

Tags:

hex codes html

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.