CSS Colors

All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors)

Color Names Supported by All Browsers

All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):

.colorbox{ padding:5px; } .innerbox{ padding-top:30px; font-size:120%; font-family:"xSegoe UI",Arial,sans-serif; font-weight:bold; } .colorhexspan { font-size:80%; opacity:0.6; } .linktocolormixerdiv { width:100%; margin-top:5px; font-size:80%; text-align:left; padding-left:5px; padding-bottom:5px; opacity:0.7; } .linktocolorpickerdiv { width:100%; margin-top:5px; font-size:80%; text-align:right; padding-right:5px; padding-bottom:5px; opacity:0.7; } .colorlinkcontainer { visibility:hidden; margin-top:9px; background-color:rgba(0,0,0,0.2); } #colornamestable a:link,#colornamestable a:hover,#colornamestable a:visited,#colornamestable a:active { text-decoration:none; color:inherit; opacity:0.8; } #colornamestable a:hover,#colornamestable a:active { opacity:1; } @media screen and (max-width:992px) { .colorlinkcontainer{ visibility:visible; } .colorlinkcontainer{ visibility:visible; } } .petter { visibility:visible; } .petter { visibility:visible; }

var col; var colARR = []; colARR.push(""); colARR.push('AliceBlue');colARR.push('AntiqueWhite');colARR.push('Aqua');colARR.push('Aquamarine');colARR.push('Azure');colARR.push('Beige');colARR.push('Bisque');colARR.push('Black');colARR.push('BlanchedAlmond');colARR.push('Blue');colARR.push('BlueViolet');colARR.push('Brown');colARR.push('BurlyWood');colARR.push('CadetBlue');colARR.push('Chartreuse');colARR.push('Chocolate');colARR.push('Coral');colARR.push('CornflowerBlue');colARR.push('Cornsilk');colARR.push('Crimson');colARR.push('Cyan');colARR.push('DarkBlue');colARR.push('DarkCyan');colARR.push('DarkGoldenRod');colARR.push('DarkGray');colARR.push('DarkGrey');colARR.push('DarkGreen');colARR.push('DarkKhaki');colARR.push('DarkMagenta');colARR.push('DarkOliveGreen');colARR.push('DarkOrange');colARR.push('DarkOrchid');colARR.push('DarkRed');colARR.push('DarkSalmon');colARR.push('DarkSeaGreen');colARR.push('DarkSlateBlue');colARR.push('DarkSlateGray');colARR.push('DarkSlateGrey');colARR.push('DarkTurquoise');colARR.push('DarkViolet');colARR.push('DeepPink');colARR.push('DeepSkyBlue');colARR.push('DimGray');colARR.push('DimGrey');colARR.push('DodgerBlue');colARR.push('FireBrick');colARR.push('FloralWhite');colARR.push('ForestGreen');colARR.push('Fuchsia');colARR.push('Gainsboro');colARR.push('GhostWhite');colARR.push('Gold');colARR.push('GoldenRod');colARR.push('Gray');colARR.push('Grey');colARR.push('Green');colARR.push('GreenYellow');colARR.push('HoneyDew');colARR.push('HotPink');colARR.push('IndianRed ');colARR.push('Indigo ');colARR.push('Ivory');colARR.push('Khaki');colARR.push('Lavender');colARR.push('LavenderBlush');colARR.push('LawnGreen');colARR.push('LemonChiffon');colARR.push('LightBlue');colARR.push('LightCoral');colARR.push('LightCyan');colARR.push('LightGoldenRodYellow');colARR.push('LightGray');colARR.push('LightGrey');colARR.push('LightGreen');colARR.push('LightPink');colARR.push('LightSalmon');colARR.push('LightSeaGreen');colARR.push('LightSkyBlue');colARR.push('LightSlateGray');colARR.push('LightSlateGrey');colARR.push('LightSteelBlue');colARR.push('LightYellow');colARR.push('Lime');colARR.push('LimeGreen');colARR.push('Linen');colARR.push('Magenta');colARR.push('Maroon');colARR.push('MediumAquaMarine');colARR.push('MediumBlue');colARR.push('MediumOrchid');colARR.push('MediumPurple');colARR.push('MediumSeaGreen');colARR.push('MediumSlateBlue');colARR.push('MediumSpringGreen');colARR.push('MediumTurquoise');colARR.push('MediumVioletRed');colARR.push('MidnightBlue');colARR.push('MintCream');colARR.push('MistyRose');colARR.push('Moccasin');colARR.push('NavajoWhite');colARR.push('Navy');colARR.push('OldLace');colARR.push('Olive');colARR.push('OliveDrab');colARR.push('Orange');colARR.push('OrangeRed');colARR.push('Orchid');colARR.push('PaleGoldenRod');colARR.push('PaleGreen');colARR.push('PaleTurquoise');colARR.push('PaleVioletRed');colARR.push('PapayaWhip');colARR.push('PeachPuff');colARR.push('Peru');colARR.push('Pink');colARR.push('Plum');colARR.push('PowderBlue');colARR.push('Purple');colARR.push('RebeccaPurple');colARR.push('Red');colARR.push('RosyBrown');colARR.push('RoyalBlue');colARR.push('SaddleBrown');colARR.push('Salmon');colARR.push('SandyBrown');colARR.push('SeaGreen');colARR.push('SeaShell');colARR.push('Sienna');colARR.push('Silver');colARR.push('SkyBlue');colARR.push('SlateBlue');colARR.push('SlateGray');colARR.push('SlateGrey');colARR.push('Snow');colARR.push('SpringGreen');colARR.push('SteelBlue');colARR.push('Tan');colARR.push('Teal');colARR.push('Thistle');colARR.push('Tomato');colARR.push('Turquoise');colARR.push('Violet');colARR.push('Wheat');colARR.push('White');colARR.push('WhiteSmoke');colARR.push('Yellow');colARR.push('YellowGreen'); console.log("148") for (i = 1; i <= 148; i++) { col = w3color(colARR[i]); document.getElementById("box" + i).style.backgroundColor = col.toRgbString(); if (col.isDark(150)) { document.getElementById("box" + i).style.color = "#ffffff"; } else { document.getElementById("box" + i).style.color = "#1f2d3d"; } } function color_mouseover(elmnt, n) { document.getElementById("linktomixer" + n).className += " petter"; document.getElementById("linktopicker" + n).className += " petter"; document.getElementById("colorlinkcontainer" + n).className += " petter"; // document.getElementById("linktomixer" + n).style.visibility = "visible"; // document.getElementById("linktopicker" + n).style.visibility = "visible"; } function color_mouseout(elmnt, n) { document.getElementById("linktomixer" + n).className = document.getElementById("linktomixer" + n).className.replace(" petter", ""); document.getElementById("linktopicker" + n).className = document.getElementById("linktopicker" + n).className.replace(" petter", ""); document.getElementById("colorlinkcontainer" + n).className = document.getElementById("colorlinkcontainer" + n).className.replace(" petter", ""); // document.getElementById("linktomixer" + n).style.visibility = "hidden"; // document.getElementById("linktopicker" + n).style.visibility = "hidden"; }