{"id":126800,"date":"2025-07-01T08:10:21","date_gmt":"2025-07-01T05:10:21","guid":{"rendered":"https:\/\/elementor.com\/blog\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/"},"modified":"2025-11-16T00:25:42","modified_gmt":"2025-11-15T22:25:42","slug":"cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/pt-br\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/","title":{"rendered":"Cores CSS e HTML: Propriedades, C\u00f3digos, Palavras-chave e Nomes"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"126800\" class=\"elementor elementor-126800 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 Nomes de Cores e valores hexadecimais Suportados por Todos os Navegadores:<\/h2>\n\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%\">\n    <tr>\n        <th>Nome<\/th>\n        <th>Valor <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"19351\">CSS<\/a><\/th>\n        <th>Demonstra\u00e7\u00e3o ao Vivo<\/th>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0F8FF')\">AliceBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0F8FF')\">#F0F8FF<\/a><\/td>\n        <td style=\"background-color:#F0F8FF;\" id=\"demo1\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FAEBD7')\">AntiqueWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FAEBD7')\">#FAEBD7<\/a><\/td>\n        <td style=\"background-color:#FAEBD7;\" id=\"demo2\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">Aqua<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">#00FFFF<\/a><\/td>\n        <td style=\"background-color:#00FFFF;\" id=\"demo3\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFFD4')\">Aquamarine<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFFD4')\">#7FFFD4<\/a><\/td>\n        <td style=\"background-color:#7FFFD4;\" id=\"demo4\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFFF')\">Azure<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFFF')\">#F0FFFF<\/a><\/td>\n        <td style=\"background-color:#F0FFFF;\" id=\"demo5\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5DC')\">Beige<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5DC')\">#F5F5DC<\/a><\/td>\n        <td style=\"background-color:#F5F5DC;\" id=\"demo6\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4C4')\">Bisque<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4C4')\">#FFE4C4<\/a><\/td>\n        <td style=\"background-color:#FFE4C4;\" id=\"demo7\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#000000')\">Black<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#000000')\">#000000<\/a><\/td>\n        <td style=\"background-color:#000000;\" id=\"demo8\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEBCD')\">BlanchedAlmond<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEBCD')\">#FFEBCD<\/a><\/td>\n        <td style=\"background-color:#FFEBCD;\" id=\"demo9\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#0000FF')\">Blue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#0000FF')\">#0000FF<\/a><\/td>\n        <td style=\"background-color:#0000FF;\" id=\"demo10\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8A2BE2')\">BlueViolet<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8A2BE2')\">#8A2BE2<\/a><\/td>\n        <td style=\"background-color:#8A2BE2;\" id=\"demo11\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A52A2A')\">Brown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A52A2A')\">#A52A2A<\/a><\/td>\n        <td style=\"background-color:#A52A2A;\" id=\"demo12\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DEB887')\">BurlyWood<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DEB887')\">#DEB887<\/a><\/td>\n        <td style=\"background-color:#DEB887;\" id=\"demo13\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#5F9EA0')\">CadetBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#5F9EA0')\">#5F9EA0<\/a><\/td>\n        <td style=\"background-color:#5F9EA0;\" id=\"demo14\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFF00')\">Chartreuse<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFF00')\">#7FFF00<\/a><\/td>\n        <td style=\"background-color:#7FFF00;\" id=\"demo15\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D2691E')\">Chocolate<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D2691E')\">#D2691E<\/a><\/td>\n        <td style=\"background-color:#D2691E;\" id=\"demo16\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF7F50')\">Coral<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF7F50')\">#FF7F50<\/a><\/td>\n        <td style=\"background-color:#FF7F50;\" id=\"demo17\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#6495ED')\">CornflowerBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#6495ED')\">#6495ED<\/a><\/td>\n        <td style=\"background-color:#6495ED;\" id=\"demo18\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF8DC')\">Cornsilk<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF8DC')\">#FFF8DC<\/a><\/td>\n        <td style=\"background-color:#FFF8DC;\" id=\"demo19\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DC143C')\">Crimson<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DC143C')\">#DC143C<\/a><\/td>\n        <td style=\"background-color:#DC143C;\" id=\"demo20\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">Cyan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">#00FFFF<\/a><\/td>\n        <td style=\"background-color:#00FFFF;\" id=\"demo21\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00008B')\">DarkBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00008B')\">#00008B<\/a><\/td>\n        <td style=\"background-color:#00008B;\" id=\"demo22\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#008B8B')\">DarkCyan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#008B8B')\">#008B8B<\/a><\/td>\n        <td style=\"background-color:#008B8B;\" id=\"demo23\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B8860B')\">DarkGoldenRod<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B8860B')\">#B8860B<\/a><\/td>\n        <td style=\"background-color:#B8860B;\" id=\"demo24\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">DarkGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">#A9A9A9<\/a><\/td>\n        <td style=\"background-color:#A9A9A9;\" id=\"demo25\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">DarkGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">#A9A9A9<\/a><\/td>\n        <td style=\"background-color:#A9A9A9;\" id=\"demo26\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#006400')\">DarkGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#006400')\">#006400<\/a><\/td>\n        <td style=\"background-color:#006400;\" id=\"demo27\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#BDB76B')\">DarkKhaki<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#BDB76B')\">#BDB76B<\/a><\/td>\n        <td style=\"background-color:#BDB76B;\" id=\"demo28\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8B008B')\">DarkMagenta<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8B008B')\">#8B008B<\/a><\/td>\n        <td style=\"background-color:#8B008B;\" id=\"demo29\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#556B2F')\">DarkOliveGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#556B2F')\">#556B2F<\/a><\/td>\n        <td style=\"background-color:#556B2F;\" id=\"demo30\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF8C00')\">DarkOrange<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF8C00')\">#FF8C00<\/a><\/td>\n        <td style=\"background-color:#FF8C00;\" id=\"demo31\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9932CC')\">DarkOrchid<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9932CC')\">#9932CC<\/a><\/td>\n        <td style=\"background-color:#9932CC;\" id=\"demo32\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8B0000')\">DarkRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8B0000')\">#8B0000<\/a><\/td>\n        <td style=\"background-color:#8B0000;\" id=\"demo33\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#E9967A')\">DarkSalmon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#E9967A')\">#E9967A<\/a><\/td>\n        <td style=\"background-color:#E9967A;\" id=\"demo34\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8FBC8F')\">DarkSeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8FBC8F')\">#8FBC8F<\/a><\/td>\n        <td style=\"background-color:#8FBC8F;\" id=\"demo35\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#483D8B')\">DarkSlateBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#483D8B')\">#483D8B<\/a><\/td>\n        <td style=\"background-color:#483D8B;\" id=\"demo36\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">DarkSlateGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">#2F4F4F<\/a><\/td>\n        <td style=\"background-color:#2F4F4F;\" id=\"demo37\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">DarkSlateGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">#2F4F4F<\/a><\/td>\n        <td style=\"background-color:#2F4F4F;\" id=\"demo38\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00CED1')\">DarkTurquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00CED1')\">#00CED1<\/a><\/td>\n        <td style=\"background-color:#00CED1;\" id=\"demo39\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9400D3')\">DarkViolet<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9400D3')\">#9400D3<\/a><\/td>\n        <td style=\"background-color:#9400D3;\" id=\"demo40\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF1493')\">DeepPink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF1493')\">#FF1493<\/a><\/td>\n        <td style=\"background-color:#FF1493;\" id=\"demo41\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00BFFF')\">DeepSkyBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00BFFF')\">#00BFFF<\/a><\/td>\n        <td style=\"background-color:#00BFFF;\" id=\"demo42\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">DimGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">#696969<\/a><\/td>\n        <td style=\"background-color:#696969;\" id=\"demo43\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">DimGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">#696969<\/a><\/td>\n        <td style=\"background-color:#696969;\" id=\"demo44\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#1E90FF')\">DodgerBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#1E90FF')\">#1E90FF<\/a><\/td>\n        <td style=\"background-color:#1E90FF;\" id=\"demo45\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B22222')\">FireBrick<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B22222')\">#B22222<\/a><\/td>\n        <td style=\"background-color:#B22222;\" id=\"demo46\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAF0')\">FloralWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAF0')\">#FFFAF0<\/a><\/td>\n        <td style=\"background-color:#FFFAF0;\" id=\"demo47\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#228B22')\">ForestGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#228B22')\">#228B22<\/a><\/td>\n        <td style=\"background-color:#228B22;\" id=\"demo48\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">Fuchsia<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">#FF00FF<\/a><\/td>\n        <td style=\"background-color:#FF00FF;\" id=\"demo49\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DCDCDC')\">Gainsboro<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DCDCDC')\">#DCDCDC<\/a><\/td>\n        <td style=\"background-color:#DCDCDC;\" id=\"demo50\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F8F8FF')\">GhostWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F8F8FF')\">#F8F8FF<\/a><\/td>\n        <td style=\"background-color:#F8F8FF;\" id=\"demo51\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFD700')\">Gold<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFD700')\">#FFD700<\/a><\/td>\n        <td style=\"background-color:#FFD700;\" id=\"demo52\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DAA520')\">GoldenRod<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DAA520')\">#DAA520<\/a><\/td>\n        <td style=\"background-color:#DAA520;\" id=\"demo53\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">Gray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">#808080<\/a><\/td>\n        <td style=\"background-color:#808080;\" id=\"demo54\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">Grey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">#808080<\/a><\/td>\n        <td style=\"background-color:#808080;\" id=\"demo55\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#008000')\">Green<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#008000')\">#008000<\/a><\/td>\n        <td style=\"background-color:#008000;\" id=\"demo56\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#ADFF2F')\">GreenYellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#ADFF2F')\">#ADFF2F<\/a><\/td>\n        <td style=\"background-color:#ADFF2F;\" id=\"demo57\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFF0')\">HoneyDew<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFF0')\">#F0FFF0<\/a><\/td>\n        <td style=\"background-color:#F0FFF0;\" id=\"demo58\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF69B4')\">HotPink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF69B4')\">#FF69B4<\/a><\/td>\n        <td style=\"background-color:#FF69B4;\" id=\"demo59\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#CD5C5C')\">IndianRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#CD5C5C')\">#CD5C5C<\/a><\/td>\n        <td style=\"background-color:#CD5C5C;\" id=\"demo60\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#4B0082')\">Indigo<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#4B0082')\">#4B0082<\/a><\/td>\n        <td style=\"background-color:#4B0082;\" id=\"demo61\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFF0')\">Ivory<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFF0')\">#FFFFF0<\/a><\/td>\n        <td style=\"background-color:#FFFFF0;\" id=\"demo62\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0E68C')\">Khaki<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0E68C')\">#F0E68C<\/a><\/td>\n        <td style=\"background-color:#F0E68C;\" id=\"demo63\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#E6E6FA')\">Lavender<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#E6E6FA')\">#E6E6FA<\/a><\/td>\n        <td style=\"background-color:#E6E6FA;\" id=\"demo64\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF0F5')\">LavenderBlush<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF0F5')\">#FFF0F5<\/a><\/td>\n        <td style=\"background-color:#FFF0F5;\" id=\"demo65\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7CFC00')\">LawnGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7CFC00')\">#7CFC00<\/a><\/td>\n        <td style=\"background-color:#7CFC00;\" id=\"demo66\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFACD')\">LemonChiffon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFACD')\">#FFFACD<\/a><\/td>\n        <td style=\"background-color:#FFFACD;\" id=\"demo67\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#ADD8E6')\">LightBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#ADD8E6')\">#ADD8E6<\/a><\/td>\n        <td style=\"background-color:#ADD8E6;\" id=\"demo68\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F08080')\">LightCoral<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F08080')\">#F08080<\/a><\/td>\n        <td style=\"background-color:#F08080;\" id=\"demo69\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#E0FFFF')\">LightCyan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#E0FFFF')\">#E0FFFF<\/a><\/td>\n        <td style=\"background-color:#E0FFFF;\" id=\"demo70\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FAFAD2')\">LightGoldenRodYellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FAFAD2')\">#FAFAD2<\/a><\/td>\n        <td style=\"background-color:#FAFAD2;\" id=\"demo71\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">LightGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">#D3D3D3<\/a><\/td>\n        <td style=\"background-color:#D3D3D3;\" id=\"demo72\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">LightGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">#D3D3D3<\/a><\/td>\n        <td style=\"background-color:#D3D3D3;\" id=\"demo73\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#90EE90')\">LightGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#90EE90')\">#90EE90<\/a><\/td>\n        <td style=\"background-color:#90EE90;\" id=\"demo74\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFB6C1')\">LightPink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFB6C1')\">#FFB6C1<\/a><\/td>\n        <td style=\"background-color:#FFB6C1;\" id=\"demo75\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA07A')\">LightSalmon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA07A')\">#FFA07A<\/a><\/td>\n        <td style=\"background-color:#FFA07A;\" id=\"demo76\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#20B2AA')\">LightSeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#20B2AA')\">#20B2AA<\/a><\/td>\n        <td style=\"background-color:#20B2AA;\" id=\"demo77\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEFA')\">LightSkyBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEFA')\">#87CEFA<\/a><\/td>\n        <td style=\"background-color:#87CEFA;\" id=\"demo78\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">LightSlateGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">#778899<\/a><\/td>\n        <td style=\"background-color:#778899;\" id=\"demo79\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">LightSlateGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">#778899<\/a><\/td>\n        <td style=\"background-color:#778899;\" id=\"demo80\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B0C4DE')\">LightSteelBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B0C4DE')\">#B0C4DE<\/a><\/td>\n        <td style=\"background-color:#B0C4DE;\" id=\"demo81\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFE0')\">LightYellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFE0')\">#FFFFE0<\/a><\/td>\n        <td style=\"background-color:#FFFFE0;\" id=\"demo82\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF00')\">Lime<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF00')\">#00FF00<\/a><\/td>\n        <td style=\"background-color:#00FF00;\" id=\"demo83\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#32CD32')\">LimeGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#32CD32')\">#32CD32<\/a><\/td>\n        <td style=\"background-color:#32CD32;\" id=\"demo84\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FAF0E6')\">Linen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FAF0E6')\">#FAF0E6<\/a><\/td>\n        <td style=\"background-color:#FAF0E6;\" id=\"demo85\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">Magenta<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">#FF00FF<\/a><\/td>\n        <td style=\"background-color:#FF00FF;\" id=\"demo86\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#800000')\">Maroon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#800000')\">#800000<\/a><\/td>\n        <td style=\"background-color:#800000;\" id=\"demo87\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#66CDAA')\">MediumAquaMarine<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#66CDAA')\">#66CDAA<\/a><\/td>\n        <td style=\"background-color:#66CDAA;\" id=\"demo88\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#0000CD')\">MediumBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#0000CD')\">#0000CD<\/a><\/td>\n        <td style=\"background-color:#0000CD;\" id=\"demo89\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#BA55D3')\">MediumOrchid<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#BA55D3')\">#BA55D3<\/a><\/td>\n        <td style=\"background-color:#BA55D3;\" id=\"demo90\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9370DB')\">MediumPurple<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9370DB')\">#9370DB<\/a><\/td>\n        <td style=\"background-color:#9370DB;\" id=\"demo91\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#3CB371')\">MediumSeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#3CB371')\">#3CB371<\/a><\/td>\n        <td style=\"background-color:#3CB371;\" id=\"demo92\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7B68EE')\">MediumSlateBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7B68EE')\">#7B68EE<\/a><\/td>\n        <td style=\"background-color:#7B68EE;\" id=\"demo93\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FA9A')\">MediumSpringGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FA9A')\">#00FA9A<\/a><\/td>\n        <td style=\"background-color:#00FA9A;\" id=\"demo94\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#48D1CC')\">MediumTurquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#48D1CC')\">#48D1CC<\/a><\/td>\n        <td style=\"background-color:#48D1CC;\" id=\"demo95\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#C71585')\">MediumVioletRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#C71585')\">#C71585<\/a><\/td>\n        <td style=\"background-color:#C71585;\" id=\"demo96\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#191970')\">MidnightBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#191970')\">#191970<\/a><\/td>\n        <td style=\"background-color:#191970;\" id=\"demo97\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5FFFA')\">MintCream<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5FFFA')\">#F5FFFA<\/a><\/td>\n        <td style=\"background-color:#F5FFFA;\" id=\"demo98\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4E1')\">MistyRose<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4E1')\">#FFE4E1<\/a><\/td>\n        <td style=\"background-color:#FFE4E1;\" id=\"demo99\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4B5')\">Moccasin<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4B5')\">#FFE4B5<\/a><\/td>\n        <td style=\"background-color:#FFE4B5;\" id=\"demo100\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDEAD')\">NavajoWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDEAD')\">#FFDEAD<\/a><\/td>\n        <td style=\"background-color:#FFDEAD;\" id=\"demo101\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#000080')\">Navy<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#000080')\">#000080<\/a><\/td>\n        <td style=\"background-color:#000080;\" id=\"demo102\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FDF5E6')\">OldLace<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FDF5E6')\">#FDF5E6<\/a><\/td>\n        <td style=\"background-color:#FDF5E6;\" id=\"demo103\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#808000')\">Olive<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#808000')\">#808000<\/a><\/td>\n        <td style=\"background-color:#808000;\" id=\"demo104\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#6B8E23')\">OliveDrab<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#6B8E23')\">#6B8E23<\/a><\/td>\n        <td style=\"background-color:#6B8E23;\" id=\"demo105\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA500')\">Orange<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA500')\">#FFA500<\/a><\/td>\n        <td style=\"background-color:#FFA500;\" id=\"demo106\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF4500')\">OrangeRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF4500')\">#FF4500<\/a><\/td>\n        <td style=\"background-color:#FF4500;\" id=\"demo107\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DA70D6')\">Orchid<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DA70D6')\">#DA70D6<\/a><\/td>\n        <td style=\"background-color:#DA70D6;\" id=\"demo108\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#EEE8AA')\">PaleGoldenRod<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#EEE8AA')\">#EEE8AA<\/a><\/td>\n        <td style=\"background-color:#EEE8AA;\" id=\"demo109\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#98FB98')\">PaleGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#98FB98')\">#98FB98<\/a><\/td>\n        <td style=\"background-color:#98FB98;\" id=\"demo110\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#AFEEEE')\">PaleTurquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#AFEEEE')\">#AFEEEE<\/a><\/td>\n        <td style=\"background-color:#AFEEEE;\" id=\"demo111\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DB7093')\">PaleVioletRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DB7093')\">#DB7093<\/a><\/td>\n        <td style=\"background-color:#DB7093;\" id=\"demo112\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEFD5')\">PapayaWhip<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEFD5')\">#FFEFD5<\/a><\/td>\n        <td style=\"background-color:#FFEFD5;\" id=\"demo113\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDAB9')\">PeachPuff<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDAB9')\">#FFDAB9<\/a><\/td>\n        <td style=\"background-color:#FFDAB9;\" id=\"demo114\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#CD853F')\">Peru<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#CD853F')\">#CD853F<\/a><\/td>\n        <td style=\"background-color:#CD853F;\" id=\"demo115\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFC0CB')\">Pink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFC0CB')\">#FFC0CB<\/a><\/td>\n        <td style=\"background-color:#FFC0CB;\" id=\"demo116\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DDA0DD')\">Plum<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DDA0DD')\">#DDA0DD<\/a><\/td>\n        <td style=\"background-color:#DDA0DD;\" id=\"demo117\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B0E0E6')\">PowderBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B0E0E6')\">#B0E0E6<\/a><\/td>\n        <td style=\"background-color:#B0E0E6;\" id=\"demo118\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#800080')\">Purple<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#800080')\">#800080<\/a><\/td>\n        <td style=\"background-color:#800080;\" id=\"demo119\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#663399')\">RebeccaPurple<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#663399')\">#663399<\/a><\/td>\n        <td style=\"background-color:#663399;\" id=\"demo120\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF0000')\">Red<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF0000')\">#FF0000<\/a><\/td>\n        <td style=\"background-color:#FF0000;\" id=\"demo121\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#BC8F8F')\">RosyBrown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#BC8F8F')\">#BC8F8F<\/a><\/td>\n        <td style=\"background-color:#BC8F8F;\" id=\"demo122\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#4169E1')\">RoyalBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#4169E1')\">#4169E1<\/a><\/td>\n        <td style=\"background-color:#4169E1;\" id=\"demo123\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8B4513')\">SaddleBrown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8B4513')\">#8B4513<\/a><\/td>\n        <td style=\"background-color:#8B4513;\" id=\"demo124\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FA8072')\">Salmon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FA8072')\">#FA8072<\/a><\/td>\n        <td style=\"background-color:#FA8072;\" id=\"demo125\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F4A460')\">SandyBrown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F4A460')\">#F4A460<\/a><\/td>\n        <td style=\"background-color:#F4A460;\" id=\"demo126\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#2E8B57')\">SeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#2E8B57')\">#2E8B57<\/a><\/td>\n        <td style=\"background-color:#2E8B57;\" id=\"demo127\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF5EE')\">SeaShell<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF5EE')\">#FFF5EE<\/a><\/td>\n        <td style=\"background-color:#FFF5EE;\" id=\"demo128\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A0522D')\">Sienna<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A0522D')\">#A0522D<\/a><\/td>\n        <td style=\"background-color:#A0522D;\" id=\"demo129\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#C0C0C0')\">Silver<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#C0C0C0')\">#C0C0C0<\/a><\/td>\n        <td style=\"background-color:#C0C0C0;\" id=\"demo130\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEEB')\">SkyBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEEB')\">#87CEEB<\/a><\/td>\n        <td style=\"background-color:#87CEEB;\" id=\"demo131\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#6A5ACD')\">SlateBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#6A5ACD')\">#6A5ACD<\/a><\/td>\n        <td style=\"background-color:#6A5ACD;\" id=\"demo132\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">SlateGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">#708090<\/a><\/td>\n        <td style=\"background-color:#708090;\" id=\"demo133\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">SlateGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">#708090<\/a><\/td>\n        <td style=\"background-color:#708090;\" id=\"demo134\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAFA')\">Snow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAFA')\">#FFFAFA<\/a><\/td>\n        <td style=\"background-color:#FFFAFA;\" id=\"demo135\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF7F')\">SpringGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF7F')\">#00FF7F<\/a><\/td>\n        <td style=\"background-color:#00FF7F;\" id=\"demo136\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#4682B4')\">SteelBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#4682B4')\">#4682B4<\/a><\/td>\n        <td style=\"background-color:#4682B4;\" id=\"demo137\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D2B48C')\">Tan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D2B48C')\">#D2B48C<\/a><\/td>\n        <td style=\"background-color:#D2B48C;\" id=\"demo138\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#008080')\">Teal<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#008080')\">#008080<\/a><\/td>\n        <td style=\"background-color:#008080;\" id=\"demo139\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D8BFD8')\">Thistle<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D8BFD8')\">#D8BFD8<\/a><\/td>\n        <td style=\"background-color:#D8BFD8;\" id=\"demo140\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF6347')\">Tomato<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF6347')\">#FF6347<\/a><\/td>\n        <td style=\"background-color:#FF6347;\" id=\"demo141\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#40E0D0')\">Turquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#40E0D0')\">#40E0D0<\/a><\/td>\n        <td style=\"background-color:#40E0D0;\" id=\"demo142\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#EE82EE')\">Violet<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#EE82EE')\">#EE82EE<\/a><\/td>\n        <td style=\"background-color:#EE82EE;\" id=\"demo143\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5DEB3')\">Wheat<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5DEB3')\">#F5DEB3<\/a><\/td>\n        <td style=\"background-color:#F5DEB3;\" id=\"demo144\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFFF')\">White<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFFF')\">#FFFFFF<\/a><\/td>\n        <td style=\"background-color:#FFFFFF;\" id=\"demo145\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5F5')\">WhiteSmoke<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5F5')\">#F5F5F5<\/a><\/td>\n        <td style=\"background-color:#F5F5F5;\" id=\"demo146\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFF00')\">Yellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFF00')\">#FFFF00<\/a><\/td>\n        <td style=\"background-color:#FFFF00;\" id=\"demo147\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9ACD32')\">YellowGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9ACD32')\">#9ACD32<\/a><\/td>\n        <td style=\"background-color:#9ACD32;\" id=\"demo148\"><\/td>\n    <\/tr>\n<\/table>\n\n<script>\nfunction changeColor(color) {\n    var demoCells = document.querySelectorAll('td[id^=\"demo\"]');\n    demoCells.forEach(function(cell) {\n        cell.style.backgroundColor = color;\n    });\n}\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;\">Compreendendo os Formatos de Cores em CSS<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Palavras-chave de Cores B\u00e1sicas <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A maneira mais simples de iniciar a experimenta\u00e7\u00e3o com cores em CSS \u00e9 utilizando palavras-chave b\u00e1sicas. Estas s\u00e3o denomina\u00e7\u00f5es de cores comuns como \u201cvermelho,\u201d \u201cazul,\u201d \u201cverde,\u201d \u201camarelo,\u201d e muitas outras. Existem mais de 140 palavras-chave de cores reconhecidas, oferecendo um ponto de partida adequado para escolhas de cores simples.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Exemplo<\/span><\/h4>\n\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;\">Palavras-chave de Cores Estendidas <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Deseja uma paleta de cores mais refinada? O CSS expande seu vocabul\u00e1rio com palavras-chave de cores estendidas. Estas oferecem tonalidades mais espec\u00edficas como \u201cturquesa,\u201d \u201ccoral,\u201d \u201clavanda,\u201d e \u201cazul-celeste.\u201d Imagine-as como as primas mais \u201csofisticadas\u201d das palavras-chave de cores b\u00e1sicas.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Exemplo<\/span><\/h4>\n\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>Dica:<\/b><span style=\"font-weight: 400;\"> Uma lista completa de palavras-chave de cores estendidas pode ser encontrada em diversos recursos. Estas frequentemente proporcionam uma gama surpreendentemente ampla de op\u00e7\u00f5es para a maioria das necessidades de design.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">C\u00f3digos de Cores Hexadecimais<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Os c\u00f3digos de cores hexadecimais abrem um vasto espectro de possibilidades de cores. Eles utilizam um c\u00f3digo de seis d\u00edgitos precedido por um s\u00edmbolo de cerquilha (#) e representam a quantidade de vermelho, verde e azul (RGB) na cor. Cada par de d\u00edgitos controla a intensidade de uma dessas cores prim\u00e1rias, variando de 00 (sem cor) a FF (intensidade m\u00e1xima).<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Exemplos<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">#FF0000 = Vermelho Puro<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">#008000 = Verde Puro<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">#0000FF = Azul Puro<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">#FFFFFF = Branco<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">#000000 = Preto<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Os c\u00f3digos hexadecimais permitem mais de 16 milh\u00f5es de combina\u00e7\u00f5es de cores! Eles s\u00e3o a forma mais comum de especificar cores no <a href=\"https:\/\/elementor.com\/blog\/pt-br\/7-melhores-criadores-de-sites-de-portfolio-de-year\/\" data-wpil-monitor-id=\"10365\">design web<\/a> devido \u00e0 sua precis\u00e3o.<\/span><\/p>\n<p><b>C\u00f3digos Hexadecimais Abreviados:<\/b><span style=\"font-weight: 400;\"> Por conveni\u00eancia, \u00e9 poss\u00edvel utilizar uma vers\u00e3o abreviada de tr\u00eas d\u00edgitos dos c\u00f3digos hexadecimais onde cada d\u00edgito \u00e9 duplicado (por exemplo, #FF0033 pode ser abreviado para #F03).<\/span><\/p>\n<p><b>Dica:<\/b><span style=\"font-weight: 400;\"> <a href=\"https:\/\/elementor.com\/blog\/pt-br\/conversor-online-de-px-para-polegadas-e-tabela-de-conversao\/\" data-wpil-monitor-id=\"10366\">Selecionadores de cores online e conversores<\/a> facilitam a localiza\u00e7\u00e3o do c\u00f3digo hexadecimal perfeito ou a convers\u00e3o entre diferentes formatos de cores. Experimente e explore esses recursos!<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Cores RGB e RGBA<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">RGB e RGBA proporcionam uma forma num\u00e9rica de definir cores com base em seus componentes vermelho, verde e azul.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Formato RGB<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Ele utiliza a <\/span><span style=\"font-weight: 400;\">fun\u00e7\u00e3o rgb()<\/span><span style=\"font-weight: 400;\"> . Cada valor de cor varia de 0 a 255, representando sua intensidade.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Exemplo<\/span><\/h4>\n\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>Por que RGBA? <\/b><span style=\"font-weight: 400;\">RGBA permite a cria\u00e7\u00e3o de cores semitransparentes, sobreposi\u00e7\u00f5es, efeitos de desvanecimento e designs sofisticados que brincam com camadas. \u00c9 uma ferramenta essencial para <a href=\"https:\/\/elementor.com\/blog\/pt-br\/32-melhores-fontes-de-escrita-manual-para-web-designers-em-year-eleve-seus-designs-com-personalidade-estilo\/\" data-wpil-monitor-id=\"10367\">designers web<\/a> modernos.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Tanto RGB quanto RGBA support o uso de porcentagens em vez de valores num\u00e9ricos (por exemplo, <\/span><span style=\"font-weight: 400;\">rgb(100%, 50%, 0%)<\/span><span style=\"font-weight: 400;\">). No entanto, o formato num\u00e9rico \u00e9 geralmente preferido em ambientes profissionais devido \u00e0 maior precis\u00e3o.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Cores HSL e HSLA <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">HSL significa Matiz, Satura\u00e7\u00e3o e Luminosidade. \u00c9 um modelo de cor que oferece uma maneira de expressar a cor mais alinhada com a forma como as percebemos intuitivamente:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Matiz<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">A cor real na roda de cores \u00e9 representada como um grau de 0 a 360:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">0\/360 = Vermelho<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">120 = Verde<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">240 = Azul<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Satura\u00e7\u00e3o<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">A intensidade ou vivacidade da cor \u00e9 expressa como uma porcentagem. 0% \u00e9 escala de cinza, enquanto 100% \u00e9 satura\u00e7\u00e3o total.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Luminosidade<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Qu\u00e3o clara ou escura a cor \u00e9 tamb\u00e9m expressa como uma porcentagem. 0% \u00e9 preto, 50% \u00e9 a matiz verdadeira e 100% \u00e9 branco.<\/span><\/p>\n<p><b>HSLA<\/b><span style=\"font-weight: 400;\"> adiciona o canal alfa para transpar\u00eancia, assim como o RGBA.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Exemplo<\/span><\/h4>\n\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>Por que HSL\/HSLA?<\/b><span style=\"font-weight: 400;\"> <\/span><\/h5>\n<p><span style=\"font-weight: 400;\">HSL\/HSLA \u00e9 frequentemente preferido por designers porque permite pensar sobre os componentes da cor independentemente. Deseja um tom ligeiramente mais claro da cor que est\u00e1 usando? Simplesmente ajuste o valor de luminosidade. Precisa de uma vers\u00e3o menos saturada? Diminua a satura\u00e7\u00e3o. Oferece uma maneira natural de manipular cores.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Manipula\u00e7\u00e3o de Cores em CSS<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Fun\u00e7\u00f5es de Cor <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">O CSS fornece fun\u00e7\u00f5es incorporadas que permitem modificar cores existentes diretamente em suas folhas de estilo. Essa abordagem din\u00e2mica oferece uma flexibilidade incr\u00edvel. Vamos examinar algumas fun\u00e7\u00f5es principais:<\/span><\/p>\n<p><b>lighten() e darken():<\/b><span style=\"font-weight: 400;\">  Essas fun\u00e7\u00f5es recebem uma cor e uma porcentagem. Elas ajustam a luminosidade da cor original, tornando-a mais clara ou mais escura, respectivamente.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Exemplo<\/span><\/h4>\n\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() e desaturate()<\/b><span style=\"font-weight: 400;\"> Semelhantes a lighten e darken, estas fun\u00e7\u00f5es ajustam a satura\u00e7\u00e3o (intensidade) de uma cor por uma porcentagem.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Exemplo<\/span><\/h4>\n\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>Benef\u00edcios das Fun\u00e7\u00f5es de Cor:<\/b><span style=\"font-weight: 400;\"> <\/span><\/h5>\n<p><span style=\"font-weight: 400;\">Essas fun\u00e7\u00f5es simplificam os ajustes, facilitando a cria\u00e7\u00e3o de varia\u00e7\u00f5es de uma cor base para manter um <a href=\"https:\/\/elementor.com\/blog\/pt-br\/esquemas-de-cores-complementares-no-design-web-um-guia-abrangente\/\" data-wpil-monitor-id=\"10368\">esquema de cores consistente em seus designs<\/a>.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Cores Relativas <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">As cores relativas do CSS proporcionam um not\u00e1vel poder de personaliza\u00e7\u00e3o. Elas permitem que voc\u00ea defina cores <\/span><i><span style=\"font-weight: 400;\">com base em uma cor existente<\/span><\/i><span style=\"font-weight: 400;\">. Isso \u00e9 incrivelmente \u00fatil ao criar uma paleta de cores consistente ou varia\u00e7\u00f5es entre elementos.<\/span><\/p>\n<p><b>Como funciona?<\/b><span style=\"font-weight: 400;\"> Voc\u00ea utiliza a palavra-chave <\/span><span style=\"font-weight: 400;\">from<\/span><span style=\"font-weight: 400;\">  seguida de uma cor base. Em seguida, voc\u00ea usa vari\u00e1veis como r, g, b e <\/span><span style=\"font-weight: 400;\">a<\/span><span style=\"font-weight: 400;\"> (representando vermelho, verde, azul e alfa) para modificar partes dessa cor base.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Exemplo<\/span><\/h4>\n\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;\">As cores relativas s\u00e3o particularmente \u00fateis quando \u00e9 necess\u00e1rio manter rela\u00e7\u00f5es crom\u00e1ticas, mesmo que uma cor base seja alterada em seu <a href=\"https:\/\/elementor.com\/blog\/pt-br\/carreira-em-design-de-web-em-year-habilidades-estrategias-e-oportunidades\/\" data-wpil-monitor-id=\"10369\">design web<\/a>.<\/span><\/p>\n<p><b>Nota:<\/b><span style=\"font-weight: 400;\"> As cores relativas s\u00e3o uma adi\u00e7\u00e3o relativamente recente ao CSS, portanto, embora o support do navegador esteja aumentando, \u00e9 uma boa pr\u00e1tica verificar a compatibilidade antes de utiliz\u00e1-las.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Atualiza\u00e7\u00f5es de Manipula\u00e7\u00e3o de Cores no CSS3<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Embora tenhamos abordado os m\u00e9todos fundamentais de manipula\u00e7\u00e3o de cores, \u00e9 importante observar que o CSS3 introduziu diversas novas e empolgantes maneiras de trabalhar com cores:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>HWB:<\/b><span style=\"font-weight: 400;\">  Este modelo de cor representa Matiz, Brancura e Negrura. Oferece outra forma de descrever cores de maneira intuitiva para o ser humano, que \u00e0s vezes \u00e9 preferida ao trabalhar com varia\u00e7\u00f5es de cor.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Lab e LCH:<\/b><span style=\"font-weight: 400;\"> Estes espa\u00e7os de cor s\u00e3o projetados para representar melhor a percep\u00e7\u00e3o humana das cores, oferecendo maior precis\u00e3o em determinados contextos.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fun\u00e7\u00e3o color-mix():<\/b><span style=\"font-weight: 400;\"> Esta fun\u00e7\u00e3o permite mesclar cores de v\u00e1rias maneiras diretamente no CSS, de forma semelhante aos modos de mesclagem em editores de imagens.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Embora esses recursos mais recentes ofere\u00e7am flexibilidade adicional, o support do navegador pode variar. Sempre verifique a compatibilidade se planeja incorpor\u00e1-los em seus projetos.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Contraste de Cores e Acessibilidade<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">As escolhas de cores impactam diretamente a acessibilidade de seu website para usu\u00e1rios com defici\u00eancias visuais. O contraste suficiente entre o texto e o plano de fundo \u00e9 essencial para a legibilidade.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Diretrizes WCAG:<\/b><span style=\"font-weight: 400;\"> As Diretrizes de Acessibilidade para Conte\u00fado Web (WCAG) definem propor\u00e7\u00f5es m\u00ednimas de contraste para diferentes tamanhos e estilos de texto para garantir que o conte\u00fado seja leg\u00edvel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ferramentas de Verifica\u00e7\u00e3o de Contraste:<\/b><span style=\"font-weight: 400;\"> Numerosas ferramentas online auxiliam na verifica\u00e7\u00e3o das propor\u00e7\u00f5es de contraste.<\/span> <\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">\u00c9 importante notar que o <a href=\"https:\/\/elementor.com\/blog\/pt-br\/explore-o-elementor-pro-condicoes-de-exibicao-permissoes-de-funcao-no-gerenciador-de-elementos-e-mais\/\" data-wpil-monitor-id=\"10370\">Elementor inclui ferramentas e recursos integrados<\/a> que facilitam a considera\u00e7\u00e3o da acessibilidade em seu processo de design. Esta men\u00e7\u00e3o sutil alinha-se com nossa estrat\u00e9gia geral de integrar o Elementor \u00e0 narrativa de forma fluida.<\/span><\/p>\n<p><b>Lembre-se &#8211;<\/b><span style=\"font-weight: 400;\"> O <a href=\"https:\/\/elementor.com\/blog\/pt-br\/31-melhores-fontes-seguras-para-web-para-design-acessivel\/\" data-wpil-monitor-id=\"10388\">design acess\u00edvel<\/a> n\u00e3o \u00e9 apenas uma boa pr\u00e1tica; ele expande o alcance e a inclusividade do seu website.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Teoria das Cores para Web Designers<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">O C\u00edrculo Crom\u00e1tico <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">O fundamento da teoria das cores reside no c\u00edrculo crom\u00e1tico. Este diagrama circular organiza as cores com base em suas rela\u00e7\u00f5es m\u00fatuas. Aqui est\u00e1 uma decomposi\u00e7\u00e3o de seus componentes essenciais:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Cores Prim\u00e1rias:<\/b><span style=\"font-weight: 400;\">  Vermelho, amarelo e azul. Estas s\u00e3o as <a href=\"https:\/\/elementor.com\/blog\/pt-br\/10-principais-ferramentas-de-analise-web-para-year-free-and-paid\/\" data-wpil-monitor-id=\"10389\">bases<\/a> de todas as outras cores.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Cores Secund\u00e1rias:<\/b><span style=\"font-weight: 400;\">  Laranja, verde e roxo. S\u00e3o criadas pela mistura de duas cores prim\u00e1rias.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Cores Terci\u00e1rias<\/b><span style=\"font-weight: 400;\"> s\u00e3o cores formadas pela mistura de uma cor prim\u00e1ria e uma secund\u00e1ria (por exemplo, amarelo-laranja, vermelho-violeta).<\/span><\/li>\n<\/ul>\n<p><b>Compreendendo o C\u00edrculo Crom\u00e1tico:<\/b><span style=\"font-weight: 400;\"> O c\u00edrculo crom\u00e1tico \u00e9 uma poderosa ferramenta de visualiza\u00e7\u00e3o para entender como as cores interagem e para criar combina\u00e7\u00f5es de cores intencionais.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Esquemas de Cores <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">O c\u00edrculo crom\u00e1tico fornece uma estrutura para criar paletas de cores harmoniosas. Aqui est\u00e3o alguns esquemas amplamente utilizados:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Complementar<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Cores diretamente opostas uma \u00e0 outra no c\u00edrculo crom\u00e1tico (por exemplo, vermelho e verde, azul e laranja). Estas criam alto contraste e vibra\u00e7\u00e3o.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">An\u00e1logo<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Cores localizadas adjacentes umas \u00e0s outras no c\u00edrculo crom\u00e1tico (por exemplo, vermelho, vermelho-alaranjado e laranja). Oferecem uma sensa\u00e7\u00e3o harmoniosa e frequentemente relaxante.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Tri\u00e1dico<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Tr\u00eas cores igualmente espa\u00e7adas ao redor do c\u00edrculo crom\u00e1tico (por exemplo, vermelho, amarelo e azul). Estes esquemas s\u00e3o ousados e din\u00e2micos.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Complementar Dividido<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Uma varia\u00e7\u00e3o das cores complementares em que se utilizam as duas cores adjacentes ao oposto direto de sua cor base, criando um equil\u00edbrio entre contraste e harmonia.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Tetr\u00e1dico (ou Duplo Complementar)<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Utiliza dois conjuntos de cores complementares, frequentemente formando um ret\u00e2ngulo no c\u00edrculo crom\u00e1tico. Isso oferece uma ampla gama de combina\u00e7\u00f5es de cores com grande versatilidade.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Monocrom\u00e1tico<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Varia\u00e7\u00f5es de um \u00fanico matiz utilizando diferentes valores de luminosidade e satura\u00e7\u00e3o (por exemplo, azul claro, azul m\u00e9dio e azul escuro). Esquemas monocrom\u00e1ticos evocam uma sensa\u00e7\u00e3o de unidade e eleg\u00e2ncia.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Dicas<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ferramentas Online:<\/b><span style=\"font-weight: 400;\"> Geradores de esquemas de cores podem ser recursos fant\u00e1sticos para experimenta\u00e7\u00e3o e para encontrar a combina\u00e7\u00e3o perfeita.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Equil\u00edbrio:<\/b><span style=\"font-weight: 400;\"> Embora combina\u00e7\u00f5es ousadas possam ser impactantes, \u00e9 importante estabelecer um equil\u00edbrio entre vibra\u00e7\u00e3o e coer\u00eancia visual em seu <a href=\"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-design-e-desenvolvimento-web-design-versus-desenvolvimento-front-end-versus-desenvolvimento-back-end\/\" data-wpil-monitor-id=\"10371\">design web<\/a>.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Psicologia das Cores<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">As escolhas de cores t\u00eam um impacto profundo na forma como as pessoas percebem e respondem emocionalmente ao seu website. Compreender a psicologia das cores permite-lhe evocar estados de esp\u00edrito e associa\u00e7\u00f5es espec\u00edficas.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Associa\u00e7\u00f5es Crom\u00e1ticas Comuns (Cultura Ocidental)<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Vermelho:<\/b><span style=\"font-weight: 400;\">  Paix\u00e3o, excita\u00e7\u00e3o, energia, mas tamb\u00e9m perigo ou urg\u00eancia. Utilize estrategicamente!<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Azul:<\/b><span style=\"font-weight: 400;\">  Confian\u00e7a, confiabilidade, tranquilidade, profissionalismo. Frequentemente popular em websites corporativos.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Verde:<\/b><span style=\"font-weight: 400;\">  Natureza, crescimento, harmonia, frescor. Frequentemente associado a marcas ambientalmente conscientes.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Amarelo:<\/b><span style=\"font-weight: 400;\">  Otimismo, felicidade, ludicidade. Pode ser excessivo se utilizado em demasia.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Laranja:<\/b><span style=\"font-weight: 400;\">  Calor, entusiasmo, acessibilidade. Excelente para chamadas \u00e0 a\u00e7\u00e3o.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Roxo:<\/b><span style=\"font-weight: 400;\">  Luxo, sofistica\u00e7\u00e3o, criatividade. Frequentemente utilizado em contextos art\u00edsticos ou espirituais.<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Considera\u00e7\u00f5es Importantes<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Contexto Cultural:<\/b><span style=\"font-weight: 400;\">  As associa\u00e7\u00f5es crom\u00e1ticas podem variar entre culturas. Realize pesquisas se estiver visando um p\u00fablico global.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Identidade da Marca:<\/b><span style=\"font-weight: 400;\"> Suas escolhas de cores devem alinhar-se com a personalidade geral da marca e sua mensagem.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Um <a href=\"https:\/\/elementor.com\/blog\/pt-br\/11-melhores-construtores-de-sites-para-blogs-em-year\/\" data-wpil-monitor-id=\"10372\">construtor de websites<\/a> como o Elementor permite-lhe experimentar e implementar a psicologia das cores. Seus seletores de cores intuitivos e <a href=\"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-13-construa-layouts-de-sites-leves-e-flexiveis-com-css-grid\/\" data-wpil-monitor-id=\"10390\">op\u00e7\u00f5es de estiliza\u00e7\u00e3o flex\u00edveis facilitam a personaliza\u00e7\u00e3o do aspecto visual e da sensa\u00e7\u00e3o do seu website<\/a> precisamente para a resposta emocional que deseja evocar.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">T\u00e9cnicas Avan\u00e7adas de CSS para Cores<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Gradientes<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Os gradientes criam transi\u00e7\u00f5es suaves entre duas ou mais cores, adicionando profundidade e interesse visual aos seus <a href=\"https:\/\/elementor.com\/blog\/web-design-statistics\/\" data-wpil-monitor-id=\"10373\">designs web<\/a>. O CSS oferece v\u00e1rios tipos de gradientes:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Gradientes Lineares<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">As cores transitam em uma linha reta. Voc\u00ea define uma dire\u00e7\u00e3o (por exemplo, \u201cto right\u201d, \u201cto bottom left\u201d) e pontos de parada de cor ao longo do caminho.<\/span><\/p>\n<h5><span style=\"font-weight: 400;\">Exemplo<\/span><\/h5>\n\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;\">Gradientes Radiais<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">As cores transitam para fora a partir de um ponto central, criando um efeito circular ou el\u00edptico.<\/span><\/p>\n<h5><span style=\"font-weight: 400;\">Exemplo<\/span><\/h5>\n\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;\">Gradientes Repetitivos<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Criam efeitos listrados ou padronizados repetindo um padr\u00e3o de gradiente.<\/span><\/p>\n<h5><span style=\"font-weight: 400;\">Exemplo<\/span><\/h5>\n\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;\">Dica &#8211; <\/span><b>Geradores de Gradientes:<\/b><span style=\"font-weight: 400;\"> Ferramentas online facilitam a cria\u00e7\u00e3o e personaliza\u00e7\u00e3o de gradientes.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Anima\u00e7\u00f5es e Transi\u00e7\u00f5es de Cores<\/span><\/h3>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/elementor.com\/blog\/text-color-css\/\" data-wpil-monitor-id=\"10374\">O CSS permite criar mudan\u00e7as suaves de cores<\/a>, adicionando um toque de intera\u00e7\u00e3o e apelo visual aos seus websites.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Transi\u00e7\u00f5es<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Altera\u00e7\u00f5es graduais nas propriedades de cor desencadeadas por um evento, como passar o mouse sobre um bot\u00e3o (<\/span><span style=\"font-weight: 400;\">propriedade transition<\/span><span style=\"font-weight: 400;\">).<\/span><\/p>\n\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;\">Anima\u00e7\u00f5es<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Mudan\u00e7as de cor mais complexas utilizando keyframes e a regra <\/span><span style=\"font-weight: 400;\">@keyframes<\/span><span style=\"font-weight: 400;\"> para definir pontos distintos na sequ\u00eancia de anima\u00e7\u00e3o.<\/span><\/p>\n\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;\">Aplica\u00e7\u00f5es<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Anima\u00e7\u00f5es e transi\u00e7\u00f5es de cores podem ser utilizadas para:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Elementos interativos (bot\u00f5es, links)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Destacar notifica\u00e7\u00f5es ou atualiza\u00e7\u00f5es<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Adicionar efeitos visuais l\u00fadicos<\/span><\/li>\n<\/ul>\n<p><b>Nota:<\/b><span style=\"font-weight: 400;\">  Utilize anima\u00e7\u00f5es de forma ponderada! O uso excessivo pode distrair em vez de aprimorar a <a href=\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/\" data-wpil-monitor-id=\"10375\">experi\u00eancia do usu\u00e1rio<\/a>.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Filtros CSS <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Os filtros CSS oferecem uma maneira poderosa de modificar a apar\u00eancia de elementos em seu website, incluindo imagens, fundos e at\u00e9 mesmo texto. Aqui est\u00e3o alguns filtros populares:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>grayscale():<\/b><span style=\"font-weight: 400;\"> Converte cores em tons de cinza.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>sepia():<\/b><span style=\"font-weight: 400;\"> Aplica um tom marrom vintage.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>saturate():<\/b><span style=\"font-weight: 400;\"> Aumenta ou diminui a satura\u00e7\u00e3o da cor.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>contrast():<\/b><span style=\"font-weight: 400;\"> Ajusta o contraste entre \u00e1reas claras e escuras.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>brightness():<\/b><span style=\"font-weight: 400;\"> Torna as cores mais claras ou escuras.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>blur():<\/b><span style=\"font-weight: 400;\"> Adiciona um efeito de desfoque.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>invert():<\/b><span style=\"font-weight: 400;\"> Inverte as cores.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>hue-rotate():<\/b><span style=\"font-weight: 400;\"> Desloca as cores ao longo do c\u00edrculo crom\u00e1tico.<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Exemplo<\/span><\/h4>\n\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;\">Dicas<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Os filtros podem ser combinados para efeitos \u00fanicos.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Utilize transi\u00e7\u00f5es para criar mudan\u00e7as suaves de filtro ao passar o mouse ou interagir.<\/span><\/li>\n<\/ol>\n<h3><b>Trabalhando com Vari\u00e1veis de Cor<\/b><span style=\"font-weight: 400;\"> <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">As vari\u00e1veis CSS (tamb\u00e9m conhecidas como propriedades customizadas) revolucionam a maneira como se gerencia cores e mant\u00e9m a consist\u00eancia visual em seus websites.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Como Elas Funcionam<\/span><\/h4>\n<h5><span style=\"font-weight: 400;\">Declarar<\/span><\/h5>\n<p><span style=\"font-weight: 400;\">As vari\u00e1veis s\u00e3o declaradas com dois tra\u00e7os (<\/span><span style=\"font-weight: 400;\">&#8212;<\/span><span style=\"font-weight: 400;\">) e um nome personalizado:<\/span><span style=\"font-weight: 400;\"><br \/><\/span><\/p>\n\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;\">Utilizar<\/span><\/h5>\n<p><span style=\"font-weight: 400;\">Utilize as <a href=\"https:\/\/elementor.com\/blog\/pt-br\/variaveis-em-css-a-funcao-var\/\" data-wpil-monitor-id=\"10376\">vari\u00e1veis com a fun\u00e7\u00e3o var()<\/a>:<\/span><\/p>\n\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;\">Benef\u00edcios<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Controle Centralizado:<\/b><span style=\"font-weight: 400;\"> Alterar uma vari\u00e1vel de cor atualiza todos os usos em sua folha de estilos.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Legibilidade Aprimorada:<\/b><span style=\"font-weight: 400;\"> Nomes de vari\u00e1veis significativos tornam seu CSS mais compreens\u00edvel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tematiza\u00e7\u00e3o:<\/b><span style=\"font-weight: 400;\"> Crie diferentes temas de cores alternando dinamicamente os valores das vari\u00e1veis.<\/span><\/li>\n<\/ol>\n<p><b>Pr\u00e9-processadores (Sass, Less):<\/b><span style=\"font-weight: 400;\">  Ferramentas como Sass e Less estendem o CSS com <a href=\"https:\/\/elementor.com\/blog\/pt-br\/novos-recursos-de-hospedagem-cache-avancado-ambiente-de-testes-e-duplicacao-de-paginas-para-melhorar-o-fluxo-de-trabalho\/\" data-wpil-monitor-id=\"10391\">recursos avan\u00e7ados<\/a>, incluindo vari\u00e1veis de cor, aninhamento e fun\u00e7\u00f5es de manipula\u00e7\u00e3o de cores. Embora n\u00e3o sejam estritamente necess\u00e1rios, eles otimizam ainda mais os fluxos de trabalho com cores.<\/span><\/p>\n<p><b>Nota:<\/b><span style=\"font-weight: 400;\">  As Vari\u00e1veis CSS possuem excelente support nos navegadores. Sempre verifique a compatibilidade ao visar navegadores mais antigos.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Escolhendo Cores para Seu Website<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Identidade Visual <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Caso possua uma identidade visual existente, suas <a href=\"https:\/\/elementor.com\/blog\/introducing-new-ecommerce-design-capabilities\/\" data-wpil-monitor-id=\"10377\">cores prim\u00e1rias do website devem alinhar-se com sua identidade de marca<\/a>. Isso assegura consist\u00eancia visual e fortalece o reconhecimento da marca. Considere estes aspectos:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Personalidade da Marca:<\/b><span style=\"font-weight: 400;\">  Quais emo\u00e7\u00f5es ou qualidades sua marca incorpora? Escolha cores que reflitam essas caracter\u00edsticas.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Logotipo:<\/b><span style=\"font-weight: 400;\"> \u00c9 poss\u00edvel extrair um esquema de cores dominante de seu logotipo para usar como base?<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Materiais de Marca Existentes:<\/b><span style=\"font-weight: 400;\"> Analise seus materiais de <a href=\"https:\/\/elementor.com\/blog\/pt-br\/qual-e-o-melhor-horario-para-postar-youtube-shorts\/\" data-wpil-monitor-id=\"10378\">marketing<\/a> impressos ou digitais para identificar temas de cores recorrentes.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">P\u00fablico-Alvo<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Compreender as prefer\u00eancias e expectativas de seu p\u00fablico-alvo \u00e9 crucial para escolhas eficazes de cores. Considere estes fatores:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Demografia:<\/b><span style=\"font-weight: 400;\">  Idade e g\u00eanero podem influenciar as associa\u00e7\u00f5es de cores. Por exemplo, p\u00fablicos mais jovens podem gravitar em dire\u00e7\u00e3o a paletas mais brilhantes e ousadas, enquanto p\u00fablicos mais velhos podem preferir tons mais suaves.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Contexto Cultural:<\/b><span style=\"font-weight: 400;\">  Os significados das cores variam entre culturas. Pesquise seus <a href=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/10\/marketing.png\" data-wpil-monitor-id=\"10379\">mercados<\/a>-alvo para evitar interpreta\u00e7\u00f5es err\u00f4neas.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ind\u00fastria e Nicho:<\/b><span style=\"font-weight: 400;\">  Ind\u00fastrias espec\u00edficas frequentemente possuem associa\u00e7\u00f5es convencionais de cores (por exemplo, sa\u00fade com azuis e verdes). Analise seus concorrentes para identificar padr\u00f5es comuns e como voc\u00ea pode se alinhar ou se diferenciar.<\/span><\/li>\n<\/ul>\n<p><b>Dica:<\/b><span style=\"font-weight: 400;\">  Embora considerar seu p\u00fablico seja vital, n\u00e3o permita que isso anule completamente sua identidade de marca. Busque um equil\u00edbrio aut\u00eantico que ressoe com seu <a href=\"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-um-mercado-alvo\/\" data-wpil-monitor-id=\"10380\">mercado-alvo<\/a>.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Tend\u00eancias de Web Design<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Manter-se ciente das atuais <a href=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/12\/web-design-trends.png\" data-wpil-monitor-id=\"10381\">tend\u00eancias de web design pode inspirar<\/a> paletas de cores frescas e manter seu website com apar\u00eancia moderna. No entanto, \u00e9 essencial equilibrar modernidade com princ\u00edpios de design atemporais:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Esquemas de Cores em Tend\u00eancia:<\/b><span style=\"font-weight: 400;\"> Pesquise plataformas como Dribbble ou Behance para identificar combina\u00e7\u00f5es de cores populares.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Monocrom\u00e1ticos Ousados:<\/b><span style=\"font-weight: 400;\"> Utilizar uma \u00fanica cor em diferentes tonalidades e satura\u00e7\u00f5es \u00e9 uma tend\u00eancia marcante.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Paletas Retr\u00f4:<\/b><span style=\"font-weight: 400;\">  A nostalgia est\u00e1 em alta! Tons past\u00e9is e suaves reminiscentes de d\u00e9cadas espec\u00edficas podem causar um impacto memor\u00e1vel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tend\u00eancias voltadas \u00e0 acessibilidade:<\/b><span style=\"font-weight: 400;\"> Tend\u00eancias focadas em paletas de alto contraste e amig\u00e1veis para dalt\u00f4nicos s\u00e3o vantajosas tanto para o design quanto para a inclusividade.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">N\u00e3o persiga tend\u00eancias cegamente. Escolha cores que se alinhem com a vis\u00e3o de longo prazo de sua marca. Incorporar elementos da moda como acentos ou em se\u00e7\u00f5es ef\u00eameras de seu site pode ser um bom equil\u00edbrio.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Conclus\u00e3o <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">As cores det\u00eam imenso poder no <a href=\"https:\/\/elementor.com\/blog\/pt-br\/como-criar-um-fluxo-de-trabalho-de-design-web-um-guia-completo\/\" data-wpil-monitor-id=\"10382\">web design<\/a>. Elas moldam a <a href=\"https:\/\/elementor.com\/blog\/announcing-scroll-snap-and-progress-tracker\/\" data-wpil-monitor-id=\"10383\">experi\u00eancia do usu\u00e1rio<\/a>, transmitem a identidade de sua marca e influenciam como as pessoas percebem seu website. Ao dominar os aspectos t\u00e9cnicos e art\u00edsticos da cor, voc\u00ea <a href=\"https:\/\/elementor.com\/blog\/pt-br\/12-exemplos-de-portfolios-de-design-de-sites-de-destaque\/\" data-wpil-monitor-id=\"10384\">criar\u00e1 websites visualmente impressionantes<\/a> que ressoam com seu p\u00fablico.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Pontos-Chave:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">O CSS proporciona uma vasta gama de op\u00e7\u00f5es para manipula\u00e7\u00e3o de cores, desde <a href=\"https:\/\/elementor.com\/blog\/pt-br\/como-usar-o-chatgpt-de-prompts-basicos-a-tecnicas-avancadas\/\" data-wpil-monitor-id=\"10392\">palavras-chave b\u00e1sicas at\u00e9 t\u00e9cnicas avan\u00e7adas<\/a> como gradientes e filtros.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A teoria das cores e a psicologia s\u00e3o suas aliadas ao fazer escolhas de design intencionais.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Considere a identidade visual, o <a href=\"https:\/\/elementor.com\/blog\/pt-br\/como-identificar-um-publico-alvo-para-o-seu-negocio\/\" data-wpil-monitor-id=\"10385\">p\u00fablico-alvo<\/a> e as tend\u00eancias atuais ao elaborar sua paleta de cores.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">N\u00e3o tenha receio de experimentar, tentar novas combina\u00e7\u00f5es e encontrar cores que despertem sua criatividade.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Um <a href=\"https:\/\/elementor.com\/blog\/pt-br\/9-melhores-construtores-de-sites-para-lojas-online-em-year\/\" data-wpil-monitor-id=\"10386\">construtor de sites<\/a> como o Elementor simplifica o processo de implementa\u00e7\u00e3o de seus belos esquemas de cores. Sua interface intuitiva, op\u00e7\u00f5es de personaliza\u00e7\u00e3o de cores e recursos orientados para o desempenho otimizam o <a href=\"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-um-wireframe-no-design-de-sitescomo-criar-processos-ferramentas\/\" data-wpil-monitor-id=\"10387\">processo de design web<\/a>, permitindo que voc\u00ea se concentre na express\u00e3o de sua vis\u00e3o.<\/span><\/p>\n\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>As cores s\u00e3o a ess\u00eancia do design web. Elas definem o ambiente, estabelecem a identidade de uma marca, direcionam o olhar do usu\u00e1rio e criam um impacto emocional duradouro. O CSS (Cascading Style Sheets) \u00e9 a linguagem que nos permite trazer essa vivacidade para a web. Ele nos proporciona um controle preciso sobre como as cores s\u00e3o aplicadas ao texto, planos de fundo, bordas e todos os outros elementos visuais de uma p\u00e1gina web.<\/p>\n","protected":false},"author":2024234,"featured_media":113336,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[517],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-126800","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-recursos-pt-br"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Cores CSS e HTML: Propriedades, C\u00f3digos, Palavras-chave e Nomes<\/title>\n<meta name=\"description\" content=\"As cores s\u00e3o a ess\u00eancia do design web. Elas definem o ambiente, estabelecem a identidade de uma marca, direcionam o olhar do usu\u00e1rio e criam um impacto emocional duradouro. O CSS (Cascading Style Sheets) \u00e9 a linguagem que nos permite trazer essa vivacidade para a web. Ele nos proporciona um controle preciso sobre como as cores s\u00e3o aplicadas ao texto, planos de fundo, bordas e todos os outros elementos visuais de uma p\u00e1gina web.\" \/>\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\/pt-br\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cores CSS e HTML: Propriedades, C\u00f3digos, Palavras-chave e Nomes\" \/>\n<meta property=\"og:description\" content=\"As cores s\u00e3o a ess\u00eancia do design web. Elas definem o ambiente, estabelecem a identidade de uma marca, direcionam o olhar do usu\u00e1rio e criam um impacto emocional duradouro. O CSS (Cascading Style Sheets) \u00e9 a linguagem que nos permite trazer essa vivacidade para a web. Ele nos proporciona um controle preciso sobre como as cores s\u00e3o aplicadas ao texto, planos de fundo, bordas e todos os outros elementos visuais de uma p\u00e1gina web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/pt-br\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/\" \/>\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-11-15T22:25:42+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=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\\\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/#\\\/schema\\\/person\\\/5d24783541c454816685653dfed73377\"},\"headline\":\"Cores CSS e HTML: Propriedades, C\u00f3digos, Palavras-chave e Nomes\",\"datePublished\":\"2025-07-01T05:10:21+00:00\",\"dateModified\":\"2025-11-15T22:25:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\\\/\"},\"wordCount\":3281,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Recursos\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\\\/\",\"name\":\"Cores CSS e HTML: Propriedades, C\u00f3digos, Palavras-chave e Nomes\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\\\/#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-11-15T22:25:42+00:00\",\"description\":\"As cores s\u00e3o a ess\u00eancia do design web. Elas definem o ambiente, estabelecem a identidade de uma marca, direcionam o olhar do usu\u00e1rio e criam um impacto emocional duradouro. O CSS (Cascading Style Sheets) \u00e9 a linguagem que nos permite trazer essa vivacidade para a web. Ele nos proporciona um controle preciso sobre como as cores s\u00e3o aplicadas ao texto, planos de fundo, bordas e todos os outros elementos visuais de uma p\u00e1gina web.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\\\/#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\\\/pt-br\\\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Recursos\",\"item\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/category\\\/recursos-pt-br\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Cores CSS e HTML: Propriedades, C\u00f3digos, Palavras-chave e Nomes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/#website\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/#\\\/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\\\/pt-br\\\/#\\\/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\\\/pt-br\\\/#\\\/schema\\\/person\\\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"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\\\/pt-br\\\/author\\\/itamarha\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cores CSS e HTML: Propriedades, C\u00f3digos, Palavras-chave e Nomes","description":"As cores s\u00e3o a ess\u00eancia do design web. Elas definem o ambiente, estabelecem a identidade de uma marca, direcionam o olhar do usu\u00e1rio e criam um impacto emocional duradouro. O CSS (Cascading Style Sheets) \u00e9 a linguagem que nos permite trazer essa vivacidade para a web. Ele nos proporciona um controle preciso sobre como as cores s\u00e3o aplicadas ao texto, planos de fundo, bordas e todos os outros elementos visuais de uma p\u00e1gina web.","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\/pt-br\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/","og_locale":"pt_BR","og_type":"article","og_title":"Cores CSS e HTML: Propriedades, C\u00f3digos, Palavras-chave e Nomes","og_description":"As cores s\u00e3o a ess\u00eancia do design web. Elas definem o ambiente, estabelecem a identidade de uma marca, direcionam o olhar do usu\u00e1rio e criam um impacto emocional duradouro. O CSS (Cascading Style Sheets) \u00e9 a linguagem que nos permite trazer essa vivacidade para a web. Ele nos proporciona um controle preciso sobre como as cores s\u00e3o aplicadas ao texto, planos de fundo, bordas e todos os outros elementos visuais de uma p\u00e1gina web.","og_url":"https:\/\/elementor.com\/blog\/pt-br\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/","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-11-15T22:25:42+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":{"Escrito por":"Itamar Haim","Est. tempo de leitura":"17 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/pt-br\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Cores CSS e HTML: Propriedades, C\u00f3digos, Palavras-chave e Nomes","datePublished":"2025-07-01T05:10:21+00:00","dateModified":"2025-11-15T22:25:42+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/"},"wordCount":3281,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Recursos"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/pt-br\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/pt-br\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/","url":"https:\/\/elementor.com\/blog\/pt-br\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/","name":"Cores CSS e HTML: Propriedades, C\u00f3digos, Palavras-chave e Nomes","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/#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-11-15T22:25:42+00:00","description":"As cores s\u00e3o a ess\u00eancia do design web. Elas definem o ambiente, estabelecem a identidade de uma marca, direcionam o olhar do usu\u00e1rio e criam um impacto emocional duradouro. O CSS (Cascading Style Sheets) \u00e9 a linguagem que nos permite trazer essa vivacidade para a web. Ele nos proporciona um controle preciso sobre como as cores s\u00e3o aplicadas ao texto, planos de fundo, bordas e todos os outros elementos visuais de uma p\u00e1gina web.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/pt-br\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/#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\/pt-br\/cores-css-e-html-propriedades-codigos-palavras-chave-e-nomes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/pt-br\/"},{"@type":"ListItem","position":2,"name":"Recursos","item":"https:\/\/elementor.com\/blog\/pt-br\/category\/recursos-pt-br\/"},{"@type":"ListItem","position":3,"name":"Cores CSS e HTML: Propriedades, C\u00f3digos, Palavras-chave e Nomes"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/pt-br\/#website","url":"https:\/\/elementor.com\/blog\/pt-br\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/pt-br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/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\/pt-br\/#\/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\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","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\/pt-br\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/126800","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/comments?post=126800"}],"version-history":[{"count":0,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/126800\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media\/113336"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media?parent=126800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/categories?post=126800"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/tags?post=126800"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_persona?post=126800"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_intent?post=126800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}