Por que mudar a cor da fonte HTML?<\/h2>\n
Voc\u00ea gostaria de mudar a cor da fonte porque fazer isso pode ajudar a melhorar a legibilidade e acessibilidade do seu site. Por exemplo, se o seu site usa um esquema de cores mais escuro, deixar a cor da fonte preta dificultaria a leitura do texto no seu site.<\/p>\n
Outra raz\u00e3o pela qual voc\u00ea gostaria de considerar mudar a cor da fonte \u00e9 se voc\u00ea usar\u00e1 uma cor mais escura da paleta de cores da sua marca. Esta \u00e9 mais uma oportunidade para refor\u00e7ar \u00e0 sua marca. Ela constr\u00f3i a consist\u00eancia da marca e garante que o texto em todos os seus canais de marketing tenha a mesma apar\u00eancia.<\/p>\n
Agora que isso foi esclarecido, vamos ver como voc\u00ea pode definir e alterar a cor da fonte no HTML<\/a>.<\/p>\n\n H\u00e1 v\u00e1rias maneiras de definir cores no web design, incluindo nome, valores RGB, c\u00f3digos hexadecimais e valores HSL. Vamos dar uma olhada em como eles funcionam.<\/p>\n Os nomes de cores<\/a> s\u00e3o a maneira mais f\u00e1cil de definir uma cor em seus estilos CSS. O nome da cor se refere ao nome espec\u00edfico para a cor HTML. Atualmente, existem 140 nomes de cores suportados, e voc\u00ea pode usar qualquer uma dessas cores em seus estilos. Por exemplo, voc\u00ea pode usar “blue” para definir a cor de um elemento individual para azul.<\/p>\n Entretanto, o lado negativo dessa abordagem \u00e9 que nem todos os nomes de cores s\u00e3o suportados. Em outras palavras, se voc\u00ea usar uma cor que n\u00e3o est\u00e1 na lista de cores suportadas, voc\u00ea n\u00e3o ser\u00e1 capaz de us\u00e1-la em seu design pelo nome da cor.<\/p>\n A seguir, n\u00f3s temos os valores RGB e RGBA<\/a>. O RGB significa Vermelho, Verde e Azul. Ele define a cor misturando os valores vermelho, verde e azul, de forma similar a como voc\u00ea misturaria uma cor em uma paleta real.<\/p>\n O valor RGB se parece com isso: RGB(153,0,255). O primeiro n\u00famero especifica a entrada da cor vermelha, o segundo especifica a entrada da cor verde, e o terceiro especifica o azul.<\/p>\n O valor de cada cor entrada pode variar entre 0 e 255, onde 0 significa que a cor n\u00e3o est\u00e1 presente e 255 significa que a cor em particular est\u00e1 em sua intensidade m\u00e1xima.<\/p>\n O valor do RGBA acrescenta mais um valor \u00e0 mistura, e esse \u00e9 o valor alfa que representa a opacidade. Ele varia de 0 (n\u00e3o transparente) a 1 (totalmente transparente).<\/p>\n Os c\u00f3digos de cores hexadecimais funcionam de forma similar aos c\u00f3digos RGB. Eles consistem de n\u00fameros de 0 a 9 e letras de A a F. O c\u00f3digo hexadecimal \u00e9 parecido com este: #800080. As duas primeiras letras especificam a intensidade da cor vermelha, os dois n\u00fameros do meio especificam a intensidade da cor verde e os dois \u00faltimos definem a intensidade da cor azul.<\/p>\n Outra maneira de definir cores em HTML \u00e9 usar valores HSL. HSL significa tonalidade, satura\u00e7\u00e3o e leveza.<\/p>\n A matiz usa graus de 0 a 360. Em uma roda de cor padr\u00e3o, o vermelho est\u00e1 em torno de 0\/360, o verde est\u00e1 em 120, e o azul est\u00e1 em 240.<\/p>\n A satura\u00e7\u00e3o usa porcentagens para definir o qu\u00e3o saturada est\u00e1 a cor. 0 representa o preto e branco, e 100 representa a cor completa.<\/p>\n Finalmente, a leveza usa porcentagens semelhantes \u00e0 satura\u00e7\u00e3o. Neste caso, 0% representa o preto e 100% representa o branco.<\/p>\n Por exemplo, a cor roxa que temos usado ao longo deste artigo ficaria assim na HSL: A HSL, assim como a RGB, suporta opacidade. Nesse caso, voc\u00ea usaria o valor HSLA onde A significa alfa sendo definido em um n\u00famero de 0 a 1. Se quis\u00e9ssemos baixar a opacidade do exemplo roxo, usar\u00edamos este c\u00f3digo: Agora que voc\u00ea sabe como definir cores, vamos olhar para diferentes maneiras de mudar a cor da fonte HTML.<\/p>\n Antes da introdu\u00e7\u00e3o do HTML5<\/a> e do estabelecimento do padr\u00e3o de codifica\u00e7\u00e3o, era poss\u00edvel alterar a cor da fonte usando as tags de fonte. Mais especificamente, voc\u00ea usaria a tag de fonte com o atributo Aqui est\u00e1 um exemplo de como este c\u00f3digo ficou com c\u00f3digo de cores hexadecimais:<\/p>\n E \u00e9 assim que voc\u00ea poderia definir a cor do texto para roxo usando o nome da cor.<\/p>\n Entretanto, a tag Ent\u00e3o se a tag Para mudar a cor da fonte HTML com CSS, voc\u00ea usar\u00e1 a propriedade de cor CSS emparelhada com o seletor apropriado. CSS<\/a> permite que voc\u00ea use nomes de cores, RGB, hexadecimal, e valores HSL para especificar a cor. H\u00e1 tr\u00eas maneiras de usar CSS para mudar a cor da fonte.<\/p>\n O CSS Inline \u00e9 adicionado diretamente ao seu arquivo HTML. Voc\u00ea usar\u00e1 a tag HTML tal como Se voc\u00ea quiser usar um valor hexadecimal, seu c\u00f3digo ser\u00e1 parecido com este:<\/p>\n Se voc\u00ea vai usar o valor RGB, voc\u00ea vai escrev\u00ea-lo assim:<\/p>\n Finalmente, usando os valores da HSL, voc\u00ea usaria este c\u00f3digo:<\/p>\n Os exemplos acima mostram como mudar a cor de um par\u00e1grafo em seu site. Mas voc\u00ea n\u00e3o est\u00e1 limitado apenas aos par\u00e1grafos. Voc\u00ea pode mudar a cor da fonte de seus cabe\u00e7alhos, bem como os links.<\/p>\n Por exemplo, a substitui\u00e7\u00e3o da tag Se voc\u00ea quiser mudar a cor de fundo do par\u00e1grafo inteiro ou de um cabe\u00e7alho, \u00e9 muito semelhante a como voc\u00ea mudaria a cor da fonte. Voc\u00ea tem que usar o atributo O CSS embutido est\u00e1 dentro das tags O c\u00f3digo ter\u00e1 este aspecto se voc\u00ea quiser usar o nome da cor:<\/p>\n O c\u00f3digo acima mudar\u00e1 a cor de cada par\u00e1grafo da p\u00e1gina para roxo. Similar ao m\u00e9todo CSS em linha, voc\u00ea pode usar seletores diferentes para mudar a cor da fonte dos seus cabe\u00e7alhos e links.<\/p>\n Se voc\u00ea quiser usar o c\u00f3digo hexadecimal, aqui est\u00e1 como o c\u00f3digo ficaria:<\/p>\n O exemplo abaixo usa os valores RBGA para que voc\u00ea possa ver um exemplo de ajuste da opacidade:<\/p>\n E o c\u00f3digo HSL ficaria assim:<\/p>\n Finalmente, voc\u00ea pode usar CSS externo<\/a> para mudar a cor da fonte em seu site. CSS externo \u00e9 CSS colocado em um arquivo separado da folha de estilo (stylesheet), geralmente chamado style.css ou stylesheet.css.<\/p>\n Esta folha de estilo \u00e9 respons\u00e1vel por todos os estilos em seu site e espec\u00edfica as cores e tamanhos das fontes, margens, padr\u00f5es, fam\u00edlias de fontes, cores de fundo, e muito mais. Em resumo, a folha de estilos (stylesheet) \u00e9 respons\u00e1vel pela apar\u00eancia visual do seu site.<\/p>\n Para mudar a cor da fonte com CSS externo, voc\u00ea usaria seletores<\/a> para estilizar as partes de HTML que voc\u00ea deseja. Por exemplo, este c\u00f3digo mudar\u00e1 todo o corpo do texto do seu site:<\/p>\n Lembre-se, voc\u00ea pode usar os valores RGB, hexadecimais e HSL e n\u00e3o apenas os nomes das cores para mudar a cor da fonte. Se voc\u00ea quiser editar a folha de estilo, \u00e9 recomend\u00e1vel fazer isso em um editor de c\u00f3digo<\/a>.<\/p>\n Ent\u00e3o agora voc\u00ea sabe como voc\u00ea pode usar o CSS para mudar a cor da fonte. Mas qual m\u00e9todo voc\u00ea deve usar?<\/p>\n Se voc\u00ea usar o c\u00f3digo CSS inline, voc\u00ea o adicionar\u00e1 diretamente ao seu arquivo HTML. Geralmente falando, este m\u00e9todo \u00e9 adequado para corre\u00e7\u00f5es r\u00e1pidas. Se voc\u00ea quiser mudar a cor de um par\u00e1grafo ou cabe\u00e7alho espec\u00edfico em uma \u00fanica p\u00e1gina, este m\u00e9todo \u00e9 a maneira mais r\u00e1pida e menos complicada de fazer isso.<\/p>\n Entretanto, estilos inline podem fazer o tamanho do seu arquivo HTML maior. Quanto maior for seu arquivo HTML, mais tempo levar\u00e1 para que sua p\u00e1gina web seja carregada. Al\u00e9m disso, o CSS inline pode fazer seu HTML ficar confuso. Como tal, o m\u00e9todo inline de usar CSS para mudar a cor da fonte HTML \u00e9 geralmente desencorajado.<\/p>\n O CSS embutido \u00e9 colocado entre as tags <head> e dentro da tag <style>. Como o CSS inline, ele \u00e9 bom para corre\u00e7\u00f5es r\u00e1pidas e sobreposi\u00e7\u00e3o aos estilos especificados em uma folha de estilo externa.<\/p>\n Uma diferen\u00e7a not\u00e1vel entre os estilos inline e os estilos incorporados \u00e9 que os estilos incorporados se aplicam a todas as p\u00e1ginas que carregam as tags head, enquanto os estilos inline se aplicam apenas \u00e0 p\u00e1gina espec\u00edfica em que est\u00e3o presentes, geralmente visando um elemento espec\u00edfico dessa p\u00e1gina.<\/p>\n O \u00faltimo m\u00e9todo, CSS externo, usa uma folha de estilo dedicada para definir seus estilos visuais. Geralmente falando, \u00e9 melhor usar uma folha de estilos externa para manter todos os seus estilos em um \u00fanico lugar, de onde eles s\u00e3o f\u00e1ceis de editar. Isso tamb\u00e9m separa apresenta\u00e7\u00e3o e design, assim o c\u00f3digo \u00e9 f\u00e1cil de gerenciar e manter.<\/p>\n Tenha em mente que os estilos inline e embutidos podem substituir os estilos definidos na folha de estilos externa.<\/p>\n Os dois m\u00e9todos prim\u00e1rios para mudar as cores da fonte HTML s\u00e3o usar a tag de fonte ou estilos CSS. Ambos os m\u00e9todos t\u00eam seus pr\u00f3s e contras.<\/p>\n A tag de fonte HTML \u00e9 f\u00e1cil de usar, o que \u00e9 uma vantagem. Em geral, o CSS \u00e9 mais complicado e leva mais tempo para ser aprendido do que simplesmente digitar Embora a tag de fonte seja f\u00e1cil de usar, voc\u00ea n\u00e3o deve us\u00e1-la se o seu site usa HTML. Como mencionado anteriormente, a tag de fonte foi descontinuada no HTML5. O uso de c\u00f3digo descontinuado deve ser evitado, pois os navegadores podem deixar de suport\u00e1-lo a qualquer momento. Isso pode causar a quebra do seu site, fazendo com que ele n\u00e3o funcione corretamente ou, pior ainda, n\u00e3o seja exibido para seus visitantes.<\/p>\n O CSS, assim como a tag da fonte, tem seus pr\u00f3s e contras. A vantagem mais significativa do uso do CSS \u00e9 que ele \u00e9 a maneira correta de mudar a cor da fonte e especificar todos os outros estilos para o seu site.<\/p>\n Como mencionado anteriormente, ele separa a apresenta\u00e7\u00e3o do projeto, tornando seu c\u00f3digo mais f\u00e1cil de gerenciar e manter.<\/p>\n Do lado negativo, CSS e HTML5 podem levar tempo para aprender e escrever corretamente em compara\u00e7\u00e3o com a antiga maneira de escrever c\u00f3digo.<\/p>\n Tenha em mente que com o CSS, voc\u00ea tem maneiras diferentes de mudar a cor da fonte, e cada um desses m\u00e9todos tem seu pr\u00f3prio conjunto de pr\u00f3s e contras, como discutido anteriormente.<\/p>\n Agora que voc\u00ea sabe como mudar a cor da fonte HTML, aqui est\u00e3o algumas dicas que o ajudar\u00e3o.<\/p>\n Ao inv\u00e9s de escolher cores aleatoriamente, use o color pickers<\/a> para escolher as cores certas. O benef\u00edcio de um selecionador de cores \u00e9 que ele lhe dar\u00e1 o nome da cor e os valores hexadecimais, RGB e HSL corretos que voc\u00ea precisa usar em seu c\u00f3digo.<\/p>\n Texto escuro com fundo escuro assim como texto claro com fundo claro n\u00e3o funcionam bem juntos. Eles tornar\u00e3o o texto em seu site dif\u00edcil de ler. Entretanto, voc\u00ea pode usar um verificador de contraste<\/a> para garantir que as cores do seu site estejam acess\u00edveis e que o texto seja f\u00e1cil de ler.<\/p>\nFormas de definir uma cor<\/h2>\n
Nome da cor<\/h3>\n
![\"Nomes](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/red-color-name.png\")
Valores RGB e RGBA<\/h3>\n
![\"Valores](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/rgb-values.png\")
Valor HEX<\/h3>\n
![\"Os](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/hex-values.png\")
Valores de HSL e HSLA<\/h3>\n
![\"Valores](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/HSL-color-values.png\")
hsl(276, 100%, 50%)<\/code>.<\/p>\nhsl(276, 100%, 50%, .85)<\/code> .<\/p>\nO antigo: Tag
<font><\/code><\/h2>\ncolor<\/code>\u00a0para definir a cor do texto. A cor era especificada tanto pelo seu nome quanto pelo seu c\u00f3digo hexadecimal.<\/p>\n<font color=\"#800080\">Este texto est\u00e1 roxo.<\/font><\/code><\/pre>\n<font color=\"purple\">Este texto est\u00e1 roxo.<\/font> <\/code><\/pre>\n<font><\/code> \u00e9 depreciada em HTML5 e n\u00e3o \u00e9 mais usada. Mudar a cor da fonte \u00e9 uma decis\u00e3o de design, e design n\u00e3o \u00e9 o prop\u00f3sito principal do HTML. Portanto, faz sentido que as tags <font><\/code> n\u00e3o sejam mais suportadas em HTML5.<\/p>\n<font><\/code> n\u00e3o \u00e9 mais suportada, como voc\u00ea muda a cor da fonte HTML? A resposta \u00e9 em Cascading Style Sheets ou CSS<\/a>.<\/p>\nO novo: Estilos CSS<\/h2>\n
CSS Inline<\/h3>\n
<p><\/code> e ent\u00e3o a estilizar\u00e1 com a propriedade de cor CSS assim:<\/p>\n<p style=\"color: purple\">Este \u00e9 um par\u00e1grafo roxo.<\/p><\/code><\/pre>\n<p style=\"color:#800080\">Este \u00e9 um par\u00e1grafo roxo.<\/p><\/code><\/pre>\n<p style=\"color:RGB(153,0,255)\">Este \u00e9 um par\u00e1grafo roxo.<\/p><\/code><\/pre>\n<p style=\"color:hsl(276, 100%, 50%)\">Este \u00e9 um par\u00e1grafo roxo.<\/p><\/code><\/pre>\n<p><\/code> acima do <h2><\/code> mudar\u00e1 a cor do texto daquele cabe\u00e7alho, enquanto a substitui\u00e7\u00e3o pela tag <a><\/code> mudar\u00e1 a cor daquele link. Voc\u00ea tamb\u00e9m pode usar o elemento <span><\/a> para colorir qualquer quantidade de texto.<\/p>\nbackground-color<\/code> e usar ou o nome da cor, hexadecimal, RGB, ou valores HSL para definir a cor. Aqui est\u00e1 um exemplo:<\/p>\n<p style=\"background-color: purple\"><\/code><\/pre>\nCSS embutido<\/h3>\n
<style><\/code> e colocado entre as tags do cabe\u00e7alho do seu documento HTML.<\/p>\n<!DOCTYPE html>\n<html>\n<head>\n <style>\n <p> {\n color: purple;\n }\n<\/style>\n<\/head><\/code><\/pre>\n<!DOCTYPE html>\n<html>\n<head>\n <style>\n <p> {\n color: #800080;\n }\n <\/style>\n<\/head><\/code><\/pre>\n<!DOCTYPE html>\n\n<html>\n\n<head>\n\n<style>\n\n<p> {\n\ncolor: RGB(153,0,255,0.75),\n\n}\n\n<\/style>\n\n<\/head><\/code><\/pre>\n<!DOCTYPE html>\n<html>\n<head>\n <style>\n <p> {\n color: hsl(276, 100%, 50%),\n }\n <\/style>\n<\/head><\/code><\/pre>\nCSS externo<\/h3>\n
body {color: purple;}<\/code><\/pre>\nInline, Embutido, ou Externo?<\/h3>\n
Tags de fontes ou estilos CSS: Pr\u00f3s e contras<\/h2>\n
Pr\u00f3s e contras de tag da fonte HTML<\/h3>\n
<font color=\"purple\"><\/code>. Se voc\u00ea possui um site antigo que n\u00e3o usa HTML5, a tag de fonte \u00e9 um m\u00e9todo vi\u00e1vel para mudar a cor da fonte.<\/p>\nPr\u00f3s e contras do CSS<\/h3>\n
Dicas para mudar a cor da fonte HTML<\/h2>\n
Use o Color Picker<\/h3>\n
![\"Os](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/Color-picker-tool.png\")
Verifique o contraste<\/h3>\n
![\"Use](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/Checking-contrast.png\")
Encontre a cor usando o m\u00e9todo Inspecionar<\/h3>\n
![\"Usando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/Using-Inspect-to-get-color-codes.png\")