{"id":1357,"date":"2025-07-01T08:10:21","date_gmt":"2025-07-01T05:10:21","guid":{"rendered":"https:\/\/eouilplg.elementor.cloud\/?p=1357"},"modified":"2025-07-01T08:10:32","modified_gmt":"2025-07-01T05:10:32","slug":"colors-in-css","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/colors-in-css\/","title":{"rendered":"CSS &amp; HTML Colors: Properties, Codes, Keywords and Names"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1357\" class=\"elementor elementor-1357\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7f10cdf e-flex e-con-boxed e-con e-parent\" data-id=\"7f10cdf\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-24a4cf4 elementor-widget elementor-widget-text-editor\" data-id=\"24a4cf4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>140 Color Names and hex value Supported by All Browsers:<\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f738d1b elementor-widget elementor-widget-html\" data-id=\"f738d1b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<table border=\"1\" style=\"width:100%\">\r\n    <tr>\r\n        <th>Name<\/th>\r\n        <th><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"CSS\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"12309\">CSS<\/a> Value<\/th>\r\n        <th>Live Demo<\/th>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F0F8FF')\">AliceBlue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F0F8FF')\">#F0F8FF<\/a><\/td>\r\n        <td style=\"background-color:#F0F8FF;\" id=\"demo1\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FAEBD7')\">AntiqueWhite<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FAEBD7')\">#FAEBD7<\/a><\/td>\r\n        <td style=\"background-color:#FAEBD7;\" id=\"demo2\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">Aqua<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">#00FFFF<\/a><\/td>\r\n        <td style=\"background-color:#00FFFF;\" id=\"demo3\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#7FFFD4')\">Aquamarine<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#7FFFD4')\">#7FFFD4<\/a><\/td>\r\n        <td style=\"background-color:#7FFFD4;\" id=\"demo4\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFFF')\">Azure<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFFF')\">#F0FFFF<\/a><\/td>\r\n        <td style=\"background-color:#F0FFFF;\" id=\"demo5\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5DC')\">Beige<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5DC')\">#F5F5DC<\/a><\/td>\r\n        <td style=\"background-color:#F5F5DC;\" id=\"demo6\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4C4')\">Bisque<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4C4')\">#FFE4C4<\/a><\/td>\r\n        <td style=\"background-color:#FFE4C4;\" id=\"demo7\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#000000')\">Black<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#000000')\">#000000<\/a><\/td>\r\n        <td style=\"background-color:#000000;\" id=\"demo8\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFEBCD')\">BlanchedAlmond<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFEBCD')\">#FFEBCD<\/a><\/td>\r\n        <td style=\"background-color:#FFEBCD;\" id=\"demo9\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#0000FF')\">Blue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#0000FF')\">#0000FF<\/a><\/td>\r\n        <td style=\"background-color:#0000FF;\" id=\"demo10\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#8A2BE2')\">BlueViolet<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#8A2BE2')\">#8A2BE2<\/a><\/td>\r\n        <td style=\"background-color:#8A2BE2;\" id=\"demo11\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#A52A2A')\">Brown<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#A52A2A')\">#A52A2A<\/a><\/td>\r\n        <td style=\"background-color:#A52A2A;\" id=\"demo12\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#DEB887')\">BurlyWood<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#DEB887')\">#DEB887<\/a><\/td>\r\n        <td style=\"background-color:#DEB887;\" id=\"demo13\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#5F9EA0')\">CadetBlue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#5F9EA0')\">#5F9EA0<\/a><\/td>\r\n        <td style=\"background-color:#5F9EA0;\" id=\"demo14\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#7FFF00')\">Chartreuse<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#7FFF00')\">#7FFF00<\/a><\/td>\r\n        <td style=\"background-color:#7FFF00;\" id=\"demo15\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#D2691E')\">Chocolate<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#D2691E')\">#D2691E<\/a><\/td>\r\n        <td style=\"background-color:#D2691E;\" id=\"demo16\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FF7F50')\">Coral<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FF7F50')\">#FF7F50<\/a><\/td>\r\n        <td style=\"background-color:#FF7F50;\" id=\"demo17\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#6495ED')\">CornflowerBlue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#6495ED')\">#6495ED<\/a><\/td>\r\n        <td style=\"background-color:#6495ED;\" id=\"demo18\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFF8DC')\">Cornsilk<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFF8DC')\">#FFF8DC<\/a><\/td>\r\n        <td style=\"background-color:#FFF8DC;\" id=\"demo19\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#DC143C')\">Crimson<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#DC143C')\">#DC143C<\/a><\/td>\r\n        <td style=\"background-color:#DC143C;\" id=\"demo20\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">Cyan<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">#00FFFF<\/a><\/td>\r\n        <td style=\"background-color:#00FFFF;\" id=\"demo21\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#00008B')\">DarkBlue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#00008B')\">#00008B<\/a><\/td>\r\n        <td style=\"background-color:#00008B;\" id=\"demo22\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#008B8B')\">DarkCyan<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#008B8B')\">#008B8B<\/a><\/td>\r\n        <td style=\"background-color:#008B8B;\" id=\"demo23\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#B8860B')\">DarkGoldenRod<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#B8860B')\">#B8860B<\/a><\/td>\r\n        <td style=\"background-color:#B8860B;\" id=\"demo24\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">DarkGray<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">#A9A9A9<\/a><\/td>\r\n        <td style=\"background-color:#A9A9A9;\" id=\"demo25\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">DarkGrey<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">#A9A9A9<\/a><\/td>\r\n        <td style=\"background-color:#A9A9A9;\" id=\"demo26\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#006400')\">DarkGreen<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#006400')\">#006400<\/a><\/td>\r\n        <td style=\"background-color:#006400;\" id=\"demo27\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#BDB76B')\">DarkKhaki<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#BDB76B')\">#BDB76B<\/a><\/td>\r\n        <td style=\"background-color:#BDB76B;\" id=\"demo28\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#8B008B')\">DarkMagenta<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#8B008B')\">#8B008B<\/a><\/td>\r\n        <td style=\"background-color:#8B008B;\" id=\"demo29\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#556B2F')\">DarkOliveGreen<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#556B2F')\">#556B2F<\/a><\/td>\r\n        <td style=\"background-color:#556B2F;\" id=\"demo30\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FF8C00')\">DarkOrange<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FF8C00')\">#FF8C00<\/a><\/td>\r\n        <td style=\"background-color:#FF8C00;\" id=\"demo31\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#9932CC')\">DarkOrchid<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#9932CC')\">#9932CC<\/a><\/td>\r\n        <td style=\"background-color:#9932CC;\" id=\"demo32\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#8B0000')\">DarkRed<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#8B0000')\">#8B0000<\/a><\/td>\r\n        <td style=\"background-color:#8B0000;\" id=\"demo33\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#E9967A')\">DarkSalmon<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#E9967A')\">#E9967A<\/a><\/td>\r\n        <td style=\"background-color:#E9967A;\" id=\"demo34\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#8FBC8F')\">DarkSeaGreen<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#8FBC8F')\">#8FBC8F<\/a><\/td>\r\n        <td style=\"background-color:#8FBC8F;\" id=\"demo35\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#483D8B')\">DarkSlateBlue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#483D8B')\">#483D8B<\/a><\/td>\r\n        <td style=\"background-color:#483D8B;\" id=\"demo36\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">DarkSlateGray<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">#2F4F4F<\/a><\/td>\r\n        <td style=\"background-color:#2F4F4F;\" id=\"demo37\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">DarkSlateGrey<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">#2F4F4F<\/a><\/td>\r\n        <td style=\"background-color:#2F4F4F;\" id=\"demo38\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#00CED1')\">DarkTurquoise<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#00CED1')\">#00CED1<\/a><\/td>\r\n        <td style=\"background-color:#00CED1;\" id=\"demo39\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#9400D3')\">DarkViolet<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#9400D3')\">#9400D3<\/a><\/td>\r\n        <td style=\"background-color:#9400D3;\" id=\"demo40\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FF1493')\">DeepPink<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FF1493')\">#FF1493<\/a><\/td>\r\n        <td style=\"background-color:#FF1493;\" id=\"demo41\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#00BFFF')\">DeepSkyBlue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#00BFFF')\">#00BFFF<\/a><\/td>\r\n        <td style=\"background-color:#00BFFF;\" id=\"demo42\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">DimGray<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">#696969<\/a><\/td>\r\n        <td style=\"background-color:#696969;\" id=\"demo43\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">DimGrey<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">#696969<\/a><\/td>\r\n        <td style=\"background-color:#696969;\" id=\"demo44\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#1E90FF')\">DodgerBlue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#1E90FF')\">#1E90FF<\/a><\/td>\r\n        <td style=\"background-color:#1E90FF;\" id=\"demo45\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#B22222')\">FireBrick<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#B22222')\">#B22222<\/a><\/td>\r\n        <td style=\"background-color:#B22222;\" id=\"demo46\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAF0')\">FloralWhite<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAF0')\">#FFFAF0<\/a><\/td>\r\n        <td style=\"background-color:#FFFAF0;\" id=\"demo47\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#228B22')\">ForestGreen<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#228B22')\">#228B22<\/a><\/td>\r\n        <td style=\"background-color:#228B22;\" id=\"demo48\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">Fuchsia<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">#FF00FF<\/a><\/td>\r\n        <td style=\"background-color:#FF00FF;\" id=\"demo49\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#DCDCDC')\">Gainsboro<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#DCDCDC')\">#DCDCDC<\/a><\/td>\r\n        <td style=\"background-color:#DCDCDC;\" id=\"demo50\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F8F8FF')\">GhostWhite<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F8F8FF')\">#F8F8FF<\/a><\/td>\r\n        <td style=\"background-color:#F8F8FF;\" id=\"demo51\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFD700')\">Gold<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFD700')\">#FFD700<\/a><\/td>\r\n        <td style=\"background-color:#FFD700;\" id=\"demo52\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#DAA520')\">GoldenRod<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#DAA520')\">#DAA520<\/a><\/td>\r\n        <td style=\"background-color:#DAA520;\" id=\"demo53\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">Gray<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">#808080<\/a><\/td>\r\n        <td style=\"background-color:#808080;\" id=\"demo54\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">Grey<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">#808080<\/a><\/td>\r\n        <td style=\"background-color:#808080;\" id=\"demo55\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#008000')\">Green<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#008000')\">#008000<\/a><\/td>\r\n        <td style=\"background-color:#008000;\" id=\"demo56\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#ADFF2F')\">GreenYellow<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#ADFF2F')\">#ADFF2F<\/a><\/td>\r\n        <td style=\"background-color:#ADFF2F;\" id=\"demo57\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFF0')\">HoneyDew<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFF0')\">#F0FFF0<\/a><\/td>\r\n        <td style=\"background-color:#F0FFF0;\" id=\"demo58\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FF69B4')\">HotPink<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FF69B4')\">#FF69B4<\/a><\/td>\r\n        <td style=\"background-color:#FF69B4;\" id=\"demo59\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#CD5C5C')\">IndianRed<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#CD5C5C')\">#CD5C5C<\/a><\/td>\r\n        <td style=\"background-color:#CD5C5C;\" id=\"demo60\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#4B0082')\">Indigo<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#4B0082')\">#4B0082<\/a><\/td>\r\n        <td style=\"background-color:#4B0082;\" id=\"demo61\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFF0')\">Ivory<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFF0')\">#FFFFF0<\/a><\/td>\r\n        <td style=\"background-color:#FFFFF0;\" id=\"demo62\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F0E68C')\">Khaki<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F0E68C')\">#F0E68C<\/a><\/td>\r\n        <td style=\"background-color:#F0E68C;\" id=\"demo63\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#E6E6FA')\">Lavender<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#E6E6FA')\">#E6E6FA<\/a><\/td>\r\n        <td style=\"background-color:#E6E6FA;\" id=\"demo64\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFF0F5')\">LavenderBlush<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFF0F5')\">#FFF0F5<\/a><\/td>\r\n        <td style=\"background-color:#FFF0F5;\" id=\"demo65\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#7CFC00')\">LawnGreen<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#7CFC00')\">#7CFC00<\/a><\/td>\r\n        <td style=\"background-color:#7CFC00;\" id=\"demo66\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFFACD')\">LemonChiffon<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFFACD')\">#FFFACD<\/a><\/td>\r\n        <td style=\"background-color:#FFFACD;\" id=\"demo67\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#ADD8E6')\">LightBlue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#ADD8E6')\">#ADD8E6<\/a><\/td>\r\n        <td style=\"background-color:#ADD8E6;\" id=\"demo68\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F08080')\">LightCoral<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F08080')\">#F08080<\/a><\/td>\r\n        <td style=\"background-color:#F08080;\" id=\"demo69\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#E0FFFF')\">LightCyan<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#E0FFFF')\">#E0FFFF<\/a><\/td>\r\n        <td style=\"background-color:#E0FFFF;\" id=\"demo70\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FAFAD2')\">LightGoldenRodYellow<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FAFAD2')\">#FAFAD2<\/a><\/td>\r\n        <td style=\"background-color:#FAFAD2;\" id=\"demo71\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">LightGray<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">#D3D3D3<\/a><\/td>\r\n        <td style=\"background-color:#D3D3D3;\" id=\"demo72\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">LightGrey<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">#D3D3D3<\/a><\/td>\r\n        <td style=\"background-color:#D3D3D3;\" id=\"demo73\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#90EE90')\">LightGreen<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#90EE90')\">#90EE90<\/a><\/td>\r\n        <td style=\"background-color:#90EE90;\" id=\"demo74\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFB6C1')\">LightPink<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFB6C1')\">#FFB6C1<\/a><\/td>\r\n        <td style=\"background-color:#FFB6C1;\" id=\"demo75\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFA07A')\">LightSalmon<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFA07A')\">#FFA07A<\/a><\/td>\r\n        <td style=\"background-color:#FFA07A;\" id=\"demo76\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#20B2AA')\">LightSeaGreen<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#20B2AA')\">#20B2AA<\/a><\/td>\r\n        <td style=\"background-color:#20B2AA;\" id=\"demo77\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#87CEFA')\">LightSkyBlue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#87CEFA')\">#87CEFA<\/a><\/td>\r\n        <td style=\"background-color:#87CEFA;\" id=\"demo78\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">LightSlateGray<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">#778899<\/a><\/td>\r\n        <td style=\"background-color:#778899;\" id=\"demo79\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">LightSlateGrey<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">#778899<\/a><\/td>\r\n        <td style=\"background-color:#778899;\" id=\"demo80\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#B0C4DE')\">LightSteelBlue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#B0C4DE')\">#B0C4DE<\/a><\/td>\r\n        <td style=\"background-color:#B0C4DE;\" id=\"demo81\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFE0')\">LightYellow<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFE0')\">#FFFFE0<\/a><\/td>\r\n        <td style=\"background-color:#FFFFE0;\" id=\"demo82\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#00FF00')\">Lime<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#00FF00')\">#00FF00<\/a><\/td>\r\n        <td style=\"background-color:#00FF00;\" id=\"demo83\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#32CD32')\">LimeGreen<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#32CD32')\">#32CD32<\/a><\/td>\r\n        <td style=\"background-color:#32CD32;\" id=\"demo84\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FAF0E6')\">Linen<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FAF0E6')\">#FAF0E6<\/a><\/td>\r\n        <td style=\"background-color:#FAF0E6;\" id=\"demo85\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">Magenta<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">#FF00FF<\/a><\/td>\r\n        <td style=\"background-color:#FF00FF;\" id=\"demo86\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#800000')\">Maroon<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#800000')\">#800000<\/a><\/td>\r\n        <td style=\"background-color:#800000;\" id=\"demo87\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#66CDAA')\">MediumAquaMarine<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#66CDAA')\">#66CDAA<\/a><\/td>\r\n        <td style=\"background-color:#66CDAA;\" id=\"demo88\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#0000CD')\">MediumBlue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#0000CD')\">#0000CD<\/a><\/td>\r\n        <td style=\"background-color:#0000CD;\" id=\"demo89\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#BA55D3')\">MediumOrchid<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#BA55D3')\">#BA55D3<\/a><\/td>\r\n        <td style=\"background-color:#BA55D3;\" id=\"demo90\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#9370DB')\">MediumPurple<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#9370DB')\">#9370DB<\/a><\/td>\r\n        <td style=\"background-color:#9370DB;\" id=\"demo91\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#3CB371')\">MediumSeaGreen<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#3CB371')\">#3CB371<\/a><\/td>\r\n        <td style=\"background-color:#3CB371;\" id=\"demo92\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#7B68EE')\">MediumSlateBlue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#7B68EE')\">#7B68EE<\/a><\/td>\r\n        <td style=\"background-color:#7B68EE;\" id=\"demo93\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#00FA9A')\">MediumSpringGreen<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#00FA9A')\">#00FA9A<\/a><\/td>\r\n        <td style=\"background-color:#00FA9A;\" id=\"demo94\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#48D1CC')\">MediumTurquoise<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#48D1CC')\">#48D1CC<\/a><\/td>\r\n        <td style=\"background-color:#48D1CC;\" id=\"demo95\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#C71585')\">MediumVioletRed<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#C71585')\">#C71585<\/a><\/td>\r\n        <td style=\"background-color:#C71585;\" id=\"demo96\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#191970')\">MidnightBlue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#191970')\">#191970<\/a><\/td>\r\n        <td style=\"background-color:#191970;\" id=\"demo97\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F5FFFA')\">MintCream<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F5FFFA')\">#F5FFFA<\/a><\/td>\r\n        <td style=\"background-color:#F5FFFA;\" id=\"demo98\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4E1')\">MistyRose<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4E1')\">#FFE4E1<\/a><\/td>\r\n        <td style=\"background-color:#FFE4E1;\" id=\"demo99\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4B5')\">Moccasin<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4B5')\">#FFE4B5<\/a><\/td>\r\n        <td style=\"background-color:#FFE4B5;\" id=\"demo100\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFDEAD')\">NavajoWhite<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFDEAD')\">#FFDEAD<\/a><\/td>\r\n        <td style=\"background-color:#FFDEAD;\" id=\"demo101\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#000080')\">Navy<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#000080')\">#000080<\/a><\/td>\r\n        <td style=\"background-color:#000080;\" id=\"demo102\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FDF5E6')\">OldLace<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FDF5E6')\">#FDF5E6<\/a><\/td>\r\n        <td style=\"background-color:#FDF5E6;\" id=\"demo103\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#808000')\">Olive<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#808000')\">#808000<\/a><\/td>\r\n        <td style=\"background-color:#808000;\" id=\"demo104\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#6B8E23')\">OliveDrab<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#6B8E23')\">#6B8E23<\/a><\/td>\r\n        <td style=\"background-color:#6B8E23;\" id=\"demo105\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFA500')\">Orange<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFA500')\">#FFA500<\/a><\/td>\r\n        <td style=\"background-color:#FFA500;\" id=\"demo106\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FF4500')\">OrangeRed<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FF4500')\">#FF4500<\/a><\/td>\r\n        <td style=\"background-color:#FF4500;\" id=\"demo107\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#DA70D6')\">Orchid<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#DA70D6')\">#DA70D6<\/a><\/td>\r\n        <td style=\"background-color:#DA70D6;\" id=\"demo108\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#EEE8AA')\">PaleGoldenRod<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#EEE8AA')\">#EEE8AA<\/a><\/td>\r\n        <td style=\"background-color:#EEE8AA;\" id=\"demo109\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#98FB98')\">PaleGreen<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#98FB98')\">#98FB98<\/a><\/td>\r\n        <td style=\"background-color:#98FB98;\" id=\"demo110\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#AFEEEE')\">PaleTurquoise<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#AFEEEE')\">#AFEEEE<\/a><\/td>\r\n        <td style=\"background-color:#AFEEEE;\" id=\"demo111\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#DB7093')\">PaleVioletRed<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#DB7093')\">#DB7093<\/a><\/td>\r\n        <td style=\"background-color:#DB7093;\" id=\"demo112\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFEFD5')\">PapayaWhip<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFEFD5')\">#FFEFD5<\/a><\/td>\r\n        <td style=\"background-color:#FFEFD5;\" id=\"demo113\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFDAB9')\">PeachPuff<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFDAB9')\">#FFDAB9<\/a><\/td>\r\n        <td style=\"background-color:#FFDAB9;\" id=\"demo114\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#CD853F')\">Peru<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#CD853F')\">#CD853F<\/a><\/td>\r\n        <td style=\"background-color:#CD853F;\" id=\"demo115\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFC0CB')\">Pink<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFC0CB')\">#FFC0CB<\/a><\/td>\r\n        <td style=\"background-color:#FFC0CB;\" id=\"demo116\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#DDA0DD')\">Plum<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#DDA0DD')\">#DDA0DD<\/a><\/td>\r\n        <td style=\"background-color:#DDA0DD;\" id=\"demo117\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#B0E0E6')\">PowderBlue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#B0E0E6')\">#B0E0E6<\/a><\/td>\r\n        <td style=\"background-color:#B0E0E6;\" id=\"demo118\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#800080')\">Purple<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#800080')\">#800080<\/a><\/td>\r\n        <td style=\"background-color:#800080;\" id=\"demo119\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#663399')\">RebeccaPurple<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#663399')\">#663399<\/a><\/td>\r\n        <td style=\"background-color:#663399;\" id=\"demo120\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FF0000')\">Red<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FF0000')\">#FF0000<\/a><\/td>\r\n        <td style=\"background-color:#FF0000;\" id=\"demo121\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#BC8F8F')\">RosyBrown<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#BC8F8F')\">#BC8F8F<\/a><\/td>\r\n        <td style=\"background-color:#BC8F8F;\" id=\"demo122\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#4169E1')\">RoyalBlue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#4169E1')\">#4169E1<\/a><\/td>\r\n        <td style=\"background-color:#4169E1;\" id=\"demo123\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#8B4513')\">SaddleBrown<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#8B4513')\">#8B4513<\/a><\/td>\r\n        <td style=\"background-color:#8B4513;\" id=\"demo124\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FA8072')\">Salmon<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FA8072')\">#FA8072<\/a><\/td>\r\n        <td style=\"background-color:#FA8072;\" id=\"demo125\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F4A460')\">SandyBrown<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F4A460')\">#F4A460<\/a><\/td>\r\n        <td style=\"background-color:#F4A460;\" id=\"demo126\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#2E8B57')\">SeaGreen<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#2E8B57')\">#2E8B57<\/a><\/td>\r\n        <td style=\"background-color:#2E8B57;\" id=\"demo127\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFF5EE')\">SeaShell<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFF5EE')\">#FFF5EE<\/a><\/td>\r\n        <td style=\"background-color:#FFF5EE;\" id=\"demo128\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#A0522D')\">Sienna<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#A0522D')\">#A0522D<\/a><\/td>\r\n        <td style=\"background-color:#A0522D;\" id=\"demo129\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#C0C0C0')\">Silver<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#C0C0C0')\">#C0C0C0<\/a><\/td>\r\n        <td style=\"background-color:#C0C0C0;\" id=\"demo130\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#87CEEB')\">SkyBlue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#87CEEB')\">#87CEEB<\/a><\/td>\r\n        <td style=\"background-color:#87CEEB;\" id=\"demo131\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#6A5ACD')\">SlateBlue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#6A5ACD')\">#6A5ACD<\/a><\/td>\r\n        <td style=\"background-color:#6A5ACD;\" id=\"demo132\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">SlateGray<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">#708090<\/a><\/td>\r\n        <td style=\"background-color:#708090;\" id=\"demo133\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">SlateGrey<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">#708090<\/a><\/td>\r\n        <td style=\"background-color:#708090;\" id=\"demo134\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAFA')\">Snow<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAFA')\">#FFFAFA<\/a><\/td>\r\n        <td style=\"background-color:#FFFAFA;\" id=\"demo135\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#00FF7F')\">SpringGreen<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#00FF7F')\">#00FF7F<\/a><\/td>\r\n        <td style=\"background-color:#00FF7F;\" id=\"demo136\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#4682B4')\">SteelBlue<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#4682B4')\">#4682B4<\/a><\/td>\r\n        <td style=\"background-color:#4682B4;\" id=\"demo137\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#D2B48C')\">Tan<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#D2B48C')\">#D2B48C<\/a><\/td>\r\n        <td style=\"background-color:#D2B48C;\" id=\"demo138\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#008080')\">Teal<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#008080')\">#008080<\/a><\/td>\r\n        <td style=\"background-color:#008080;\" id=\"demo139\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#D8BFD8')\">Thistle<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#D8BFD8')\">#D8BFD8<\/a><\/td>\r\n        <td style=\"background-color:#D8BFD8;\" id=\"demo140\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FF6347')\">Tomato<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FF6347')\">#FF6347<\/a><\/td>\r\n        <td style=\"background-color:#FF6347;\" id=\"demo141\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#40E0D0')\">Turquoise<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#40E0D0')\">#40E0D0<\/a><\/td>\r\n        <td style=\"background-color:#40E0D0;\" id=\"demo142\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#EE82EE')\">Violet<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#EE82EE')\">#EE82EE<\/a><\/td>\r\n        <td style=\"background-color:#EE82EE;\" id=\"demo143\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F5DEB3')\">Wheat<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F5DEB3')\">#F5DEB3<\/a><\/td>\r\n        <td style=\"background-color:#F5DEB3;\" id=\"demo144\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFFF')\">White<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFFF')\">#FFFFFF<\/a><\/td>\r\n        <td style=\"background-color:#FFFFFF;\" id=\"demo145\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5F5')\">WhiteSmoke<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5F5')\">#F5F5F5<\/a><\/td>\r\n        <td style=\"background-color:#F5F5F5;\" id=\"demo146\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFFF00')\">Yellow<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#FFFF00')\">#FFFF00<\/a><\/td>\r\n        <td style=\"background-color:#FFFF00;\" id=\"demo147\"><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td><a href=\"#\" onclick=\"changeColor('#9ACD32')\">YellowGreen<\/a><\/td>\r\n        <td><a href=\"#\" onclick=\"changeColor('#9ACD32')\">#9ACD32<\/a><\/td>\r\n        <td style=\"background-color:#9ACD32;\" id=\"demo148\"><\/td>\r\n    <\/tr>\r\n<\/table>\r\n\r\n<script>\r\nfunction changeColor(color) {\r\n    var demoCells = document.querySelectorAll('td[id^=\"demo\"]');\r\n    demoCells.forEach(function(cell) {\r\n        cell.style.backgroundColor = color;\r\n    });\r\n}\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-412d331 elementor-widget elementor-widget-text-editor\" data-id=\"412d331\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><span style=\"font-weight: 400;\">Understanding Color Formats in CSS<\/span><\/h2><h3><span style=\"font-weight: 400;\">Basic Color Keywords\u00a0<\/span><\/h3><p><span style=\"font-weight: 400;\">The easiest way to start experimenting with colors in CSS is by using basic keywords. These are common color names like &#8220;red,&#8221; &#8220;blue,&#8221; &#8220;green,&#8221; &#8220;yellow,&#8221; and many more. There are over 140 recognized color keywords, offering a decent starting point for simple color choices.<\/span><\/p><h4><span style=\"font-weight: 400;\">Example<\/span><\/h4>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-50b08db elementor-widget elementor-widget-code-highlight\" data-id=\"50b08db\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<p style=\"color: orange;\">This paragraph will have orange text.<\/p>\r\n<div style=\"background-color: purple;\">This div will have a purple background. <\/div>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3980fbe elementor-widget elementor-widget-text-editor\" data-id=\"3980fbe\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Extended Color Keywords\u00a0<\/span><\/h3><p><span style=\"font-weight: 400;\">Want a more nuanced color palette? CSS expands its vocabulary with extended color keywords. These offer more specific shades like &#8220;teal,&#8221; &#8220;coral,&#8221; &#8220;lavender,&#8221; and &#8220;azure.&#8221; Imagine these as the more &#8216;sophisticated&#8217; cousins of the basic color keywords.<\/span><\/p><h4><span style=\"font-weight: 400;\">Example<\/span><\/h4>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0913c25 elementor-widget elementor-widget-code-highlight\" data-id=\"0913c25\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<h1 style=\"color: aquamarine;\">This heading will have an aquamarine color.<\/h1>\r\n<button style=\"background-color: fuchsia;\">This button will have a fuchsia background.<\/button>  \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-22e0896 elementor-widget elementor-widget-text-editor\" data-id=\"22e0896\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Tip:<\/b><span style=\"font-weight: 400;\"> A full list of extended color keywords can be found on numerous resources. These often provide a surprisingly wide range of choices for most design needs.<\/span><\/p><h3><span style=\"font-weight: 400;\">Hexadecimal Color Codes<\/span><\/h3><p><span style=\"font-weight: 400;\">Hexadecimal color codes open up a vast spectrum of color possibilities. They use a six-digit code preceded by a hash symbol (#) and represent the amount of red, green, and blue (RGB) in the color. Each pair of digits controls the intensity of one of these primary colors, ranging from 00 (no color) to FF (full intensity).<\/span><\/p><h4><span style=\"font-weight: 400;\">Examples<\/span><\/h4><ol><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">#FF0000 = Pure Red<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">#008000 = Pure Green<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">#0000FF = Pure Blue<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">#FFFFFF = White<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">#000000 = Black<\/span><\/li><\/ol><p><span style=\"font-weight: 400;\">Hexadecimal codes allow for over 16 million color combinations! They are the most common way to specify colors in <a href=\"https:\/\/elementor.com\/blog\/best-portfolio-website-builders\/\"  data-wpil-monitor-id=\"10365\">web design<\/a> due to their precision.<\/span><\/p><p><b>Shortened Hex Codes:<\/b><span style=\"font-weight: 400;\"> For convenience, you can use a three-digit shortened version of hex codes where each digit is doubled (e.g., #FF0033 can be shortened to #F03).<\/span><\/p><p><b>Tip:<\/b><span style=\"font-weight: 400;\"> <a href=\"https:\/\/elementor.com\/blog\/px-to-inches\/\"  data-wpil-monitor-id=\"10366\">Online color pickers and converters<\/a> make it easy to find the perfect hex code or convert between different color formats. Experiment and explore those resources!<\/span><\/p><h3><span style=\"font-weight: 400;\">RGB and RGBA Colors<\/span><\/h3><p><span style=\"font-weight: 400;\">RGB and RGBA provide a numerical way of defining colors based on their red, green, and blue components.<\/span><\/p><h3><span style=\"font-weight: 400;\">RGB Format<\/span><\/h3><p><span style=\"font-weight: 400;\">It uses the <\/span><span style=\"font-weight: 400;\">rgb()<\/span><span style=\"font-weight: 400;\"> function. Each color value ranges from 0 to 255, representing its intensity.<\/span><\/p><h4><span style=\"font-weight: 400;\">Example<\/span><\/h4>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-022a309 elementor-widget elementor-widget-code-highlight\" data-id=\"022a309\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody {\r\n   background-color: rgb(255, 128, 0); \/* A bright orange color *\/\r\n}\r\nRGBA Format\r\nThis function adds a fourth value (alpha) to the rgba() function controlling opacity (transparency). The alpha value ranges from 0.0 (fully transparent) to 1.0 (fully opaque).\r\nExample\r\nCSS\r\np {\r\n   color: rgba(0, 0, 0, 0.7); \/* Black text with 70% opacity *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c5922bc elementor-widget elementor-widget-text-editor\" data-id=\"c5922bc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Why RGBA? <\/b><span style=\"font-weight: 400;\">RGBA empowers you to create semi-transparent colors, overlays, fading effects, and sophisticated designs that play with layers. It&#8217;s an essential tool for modern <a href=\"https:\/\/elementor.com\/blog\/handwriting-fonts\/\"  data-wpil-monitor-id=\"10367\">web designers<\/a>.<\/span><\/p><p><span style=\"font-weight: 400;\">Both RGB and RGBA support the use of percentages instead of numeric values (e.g. <\/span><span style=\"font-weight: 400;\">rgb(100%, 50%, 0%)<\/span><span style=\"font-weight: 400;\">). However, the numeric format is generally preferred in professional settings due to greater precision.<\/span><\/p><h3><span style=\"font-weight: 400;\">HSL and HSLA Colors\u00a0<\/span><\/h3><p><span style=\"font-weight: 400;\">HSL stands for Hue, Saturation, and Lightness. It&#8217;s a color model that offers a way to express color more aligned with how we intuitively perceive them:<\/span><\/p><h4><span style=\"font-weight: 400;\">Hue<\/span><\/h4><p><span style=\"font-weight: 400;\">The actual color on the color wheel is represented as a degree from 0 to 360:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">0\/360 = Red<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">120 = Green<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">240 = Blue<\/span><\/li><\/ul><h4><span style=\"font-weight: 400;\">Saturation<\/span><\/h4><p><span style=\"font-weight: 400;\">The intensity or vibrancy of the color is expressed as a percentage. 0% is grayscale, while 100% is full saturation.<\/span><\/p><h4><span style=\"font-weight: 400;\">Lightness<\/span><\/h4><p><span style=\"font-weight: 400;\">How light or dark the color is also expressed as a percentage. 0% is black, 50% is the true hue, and 100% is white.<\/span><\/p><p><b>HSLA<\/b><span style=\"font-weight: 400;\"> adds the alpha channel for transparency, just like RGBA.<\/span><\/p><h4><span style=\"font-weight: 400;\">Example<\/span><\/h4>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-973c303 elementor-widget elementor-widget-code-highlight\" data-id=\"973c303\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh1 {\r\n  color: hsl(240, 100%, 50%); \/* A pure blue color *\/\r\n}\r\np {\r\n    background-color: hsla(0, 100%, 50%, 0.8); \/* A semi-transparent red *\/ \r\n} \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-386ee74 elementor-widget elementor-widget-text-editor\" data-id=\"386ee74\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5><b>Why HSL\/HSLA?<\/b><span style=\"font-weight: 400;\">\u00a0<\/span><\/h5><p><span style=\"font-weight: 400;\">HSL\/HSLA is often preferred by designers because it allows you to think about color components independently. Want a slightly lighter shade of the color you&#8217;re using? Simply adjust the lightness value. Need a less saturated version? Lower the saturation. It offers a natural way to manipulate colors.<\/span><\/p><h2><span style=\"font-weight: 400;\">Color Manipulation in CSS<\/span><\/h2><h3><span style=\"font-weight: 400;\">Color Functions\u00a0<\/span><\/h3><p><span style=\"font-weight: 400;\">CSS provides built-in functions that allow you to modify existing colors directly within your stylesheets. This dynamic approach gives you incredible flexibility. Let&#8217;s look at some key functions:<\/span><\/p><p><b>lighten() and darken():<\/b><span style=\"font-weight: 400;\"> These functions take a color and a percentage. They adjust the lightness of the original color, making it lighter or darker, respectively.<\/span><\/p><h4><span style=\"font-weight: 400;\">Example<\/span><\/h4>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a2633e1 elementor-widget elementor-widget-code-highlight\" data-id=\"a2633e1\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np {\r\n  color: blue; \r\n}\r\np.highlight {\r\n  color: lighten(blue, 20%); \/* Creates a lighter blue for the highlighted text *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca09db5 elementor-widget elementor-widget-text-editor\" data-id=\"ca09db5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>saturate() and desaturate()<\/b><span style=\"font-weight: 400;\"> Similar to lighten and darken, these functions adjust the saturation (intensity) of a color by a percentage.<\/span><\/p><h4><span style=\"font-weight: 400;\">Example<\/span><\/h4>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aee6adb elementor-widget elementor-widget-code-highlight\" data-id=\"aee6adb\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbutton {\r\n  background-color: hsl(30, 80%, 60%); \/* An orange button *\/\r\n}\r\nbutton:hover { \r\n  background-color: desaturate(hsl(30, 80%, 60%), 30%); \/* A less saturated orange on hover *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e95f4a0 elementor-widget elementor-widget-text-editor\" data-id=\"e95f4a0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5><b>Benefits of Color Functions:<\/b><span style=\"font-weight: 400;\">\u00a0<\/span><\/h5><p><span style=\"font-weight: 400;\">These functions streamline adjustments, making it easy to create variations of a base color to maintain a consistent <a href=\"https:\/\/elementor.com\/blog\/complementary-color-schemes\/\"  data-wpil-monitor-id=\"10368\">color scheme throughout your designs<\/a>.<\/span><\/p><h3><span style=\"font-weight: 400;\">Relative Colors\u00a0<\/span><\/h3><p><span style=\"font-weight: 400;\">CSS relative colors provide remarkable customization power. They allow you to define colors <\/span><i><span style=\"font-weight: 400;\">based on an existing color<\/span><\/i><span style=\"font-weight: 400;\">. This is incredibly useful when creating a consistent color palette or variations across elements.<\/span><\/p><p><b>How it works?<\/b><span style=\"font-weight: 400;\"> You use the <\/span><span style=\"font-weight: 400;\">from<\/span><span style=\"font-weight: 400;\"> keyword followed by a base color. Then, you use variables like r, g, b, and <\/span><span style=\"font-weight: 400;\">a<\/span><span style=\"font-weight: 400;\"> (representing red, green, blue, and alpha) to modify parts of that base color.<\/span><\/p><h4><span style=\"font-weight: 400;\">Example<\/span><\/h4>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f725f58 elementor-widget elementor-widget-code-highlight\" data-id=\"f725f58\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.section-title {\r\n  color: blue;\r\n}\r\n.section-title-highlight {\r\n  color: from blue lighten(r, 20%) saturate(g, 50%); \r\n  \/* A color derived from blue, with lighter red and more saturated green components *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2e21277 elementor-widget elementor-widget-text-editor\" data-id=\"2e21277\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Relative colors are particularly helpful when you need to maintain color relationships, even if a base color changes within your <a href=\"https:\/\/elementor.com\/blog\/career-in-web-design\/\"  data-wpil-monitor-id=\"10369\">web design<\/a>.<\/span><\/p><p><b>Note:<\/b><span style=\"font-weight: 400;\"> Relative colors are a fairly recent addition to CSS, so while browser support is increasing, it&#8217;s good practice to check compatibility before using them.<\/span><\/p><h3><span style=\"font-weight: 400;\">CSS3 Color Manipulation Updates<\/span><\/h3><p><span style=\"font-weight: 400;\">While we&#8217;ve covered the core color manipulation methods, it&#8217;s worth noting that CSS3 introduced several new and exciting ways to work with colors:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>HWB:<\/b><span style=\"font-weight: 400;\"> This color model stands for Hue, Whiteness, and Blackness. It offers another way to describe colors in a human-intuitive way, which is sometimes preferred when working with color variations.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Lab and LCH:<\/b><span style=\"font-weight: 400;\"> These color spaces are designed to represent human color perception better, offering more precision in certain contexts.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Color-mix () function: <\/b><span style=\"font-weight: 400;\">This function allows you to blend colors in various ways directly within CSS, similar to blend modes in image editors.<\/span><\/li><\/ul><p><span style=\"font-weight: 400;\">While these newer features offer additional flexibility, browser support may vary. Always check compatibility if you plan to incorporate them into your projects.<\/span><\/p><h3><span style=\"font-weight: 400;\">Color Contrast and Accessibility<\/span><\/h3><p><span style=\"font-weight: 400;\">Color choices directly impact the accessibility of your website for users with visual impairments. Sufficient contrast between text and background is essential for readability.<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>WCAG Guidelines:<\/b><span style=\"font-weight: 400;\"> The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for different text sizes and styles to ensure content is legible.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Contrast Checking Tools:<\/b><span style=\"font-weight: 400;\"> Numerous online tools help you check contrast ratios.\u00a0<\/span><\/li><\/ul><p><span style=\"font-weight: 400;\">It&#8217;s worth noting that <a href=\"https:\/\/elementor.com\/blog\/explore-elementor-pro-display-conditions\/\"  data-wpil-monitor-id=\"10370\">Elementor includes built-in tools and features<\/a> that make accessibility easier to consider in your design process. This subtle mention aligns with our overall strategy of seamlessly weaving Elementor into the narrative.<\/span><\/p><p><b>Remember &#8211;<\/b><span style=\"font-weight: 400;\"> <a href=\"https:\/\/elementor.com\/blog\/web-safe-fonts\/\"  data-wpil-monitor-id=\"10388\">Accessible design<\/a> is not just good practice; it expands your website&#8217;s reach and inclusivity.<\/span><\/p><h2><span style=\"font-weight: 400;\">Color Theory for Web Designers<\/span><\/h2><h3><span style=\"font-weight: 400;\">The Color Wheel\u00a0<\/span><\/h3><p><span style=\"font-weight: 400;\">The foundation of <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/color-theory-web-design\/\"   title=\"color theory\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"12306\">color theory<\/a> lies in the color wheel. This circular diagram arranges colors based on their relationships to each other. Here&#8217;s a breakdown of its essential components:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Primary Colors:<\/b><span style=\"font-weight: 400;\"> Red, yellow, and blue. These are the <a href=\"https:\/\/elementor.com\/blog\/best-web-analytics-tools\/\"  data-wpil-monitor-id=\"10389\">building<\/a> blocks of all other colors.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Secondary Colors:<\/b><span style=\"font-weight: 400;\"> Orange, green, and purple. It was created by mixing two primary colors.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tertiary Colors <\/b><span style=\"font-weight: 400;\">are colors formed by mixing a primary and a secondary color (e.g., yellow-orange, red-violet).<\/span><\/li><\/ul><p><b>Understanding the Color Wheel:<\/b><span style=\"font-weight: 400;\"> The color wheel is a powerful visualization tool for understanding how colors interact and for crafting intentional color combinations.<\/span><\/p><h3><span style=\"font-weight: 400;\">Color Schemes\u00a0<\/span><\/h3><p><span style=\"font-weight: 400;\">The color wheel provides a framework for creating harmonious color palettes. Here are some widely used schemes:<\/span><\/p><h4><span style=\"font-weight: 400;\">Complementary<\/span><\/h4><p><span style=\"font-weight: 400;\">Colors directly opposite each other on the color wheel (e.g., red and green, blue and orange). These create high contrast and vibrancy.<\/span><\/p><h4><span style=\"font-weight: 400;\">Analogous<\/span><\/h4><p><span style=\"font-weight: 400;\">Colors are located next to each other on the color wheel (e.g., red, red-orange, and orange). They offer a harmonious and often relaxing feel.<\/span><\/p><h4><span style=\"font-weight: 400;\">Triadic<\/span><\/h4><p><span style=\"font-weight: 400;\">Three colors are evenly spaced around the color wheel (e.g., red, yellow, and blue). These schemes are <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/text-bold\/\"   title=\"bold\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"12307\">bold<\/a> and dynamic.<\/span><\/p><h4><span style=\"font-weight: 400;\">Split-Complementary<\/span><\/h4><p><span style=\"font-weight: 400;\">A variation of complementary colors in which you use the two colors adjacent to the direct opposite of your base color creates a balance of contrast and harmony.<\/span><\/p><h4><span style=\"font-weight: 400;\">Tetradic (or Double Complementary)<\/span><\/h4><p><span style=\"font-weight: 400;\">It uses two sets of complementary colors, often forming a rectangle on the color wheel. This offers a wide range of color combinations with great versatility.<\/span><\/p><h4><span style=\"font-weight: 400;\">Monochromatic<\/span><\/h4><p><span style=\"font-weight: 400;\">Variations of a single hue using different lightness and saturation values (e.g., light blue, medium blue, and dark blue). Monochromatic schemes evoke a sense of unity and elegance.<\/span><\/p><h4><span style=\"font-weight: 400;\">Tips<\/span><\/h4><ol><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Online Tools:<\/b><span style=\"font-weight: 400;\"> <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/website-color-schemes\/\"   title=\"Color scheme\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"12310\">Color scheme<\/a> generators can be fantastic resources for experimentation and finding the perfect combination.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Balance:<\/b><span style=\"font-weight: 400;\"> While bold combinations can be striking, it&#8217;s important to strike a balance between vibrancy and visual coherence in your <a href=\"https:\/\/elementor.com\/blog\/web-design-and-development\/\"  data-wpil-monitor-id=\"10371\">web design<\/a>.<\/span><\/li><\/ol><h3><span style=\"font-weight: 400;\">Color Psychology<\/span><\/h3><p><span style=\"font-weight: 400;\">Color choices profoundly impact how people perceive and emotionally respond to your website. Understanding color psychology empowers you to evoke specific moods and associations.<\/span><\/p><h4><span style=\"font-weight: 400;\">Common Color Associations (Western Culture)<\/span><\/h4><ol><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Red:<\/b><span style=\"font-weight: 400;\"> Passion, excitement, energy, but also danger or urgency. Use strategically!<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Blue:<\/b><span style=\"font-weight: 400;\"> Trust, reliability, calmness, professionalism. Often popular on corporate websites.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Green:<\/b><span style=\"font-weight: 400;\"> Nature, growth, harmony, freshness. Frequently linked to environmentally-conscious brands.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Yellow:<\/b><span style=\"font-weight: 400;\"> Optimism, happiness, playfulness. It can be overwhelming if used excessively.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Orange:<\/b><span style=\"font-weight: 400;\"> Warmth, enthusiasm, affordability. Great for calls to action.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Purple:<\/b><span style=\"font-weight: 400;\"> Luxury, sophistication, creativity. Often used in artistic or spiritual contexts.<\/span><\/li><\/ol><h4><span style=\"font-weight: 400;\">Important Considerations<\/span><\/h4><ol><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Cultural Context:<\/b><span style=\"font-weight: 400;\"> Color associations can vary across cultures. Do your research if targeting a global audience.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Brand Identity:<\/b><span style=\"font-weight: 400;\"> Your color choices should align with your overall brand personality and message.<\/span><\/li><\/ol><p><span style=\"font-weight: 400;\">A <a href=\"https:\/\/elementor.com\/blog\/best-website-builders-for-blogs\/\"  data-wpil-monitor-id=\"10372\">website builder<\/a> like Elementor allows you to experiment with and implement color psychology. Its intuitive color pickers and <a href=\"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/\"  data-wpil-monitor-id=\"10390\">flexible styling options make it easy to tailor your website&#8217;s<\/a> look and feel precisely to the emotional response you want to evoke.<\/span><\/p><h2><span style=\"font-weight: 400;\">Advanced CSS Color Techniques<\/span><\/h2><h3><span style=\"font-weight: 400;\">Gradients<\/span><\/h3><p><span style=\"font-weight: 400;\">Gradients create seamless blends between two or more colors, adding depth and visual interest to your <a href=\"https:\/\/elementor.com\/blog\/web-design-statistics\/\"  data-wpil-monitor-id=\"10373\">web designs<\/a>. CSS offers several types of gradients:<\/span><\/p><h4><span style=\"font-weight: 400;\">Linear Gradients<\/span><\/h4><p><span style=\"font-weight: 400;\">Colors transition in a straight line. You define a direction (e.g., &#8220;to right&#8221;, &#8220;to bottom left&#8221;), and color stops along the way.<\/span><\/p><h5><span style=\"font-weight: 400;\">Example<\/span><\/h5>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d50d872 elementor-widget elementor-widget-code-highlight\" data-id=\"d50d872\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbackground: linear-gradient(to right, red, orange, yellow);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf10667 elementor-widget elementor-widget-text-editor\" data-id=\"bf10667\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Radial Gradients<\/span><\/h4><p><span style=\"font-weight: 400;\">Colors transition outwards from a central point, creating a circular or elliptical effect.<\/span><\/p><h5><span style=\"font-weight: 400;\">Example<\/span><\/h5>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cb5fe2b elementor-widget elementor-widget-code-highlight\" data-id=\"cb5fe2b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbackground: radial-gradient(blue, lightblue); \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-48fdafe elementor-widget elementor-widget-text-editor\" data-id=\"48fdafe\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Repeating Gradients<\/span><\/h4><p><span style=\"font-weight: 400;\">Create striped or patterned effects by repeating a gradient pattern.<\/span><\/p><h5><span style=\"font-weight: 400;\">Example<\/span><\/h5>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46fb496 elementor-widget elementor-widget-code-highlight\" data-id=\"46fb496\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbackground: repeating-linear-gradient(45deg, black, black 10px, white 10px, white 20px);\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-28e9dc6 elementor-widget elementor-widget-text-editor\" data-id=\"28e9dc6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Tip &#8211;\u00a0 <\/span><b>Gradient Generators:<\/b><span style=\"font-weight: 400;\"> Online tools make creating and customizing gradients a breeze.<\/span><\/p><h3><span style=\"font-weight: 400;\">Color Animations and Transitions<\/span><\/h3><p><span style=\"font-weight: 400;\"><a href=\"https:\/\/elementor.com\/blog\/text-color-css\/\"  data-wpil-monitor-id=\"10374\">CSS allows you to create smooth color changes<\/a>, adding a touch of interaction and visual appeal to your websites.<\/span><\/p><h4><span style=\"font-weight: 400;\">Transitions<\/span><\/h4><p><span style=\"font-weight: 400;\">Gradual changes in color properties triggered by an event, like hovering over a button (<\/span><span style=\"font-weight: 400;\">transition<\/span><span style=\"font-weight: 400;\"> property).<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7070d5b elementor-widget elementor-widget-code-highlight\" data-id=\"7070d5b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbutton {\r\n   background-color: blue;\r\n   transition: background-color 0.5s ease-in-out; \r\n}\r\n\r\nbutton:hover {\r\n   background-color: green;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1bd813 elementor-widget elementor-widget-text-editor\" data-id=\"c1bd813\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Animations<\/span><\/h4><p><span style=\"font-weight: 400;\">More complex color changes using keyframes and the <\/span><span style=\"font-weight: 400;\">@keyframes<\/span><span style=\"font-weight: 400;\"> rule to define distinct points in the animation sequence.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df114a0 elementor-widget elementor-widget-code-highlight\" data-id=\"df114a0\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n@keyframes color-pulse {\r\n  0% { background-color: red; }\r\n  50% { background-color: yellow; }\r\n  100% { background-color: red; }\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bce2528 elementor-widget elementor-widget-text-editor\" data-id=\"bce2528\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Applications<\/span><\/h4><p><span style=\"font-weight: 400;\">Color animations and transitions can be used for:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Interactive elements (buttons, links)<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Highlighting notifications or updates<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Adding playful visual effects<\/span><\/li><\/ul><p><b>Note:<\/b><span style=\"font-weight: 400;\"> Use animations thoughtfully! Overusing them can distract rather than enhance the <a href=\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/\"  data-wpil-monitor-id=\"10375\">user experience<\/a>.<\/span><\/p><h3><span style=\"font-weight: 400;\">CSS Filters\u00a0<\/span><\/h3><p><span style=\"font-weight: 400;\">CSS filters offer a powerful way to modify the appearance of elements on your website, including images, backgrounds, and even text. Here are some popular filters:<\/span><\/p><ol><li style=\"font-weight: 400;\" aria-level=\"1\"><b>grayscale():<\/b><span style=\"font-weight: 400;\"> Converts colors to shades of gray.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>sepia():<\/b><span style=\"font-weight: 400;\"> Applies a vintage, brownish tone.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>saturate():<\/b><span style=\"font-weight: 400;\"> Increases or decreases color saturation.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>contrast():<\/b><span style=\"font-weight: 400;\"> Adjusts the contrast between light and dark areas.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>brightness():<\/b><span style=\"font-weight: 400;\"> Makes colors lighter or darker.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>blur():<\/b><span style=\"font-weight: 400;\"> Adds a blurring effect.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>invert():<\/b><span style=\"font-weight: 400;\"> Inverts colors.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>hue-rotate():<\/b><span style=\"font-weight: 400;\"> Shifts colors along the color wheel.<\/span><\/li><\/ol><h4><span style=\"font-weight: 400;\">Example<\/span><\/h4>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b4f81f3 elementor-widget elementor-widget-code-highlight\" data-id=\"b4f81f3\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  filter: sepia(80%) blur(3px);\r\n}\r\nimg:hover {\r\n  filter: grayscale(0%); \/* Image becomes full color on hover *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6189283 elementor-widget elementor-widget-text-editor\" data-id=\"6189283\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Tips<\/span><\/h4><ol><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Filters can be combined for unique effects.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use transitions to create smooth filter changes on hover or interaction.<\/span><\/li><\/ol><h3><b>Working with Color Variables<\/b><span style=\"font-weight: 400;\">\u00a0<\/span><\/h3><p><span style=\"font-weight: 400;\">CSS variables (also known as custom properties) revolutionize how you manage colors and maintain visual consistency across your websites.<\/span><\/p><h4><span style=\"font-weight: 400;\">How They Work<\/span><\/h4><h5><span style=\"font-weight: 400;\">Declare<\/span><\/h5><p><span style=\"font-weight: 400;\">Variables are declared with two dashes (<\/span><span style=\"font-weight: 400;\">&#8212;<\/span><span style=\"font-weight: 400;\">) and a custom name:<\/span><span style=\"font-weight: 400;\"><br \/><\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b1184b2 elementor-widget elementor-widget-code-highlight\" data-id=\"b1184b2\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp> CSS\r\n:root {\r\n  --primary-color: blue; \r\n  --accent-color: orange;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e58083c elementor-widget elementor-widget-text-editor\" data-id=\"e58083c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5><span style=\"font-weight: 400;\">Use<\/span><\/h5><p><span style=\"font-weight: 400;\">Utilize the <a href=\"https:\/\/elementor.com\/blog\/variables-in-css\/\"  data-wpil-monitor-id=\"10376\">variables with the var() function<\/a>:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f94977 elementor-widget elementor-widget-code-highlight\" data-id=\"3f94977\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh1 { \r\n  color: var(--primary-color);\r\n}\r\nbutton {\r\n  background-color: var(--accent-color);\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-53f8d8c elementor-widget elementor-widget-text-editor\" data-id=\"53f8d8c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Benefits<\/span><\/h4><ol><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Centralized Control:<\/b><span style=\"font-weight: 400;\"> Changing a color variable updates all uses throughout your stylesheet.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Improved Readability:<\/b><span style=\"font-weight: 400;\"> Meaningful variable names make your CSS easier to understand.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Theming:<\/b><span style=\"font-weight: 400;\"> Create different color themes by dynamically switching variable values.<\/span><\/li><\/ol><p><b>Preprocessors (Sass, Less):<\/b><span style=\"font-weight: 400;\"> Tools like Sass and Less extend CSS with <a href=\"https:\/\/elementor.com\/blog\/new-elementor-hosting-features\/\"  data-wpil-monitor-id=\"10391\">advanced features<\/a>, including color variables, nesting, and color manipulation functions. While not strictly necessary, they further streamline color workflows.<\/span><\/p><p><b>Note:<\/b><span style=\"font-weight: 400;\"> CSS Variables have excellent browser support. Always check compatibility if targeting older browsers.<\/span><\/p><h2><span style=\"font-weight: 400;\">Choosing Colors for Your Website<\/span><\/h2><h3><span style=\"font-weight: 400;\">Branding\u00a0<\/span><\/h3><p><span style=\"font-weight: 400;\">If you have an existing brand, your primary <a href=\"https:\/\/elementor.com\/blog\/introducing-new-ecommerce-design-capabilities\/\"  data-wpil-monitor-id=\"10377\">website colors should align with your brand identity<\/a>. This ensures visual consistency and strengthens brand recognition. Consider these aspects:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Brand Personality:<\/b><span style=\"font-weight: 400;\"> What emotions or qualities does your brand embody? Choose colors that reflect these traits.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Logo:<\/b><span style=\"font-weight: 400;\"> Can you extract a dominant color scheme from your logo to use as a foundation?<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Existing Brand Materials:<\/b><span style=\"font-weight: 400;\"> Analyze your print or digital <a href=\"https:\/\/elementor.com\/blog\/youtube-shorts\/\"  data-wpil-monitor-id=\"10378\">marketing<\/a> materials to identify recurring color themes.<\/span><\/li><\/ul><h3><span style=\"font-weight: 400;\">Target Audience<\/span><\/h3><p><span style=\"font-weight: 400;\">Understanding your target audience&#8217;s preferences and expectations is crucial for effective color choices. Consider these factors:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Demographics:<\/b><span style=\"font-weight: 400;\"> Age and gender can influence color associations. For example, younger audiences might gravitate towards brighter, bolder palettes, while older audiences might prefer more muted tones.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Cultural Background:<\/b><span style=\"font-weight: 400;\"> Color meanings vary between cultures. Research your target <a href=\"https:\/\/elementor.com\/blog\/marketing\/\"  data-wpil-monitor-id=\"10379\">markets<\/a> to avoid misinterpretations.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Industry and Niche:<\/b><span style=\"font-weight: 400;\"> Specific industries often have conventional color associations (e.g., healthcare with blues and greens). Analyze your competitors to identify common patterns and how you can either align or differentiate yourself.<\/span><\/li><\/ul><p><b>Tip:<\/b><span style=\"font-weight: 400;\"> While considering your audience is vital, don&#8217;t let it completely override your brand identity. Strive for an authentic balance that resonates with your <a href=\"https:\/\/elementor.com\/blog\/what-is-a-target-market\/\"  data-wpil-monitor-id=\"10380\">target market<\/a>.<\/span><\/p><h3><span style=\"font-weight: 400;\">Web Design Trends<\/span><\/h3><p><span style=\"font-weight: 400;\">Staying aware of current <a href=\"https:\/\/elementor.com\/blog\/web-design-trends\/\"  data-wpil-monitor-id=\"10381\">web design trends can inspire<\/a> fresh color palettes and keep your website looking modern. However, it&#8217;s essential to balance trendiness with timeless design principles:<\/span><\/p><ol><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Trending Color Schemes:<\/b><span style=\"font-weight: 400;\"> Research platforms like Dribbble or Behance to identify popular color combinations.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Bold Monochromes:<\/b><span style=\"font-weight: 400;\"> Using a single color in varying shades and saturations is a striking trend.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Retro Palettes:<\/b><span style=\"font-weight: 400;\"> Nostalgia is in! Pastels and muted tones reminiscent of specific decades can make a memorable impact.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Accessibility-forward trends:<\/b><span style=\"font-weight: 400;\"> Trends focusing on high-contrast, color-blind-friendly palettes are a win-win for design and inclusivity.<\/span><\/li><\/ol><p><span style=\"font-weight: 400;\">Don&#8217;t chase trends blindly. Choose colors that align with your brand&#8217;s long-term vision. Incorporating trendy elements as accents or in fleeting sections of your site can be a good balance.<\/span><\/p><h2><span style=\"font-weight: 400;\">Conclusion\u00a0<\/span><\/h2><p><span style=\"font-weight: 400;\">Colors hold immense power in <a href=\"https:\/\/elementor.com\/blog\/web-design-workflow\/\"  data-wpil-monitor-id=\"10382\">web design<\/a>. They shape the <a href=\"https:\/\/elementor.com\/blog\/announcing-scroll-snap-and-progress-tracker\/\"  data-wpil-monitor-id=\"10383\">user experience<\/a>, convey your brand&#8217;s identity, and influence how people perceive your website. By mastering the technical and artistic aspects of color, you&#8217;ll <a href=\"https:\/\/elementor.com\/blog\/web-design-portfolio-examples\/\"  data-wpil-monitor-id=\"10384\">create visually stunning websites<\/a> that resonate with your audience.<\/span><\/p><p><span style=\"font-weight: 400;\">Key Takeaways:<\/span><\/p><ol><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">CSS provides a vast array of options for color manipulation, from <a href=\"https:\/\/elementor.com\/blog\/use-chatgpt\/\"  data-wpil-monitor-id=\"10392\">basic keywords to advanced techniques<\/a> like gradients and filters.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Color theory and psychology are your allies when making intentional design choices.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Consider branding, <a href=\"https:\/\/elementor.com\/blog\/how-to-identify-target-audience\/\"  data-wpil-monitor-id=\"10385\">target audience<\/a>, and current trends when crafting your color palette.<\/span><\/li><\/ol><p><span style=\"font-weight: 400;\">Don&#8217;t be afraid to experiment, try new combinations, and find colors that ignite your creativity.<\/span><\/p><p><span style=\"font-weight: 400;\">A <a href=\"https:\/\/elementor.com\/blog\/best-website-builders-for-online-stores\/\"  data-wpil-monitor-id=\"10386\">website builder<\/a> like Elementor simplifies the process of implementing your beautiful color schemes. Its intuitive interface, color customization options, and performance-minded features streamline the <a href=\"https:\/\/elementor.com\/blog\/wireframe\/\"  data-wpil-monitor-id=\"10387\">web design process<\/a> so you can focus on expressing your vision.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bfef3ed e-flex e-con-boxed e-con e-parent\" data-id=\"bfef3ed\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f50a734 elementor-widget elementor-widget-text-editor\" data-id=\"f50a734\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div id=\"model-response-message-contentr_44fc28566716b611\" class=\"markdown markdown-main-panel\" dir=\"ltr\"><h2 data-sourcepos=\"2:1-2:46\">FAQs<\/h2><h3 data-sourcepos=\"2:1-2:46\">What are the primary color formats in CSS?<\/h3><p data-sourcepos=\"3:1-3:530\">CSS offers several color formats, including Hex codes, RGB, RGBA, HSL, HSLA, and color keywords. Hex codes use a six-digit combination of letters and numbers to represent colors. RGB (Red, Green, Blue) defines colors based on the intensity of red, green, and blue light, while RGBA adds an alpha channel for opacity. HSL (Hue, Saturation, Lightness) represents colors based on hue, saturation, and lightness. HSLA is HSL with an alpha channel. Color keywords use predefined names like &#8220;blue&#8221; or &#8220;tomato&#8221; to denote specific colors.<\/p><h3 data-sourcepos=\"5:1-5:38\">How can CSS colors be manipulated?<\/h3><p data-sourcepos=\"6:1-6:296\">CSS provides properties for color manipulation, such as <code>opacity<\/code> to adjust transparency, and blend modes to create visual effects by blending colors with the background. Additionally, CSS filter effects like <code>brightness<\/code>, <code>contrast<\/code>, <code>grayscale<\/code>, and <code>sepia<\/code> can alter the appearance of colors.<\/p><h3 data-sourcepos=\"8:1-8:51\">What is the role of color theory in web design?<\/h3><p data-sourcepos=\"9:1-9:442\">Color theory is crucial in web design for creating visually appealing and effective interfaces. Understanding concepts like the color wheel, color harmony (complementary, analogous, triadic colors), and color psychology helps designers choose color palettes that evoke the desired emotions and ensure readability and visual balance. Color theory guides decisions on contrast, emphasis, and creating a consistent brand identity through color.<\/p><h3 data-sourcepos=\"11:1-11:61\">What are some best practices for choosing website colors?<\/h3><p data-sourcepos=\"12:1-12:574\">When choosing website colors, consider the target audience, brand identity, and the website&#8217;s purpose. Prioritize readability by ensuring sufficient contrast between text and background colors. Use color palettes with harmonious color combinations to create a cohesive look. Limit the number of colors to avoid overwhelming the user. Test color choices on different devices and browsers to ensure consistency and accessibility for all users. Consider using color accessibility tools to check for sufficient contrast ratios, especially for users with visual impairments.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Colors are the lifeblood of web design. They set the mood, establish a brand\u2019s identity, guide the user\u2019s eye, and create a lasting emotional impact. CSS (Cascading Style Sheets) is the language that allows us to bring this vibrancy to the web. It gives us precise control over how colors are applied to text, backgrounds, borders, and every other visual element of a webpage.<\/p>\n","protected":false},"author":2024234,"featured_media":45581,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[512],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-1357","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS &amp; HTML Colors: Properties, Codes, Keywords and Names<\/title>\n<meta name=\"description\" content=\"Colors are the lifeblood of web design. They set the mood, establish a brand\u2019s identity, guide the user\u2019s eye, and create a lasting emotional impact. CSS (Cascading Style Sheets) is the language that allows us to bring this vibrancy to the web. It gives us precise control over how colors are applied to text, backgrounds, borders, and every other visual element of a webpage.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/colors-in-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS &amp; HTML Colors: Properties, Codes, Keywords and Names\" \/>\n<meta property=\"og:description\" content=\"Colors are the lifeblood of web design. They set the mood, establish a brand\u2019s identity, guide the user\u2019s eye, and create a lasting emotional impact. CSS (Cascading Style Sheets) is the language that allows us to bring this vibrancy to the web. It gives us precise control over how colors are applied to text, backgrounds, borders, and every other visual element of a webpage.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/colors-in-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-01T05:10:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-01T05:10:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/colors-in-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/colors-in-css\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"CSS &amp; HTML Colors: Properties, Codes, Keywords and Names\",\"datePublished\":\"2025-07-01T05:10:21+00:00\",\"dateModified\":\"2025-07-01T05:10:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/colors-in-css\/\"},\"wordCount\":3047,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/colors-in-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Resources\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/colors-in-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/colors-in-css\/\",\"url\":\"https:\/\/elementor.com\/blog\/colors-in-css\/\",\"name\":\"CSS &amp; HTML Colors: Properties, Codes, Keywords and Names\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/colors-in-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/colors-in-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-07-01T05:10:21+00:00\",\"dateModified\":\"2025-07-01T05:10:32+00:00\",\"description\":\"Colors are the lifeblood of web design. They set the mood, establish a brand\u2019s identity, guide the user\u2019s eye, and create a lasting emotional impact. CSS (Cascading Style Sheets) is the language that allows us to bring this vibrancy to the web. It gives us precise control over how colors are applied to text, backgrounds, borders, and every other visual element of a webpage.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/colors-in-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/colors-in-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/colors-in-css\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/colors-in-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/elementor.com\/blog\/category\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS &amp; HTML Colors: Properties, Codes, Keywords and Names\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS &amp; HTML Colors: Properties, Codes, Keywords and Names","description":"Colors are the lifeblood of web design. They set the mood, establish a brand\u2019s identity, guide the user\u2019s eye, and create a lasting emotional impact. CSS (Cascading Style Sheets) is the language that allows us to bring this vibrancy to the web. It gives us precise control over how colors are applied to text, backgrounds, borders, and every other visual element of a webpage.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/colors-in-css\/","og_locale":"en_US","og_type":"article","og_title":"CSS &amp; HTML Colors: Properties, Codes, Keywords and Names","og_description":"Colors are the lifeblood of web design. They set the mood, establish a brand\u2019s identity, guide the user\u2019s eye, and create a lasting emotional impact. CSS (Cascading Style Sheets) is the language that allows us to bring this vibrancy to the web. It gives us precise control over how colors are applied to text, backgrounds, borders, and every other visual element of a webpage.","og_url":"https:\/\/elementor.com\/blog\/colors-in-css\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-07-01T05:10:21+00:00","article_modified_time":"2025-07-01T05:10:32+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Itamar Haim","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/colors-in-css\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/colors-in-css\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"CSS &amp; HTML Colors: Properties, Codes, Keywords and Names","datePublished":"2025-07-01T05:10:21+00:00","dateModified":"2025-07-01T05:10:32+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/colors-in-css\/"},"wordCount":3047,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/colors-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Resources"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/colors-in-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/colors-in-css\/","url":"https:\/\/elementor.com\/blog\/colors-in-css\/","name":"CSS &amp; HTML Colors: Properties, Codes, Keywords and Names","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/colors-in-css\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/colors-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-07-01T05:10:21+00:00","dateModified":"2025-07-01T05:10:32+00:00","description":"Colors are the lifeblood of web design. They set the mood, establish a brand\u2019s identity, guide the user\u2019s eye, and create a lasting emotional impact. CSS (Cascading Style Sheets) is the language that allows us to bring this vibrancy to the web. It gives us precise control over how colors are applied to text, backgrounds, borders, and every other visual element of a webpage.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/colors-in-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/colors-in-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/colors-in-css\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/colors-in-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/elementor.com\/blog\/category\/resources\/"},{"@type":"ListItem","position":3,"name":"CSS &amp; HTML Colors: Properties, Codes, Keywords and Names"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/1357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=1357"}],"version-history":[{"count":13,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/1357\/revisions"}],"predecessor-version":[{"id":131609,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/1357\/revisions\/131609"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/45581"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=1357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=1357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=1357"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=1357"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=1357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}