{"id":51714,"date":"2024-12-26T12:00:00","date_gmt":"2024-12-26T15:00:00","guid":{"rendered":"https:\/\/www.locaweb.com.br\/blog\/?p=51714"},"modified":"2025-01-09T15:39:49","modified_gmt":"2025-01-09T18:39:49","slug":"cores-html","status":"publish","type":"post","link":"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/cores-html\/","title":{"rendered":"Cores HTML: tabela e principais c\u00f3digos\u00a0"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><em>Conhe\u00e7a os c\u00f3digos para as principais cores HTML e tenha acesso a diversas refer\u00eancias para ajudar na cria\u00e7\u00e3o dos seus projetos.\u202f<\/em>&nbsp;<\/p>\n\n\n\n<p>As cores HTML s\u00e3o essenciais quando se fala em\u202f<a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/marketing-e-seo\/como-criar-um-site\/\" target=\"_blank\" rel=\"noreferrer noopener\">como criar um site<\/a>, uma vez que elas influenciam diretamente no design das p\u00e1ginas e na experi\u00eancia do usu\u00e1rio.&nbsp;<\/p>\n\n\n\n<p>Nesse sentido, conhecer a tabela com os principais tons \u00e9 fundamental para quem trabalha com cria\u00e7\u00e3o de p\u00e1ginas,\u202f<strong>principalmente se o objetivo \u00e9 desenvolver um layout atraente e intuitivo<\/strong>.<strong>\u202f<\/strong>&nbsp;<\/p>\n\n\n\n<p>Neste artigo, reunimos informa\u00e7\u00f5es sobre o assunto, desde os c\u00f3digos mais usados at\u00e9 a escolha dos padr\u00f5es ideais para diferentes elementos. Confira!&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Tabela de cores HTML<\/strong>&nbsp;<\/h2>\n\n\n\n<p>As cores podem ser aplicadas em v\u00e1rios formatos,<strong>\u202fcomo hexadecimal, RGB, RGBA, HSL e HSLA<\/strong>.<strong>\u202f<\/strong>Cada padr\u00e3o tem uma forma diferente de representar os diferentes tons e \u00e9 utilizado conforme o projeto.\u202f&nbsp;<\/p>\n\n\n\n<p>Por conta disso, a tabela de cores HTML \u00e9 uma ferramenta valiosa para desenvolvedores. Ela oferece os principais c\u00f3digos, que podem ser aplicados diretamente em tags\u202f<a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/html-guia-completo-sobre-a-principal-linguagem-da-internet\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML<\/a>\u202fe tamb\u00e9m no CSS. Confira a seguir.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"827\" height=\"500\" src=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-1-1-827x500.jpg\" alt=\"Tabela de cores HTML 1.\" class=\"wp-image-51843\" srcset=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-1-1-827x500.jpg 827w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-1-1-500x302.jpg 500w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-1-1-768x464.jpg 768w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-1-1-606x366.jpg 606w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-1-1-340x205.jpg 340w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-1-1-240x145.jpg 240w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-1-1-150x91.jpg 150w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-1-1.jpg 842w\" sizes=\"(max-width: 827px) 100vw, 827px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"827\" height=\"500\" src=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-2-3-827x500.jpg\" alt=\"Tabela de cores HTML 2.\" class=\"wp-image-51844\" srcset=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-2-3-827x500.jpg 827w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-2-3-500x302.jpg 500w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-2-3-768x464.jpg 768w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-2-3-606x366.jpg 606w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-2-3-340x205.jpg 340w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-2-3-240x145.jpg 240w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-2-3-150x91.jpg 150w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-2-3.jpg 844w\" sizes=\"(max-width: 827px) 100vw, 827px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"828\" height=\"500\" src=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-3-1-828x500.jpg\" alt=\"Tabela de cores HTML 3.\" class=\"wp-image-51846\" srcset=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-3-1-828x500.jpg 828w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-3-1-500x302.jpg 500w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-3-1-768x464.jpg 768w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-3-1-606x366.jpg 606w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-3-1-340x205.jpg 340w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-3-1-240x145.jpg 240w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-3-1-150x91.jpg 150w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-3-1.jpg 843w\" sizes=\"(max-width: 828px) 100vw, 828px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"828\" height=\"500\" src=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-4-1-828x500.jpg\" alt=\"Tabela de cores HTML 4.\" class=\"wp-image-51847\" srcset=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-4-1-828x500.jpg 828w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-4-1-500x302.jpg 500w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-4-1-768x464.jpg 768w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-4-1-606x366.jpg 606w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-4-1-340x205.jpg 340w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-4-1-240x145.jpg 240w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-4-1-150x91.jpg 150w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-4-1.jpg 843w\" sizes=\"(max-width: 828px) 100vw, 828px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"827\" height=\"500\" src=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-5-1-827x500.jpg\" alt=\"Tabela de cores HTML 5.\" class=\"wp-image-51848\" srcset=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-5-1-827x500.jpg 827w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-5-1-500x302.jpg 500w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-5-1-768x464.jpg 768w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-5-1-606x366.jpg 606w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-5-1-340x205.jpg 340w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-5-1-240x145.jpg 240w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-5-1-150x91.jpg 150w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-5-1.jpg 842w\" sizes=\"(max-width: 827px) 100vw, 827px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"828\" height=\"500\" src=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-6-828x500.jpg\" alt=\"Tabela de cores HTML 6.\" class=\"wp-image-51850\" srcset=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-6-828x500.jpg 828w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-6-500x302.jpg 500w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-6-768x464.jpg 768w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-6-606x366.jpg 606w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-6-340x205.jpg 340w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-6-240x145.jpg 240w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-6-150x91.jpg 150w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/12\/cores-html-6.jpg 843w\" sizes=\"(max-width: 828px) 100vw, 828px\" \/><\/figure>\n\n\n\n<p><strong>Leia mais<\/strong>:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/marketing-e-seo\/psicologia-das-cores-no-marketing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Como usar a psicologia das cores no marketing?<\/a>&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/o-que-e-html-semantico\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML Sem\u00e2ntico: saiba como us\u00e1-lo nos seus projetos web<\/a>&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/de-olho-no-digital\/como-fazer-o-chatgpt-criar-imagens-para-o-seu-site\/\" target=\"_blank\" rel=\"noreferrer noopener\">Como fazer o ChatGPT criar imagens para o seu site<\/a>&nbsp;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Cores HTML e CSS<\/strong>&nbsp;<\/h2>\n\n\n\n<p>As cores no HTML podem ser definidas em CSS, a linguagem de estilos que personaliza o layout de uma p\u00e1gina. A seguir, vamos detalhar os padr\u00f5es mais comuns.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>RGB<\/strong>&nbsp;<\/h3>\n\n\n\n<p>O Red, Green and Blue\u202f<strong>\u00e9 baseado em uma combina\u00e7\u00e3o de luzes vermelha, verde e azul, que formam as cores<\/strong>. A sintaxe \u00e9 rgb (255, 255, 255), sendo que cada n\u00famero varia de 0 a 255.\u202f&nbsp;<\/p>\n\n\n\n<p>O RGB \u00e9 amplamente utilizado em displays digitais por permitir uma vasta gama de tons e brilho, facilitando a harmoniza\u00e7\u00e3o entre os elementos de uma p\u00e1gina.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Cores hexadecimais<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Esses c\u00f3digos s\u00e3o muito populares no HTML e no CSS.\u202f<strong>Eles s\u00e3o representados pelo s\u00edmbolo # seguido por seis caracteres que formam uma combina\u00e7\u00e3o entre 0-9 e A-F<\/strong>.<strong>\u202f<\/strong>&nbsp;<\/p>\n\n\n\n<p>Por exemplo, o c\u00f3digo #FFFFFF representa o branco, enquanto o #000000 indica o preto. Nesse sentido, este padr\u00e3o \u00e9 excelente para quem busca precis\u00e3o nas cores e quer um controle r\u00e1pido na codifica\u00e7\u00e3o.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>RGBA<\/strong>&nbsp;<\/h3>\n\n\n\n<p>\u00c9 uma extens\u00e3o do RGB, que\u202f<strong>permite definir a opacidade de uma cor por meio de um quarto par\u00e2metro chamado Alpha<\/strong>.<strong>\u202f<\/strong>&nbsp;<\/p>\n\n\n\n<p>Este valor varia de 0 a 1, sendo 0 completamente transparente e 1 totalmente opaco. Por exemplo: rgba (255, 0, 0, 0.5) cria um vermelho com 50% de translucidez.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>HSL<\/strong>&nbsp;<\/h3>\n\n\n\n<p>O modelo Hue, Saturation and Lightness \u00e9 intuitivo e representa cor, satura\u00e7\u00e3o e luminosidade.\u202f&nbsp;<\/p>\n\n\n\n<p><strong>Ele \u00e9 frequentemente utilizado para definir cores suaves e elegantes<\/strong>, permitindo ajustes de tonalidade sem precisar recorrer a c\u00f3digos complexos.\u202f&nbsp;<\/p>\n\n\n\n<p>A sintaxe \u00e9 hsl (360, 100%, 50%), em que cada valor ajusta o tom, a intensidade e o brilho.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>HSLA<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Assim como o RGBA, esse modelo \u00e9 uma varia\u00e7\u00e3o do HSL com uma camada de opacidade, permitindo chegar a cores transl\u00facidas. <strong>Este recurso \u00e9 \u00fatil para efeitos de sobreposi\u00e7\u00e3o ou degrad\u00ea<\/strong>, ajudando a criar visuais mais ricos e modernos.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Qual padr\u00e3o de cores escolher?<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Cada alternativa oferece vantagens distintas. A op\u00e7\u00e3o por uma delas\u202f<strong>depende do objetivo visual e funcional do seu site<\/strong>.<strong>\u202f<\/strong>&nbsp;<\/p>\n\n\n\n<p>O RGB e o hexadecimal s\u00e3o \u00f3timos para representa\u00e7\u00f5es s\u00f3lidas e vibrantes, enquanto o HSL \u00e9 ideal para um ajuste mais refinado de satura\u00e7\u00e3o e brilho.\u202f&nbsp;<\/p>\n\n\n\n<p>J\u00e1 para sites interativos, o RGBA e o HSLA permitem um controle sobre a transpar\u00eancia, dando flexibilidade na cria\u00e7\u00e3o de layouts com camadas ou gradientes.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como escolher as cores ideais para um site?<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Selecionar uma paleta para um projeto \u00e9 uma etapa estrat\u00e9gica. Afinal, as diferentes tonalidades afetam a percep\u00e7\u00e3o, o humor e, at\u00e9 mesmo, a navega\u00e7\u00e3o do usu\u00e1rio.&nbsp;<\/p>\n\n\n\n<p>Caso esteja pensando nessa quest\u00e3o, \u00e9 interessante levar em considera\u00e7\u00e3o algumas quest\u00f5es relativas \u00e0 sua p\u00e1gina:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Identificar o p\u00fablico-alvo<\/strong>: tons vibrantes atraem p\u00fablicos jovens, enquanto nuances neutras s\u00e3o recomendadas para sites corporativos.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Manter a consist\u00eancia com a marca<\/strong>: utilize cores que j\u00e1 est\u00e3o associadas \u00e0 identidade visual do neg\u00f3cio.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Considerar o contraste<\/strong>: isso ajuda na leitura e na acessibilidade.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Usar ferramentas de paleta de cores<\/strong>: recursos como Adobe Color e Coolors podem ser \u00fateis para garantir composi\u00e7\u00f5es harmoniosas.&nbsp;<\/li>\n<\/ul>\n\n\n\n<iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/biSJloc9Vx0?si=jH37YN4MudRcBl3M\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como aplicar cores nos elementos HTML?<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Para aplicar cores em elementos HTML, \u00e9 poss\u00edvel usar as tags style inline ou definir estilos diretamente em um arquivo\u202f<a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/css\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS<\/a>. Saiba como fazer isso de forma pr\u00e1tica.&nbsp;<\/p>\n\n\n\n<p><em>&lt;!&#8211; Exemplo de cor inline usando HTML &#8211;&gt;<\/em>&nbsp;<br><em>&lt;p style=&#8221;color: #FF5733;&#8221;&gt;Texto com cor personalizada.&lt;\/p&gt;<\/em>&nbsp;<\/p>\n\n\n\n<p>Para aplica\u00e7\u00f5es maiores, o uso de um arquivo CSS \u00e9 recomendado:&nbsp;<\/p>\n\n\n\n<p><em>\/* Definindo cor de fundo e texto para um site *\/<\/em>&nbsp;<br><em>body {<\/em>&nbsp;<br><em>\u202f \u202f background-color: #f0f0f0;<\/em>&nbsp;<br><em>\u202f \u202f color: #333333;<\/em>&nbsp;<br><em>}<\/em>&nbsp;<\/p>\n\n\n\n<p>Essas s\u00e3o formas b\u00e1sicas e pr\u00e1ticas de adicionar cor, que ajudam a criar identidade visual e real\u00e7ar elementos importantes da p\u00e1gina.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como modificar as cores das tags HTML inline?<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Em HTML, \u00e9 poss\u00edvel aplicar cores diretamente nas tags utilizando o atributo style. Isso permite alterar elementos espec\u00edficos,\u202f<strong>sem precisar criar uma regra CSS dedicada<\/strong>.&nbsp;<\/p>\n\n\n\n<p><em>&lt;!&#8211; Exemplo de aplica\u00e7\u00e3o de cor inline &#8211;&gt;<\/em>&nbsp;<br><em>&lt;h1 style=&#8221;color: #2E8B57;&#8221;&gt;T\u00edtulo em verde&lt;\/h1&gt;<\/em>&nbsp;<br><em>&lt;p style=&#8221;background-color: #FFD700;&#8221;&gt;Par\u00e1grafo com fundo amarelo&lt;\/p&gt;<\/em>&nbsp;<\/p>\n\n\n\n<p>A aplica\u00e7\u00e3o inline \u00e9 pr\u00e1tica para ajustes r\u00e1pidos ou elementos \u00fanicos que n\u00e3o precisam de estilo global. Por\u00e9m, lembre-se: para elementos que se repetem,\u202f<strong>o melhor \u00e9 usar classes e IDs com CSS<\/strong>.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como alterar as cores por CSS externo?<\/strong>&nbsp;<\/h2>\n\n\n\n<p>A estiliza\u00e7\u00e3o com CSS\u202f<strong>permite definir a paleta de cores para todo o site em um \u00fanico arquivo<\/strong>, garantindo consist\u00eancia visual e facilitando a manuten\u00e7\u00e3o. Por exemplo:&nbsp;<\/p>\n\n\n\n<p><em>\/* Aplicando cores em classes espec\u00edficas *\/<\/em>&nbsp;<br><em>.header {<\/em>&nbsp;<br><em>\u202f \u202f background-color: #1E90FF;<\/em>&nbsp;<br><em>\u202f \u202f color: #FFFFFF;<\/em>&nbsp;<br><em>}<\/em>&nbsp;<br><em>.footer {<\/em>&nbsp;<br><em>\u202f \u202f background-color: #333333;<\/em>&nbsp;<br><em>\u202f \u202f color: #CCCCCC;<\/em>&nbsp;<br><em>}<\/em>&nbsp;<\/p>\n\n\n\n<p>Com isso, ao modificar um \u00fanico valor no CSS, todas as inst\u00e2ncias que utilizam aquela classe ser\u00e3o alteradas automaticamente. Isso, por sua vez, proporciona efici\u00eancia na atualiza\u00e7\u00e3o de um site.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como usar CSS em criadores e hospedagem de sites?<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Al\u00e9m de aplicar cores manualmente via CSS, um\u202f<a href=\"https:\/\/www.locaweb.com.br\/criador-de-sites\/\" target=\"_blank\" rel=\"noreferrer noopener\">criador de sites<\/a>\u202fcomo o da Locaweb conta com interfaces visuais que permitem ajustes desse tipo, facilitando a escolha da paleta e permitindo a pr\u00e9-visualiza\u00e7\u00e3o de mudan\u00e7as em tempo real.\u202f&nbsp;<\/p>\n\n\n\n<p>Em geral, plataformas de\u202f<a href=\"https:\/\/www.locaweb.com.br\/hospedagem-de-sites-com-dominio-gratis\/\" target=\"_blank\" rel=\"noreferrer noopener\">hospedagem de sites<\/a>\u202foferecem esses recursos integrados para personalizar rapidamente o visual das p\u00e1ginas.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclus\u00e3o<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Conhecer a tabela de cores HTML e dominar os principais c\u00f3digos para aplic\u00e1-las \u00e9 uma habilidade essencial na cria\u00e7\u00e3o de sites.\u202f&nbsp;<\/p>\n\n\n\n<p>Como observamos ao longo deste artigo, existem diversos padr\u00f5es, e cada um deles atende a diferentes necessidades de design.&nbsp;<\/p>\n\n\n\n<p>Seja utilizando c\u00f3digos inline ou arquivos CSS,\u202f<strong>saber como escolher e implementar as cores HTML ideais ajuda a criar sites mais atrativos e funcionais<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Considere a combina\u00e7\u00e3o que melhor representa a sua marca e facilita a navega\u00e7\u00e3o dos visitantes, mantendo um bom contraste e garantindo a acessibilidade.&nbsp;<\/p>\n\n\n\n<p>Lembre-se:\u202f<strong>um site devidamente estruturado e visualmente agrad\u00e1vel eleva a experi\u00eancia do usu\u00e1rio e fortalece a presen\u00e7a digital<\/strong>!&nbsp;<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Conhe\u00e7a os c\u00f3digos para as principais cores HTML e tenha acesso a diversas refer\u00eancias para ajudar na cria\u00e7\u00e3o dos seus projetos.\u202f&nbsp; As cores HTML s\u00e3o essenciais quando se fala em\u202fcomo criar um site, uma vez que elas influenciam diretamente no design das p\u00e1ginas e na experi\u00eancia do usu\u00e1rio.&nbsp; Nesse sentido, conhecer a tabela com os [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":51736,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-51714","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-aberto"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/51714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/comments?post=51714"}],"version-history":[{"count":16,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/51714\/revisions"}],"predecessor-version":[{"id":51856,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/51714\/revisions\/51856"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media\/51736"}],"wp:attachment":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media?parent=51714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/categories?post=51714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/tags?post=51714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}