Como alterar a cor da fonte HTML

Quando se trata de personalizar seu site, a cor da fonte geralmente é esquecida. Na maioria dos casos, os proprietários de sites deixam a cor da fonte padrão como preto ou qualquer que seja o estilo de tema definido para a cor do corpo e do título do texto.

No entanto, é uma boa ideia alterar a cor da fonte HTML em seu site por vários motivos. Alterar a cor da fonte HTML pode parecer assustador, mas é bem simples. Existem várias maneiras de alterar a cor da fonte em seu site.

Nesta postagem, mostraremos diferentes maneiras de alterar a cor das fontes do seu site, além de discutir por que você deseja fazer isso em primeiro lugar.

Por que alterar a cor da fonte HTML?

Você gostaria de alterar a cor da fonte porque isso pode ajudar a melhorar a legibilidade e a acessibilidade do seu site. Por exemplo, se seu site usa um esquema de cores mais escuro, deixar a cor da fonte preta dificultaria a leitura do texto em seu site.

Outra razão pela qual você gostaria de considerar mudar a cor da fonte é se você for usar uma cor mais escura da paleta de cores da sua marca. Esta é mais uma oportunidade de reforçar a sua marca. Ele cria consistência de marca e garante que o texto em todos os seus canais de marketing tenha a mesma aparência.

Com isso fora do caminho, vamos ver como você pode definir e alterar a cor da fonte HTML.

Quando se trata de personalizar seu site, a cor da fonte geralmente passa despercebida... mas é uma edição simples que pode adicionar muita personalidade! Clique para Tweetar

Maneiras de definir a cor

Existem várias maneiras de definir cores no design da web, incluindo nome, valores RGB, códigos hexadecimais e valores HSL. Vamos dar uma olhada em como eles funcionam.

Nome da cor

Os nomes de cores são a maneira mais fácil de definir uma cor em seus estilos CSS. O nome da cor refere-se ao nome específico da cor HTML. Atualmente, há suporte para 140 nomes de cores e você pode usar qualquer uma dessas cores em seus estilos. Por exemplo, você pode usar “azul” para definir a cor de um elemento individual para azul.

No entanto, a desvantagem dessa abordagem é que nem todos os nomes de cores são suportados. Em outras palavras, se você usar uma cor que não está na lista de cores com suporte, não poderá usá-la em seu design pelo nome da cor.

Valores RGB e RGBA

Em seguida, temos os valores RGB e RGBA. O RGB significa Vermelho, Verde e Azul. Ele define a cor misturando valores de vermelho, verde e azul, da mesma forma que você misturaria uma cor em uma paleta real.

O valor RGB fica assim: RGB(153,0,255). O primeiro número especifica a entrada da cor vermelha, o segundo especifica a entrada da cor verde e o terceiro especifica o azul.

O valor de cada entrada de cor pode variar entre 0 e 255, onde 0 significa que a cor não está presente e 255 significa que a cor específica está em sua intensidade máxima.

O valor RGBA adiciona mais um valor à mistura, e esse é o valor alfa que representa a opacidade. Varia de 0 (não transparente) a 1 (totalmente transparente).

Valor HEX

Os códigos de cores hexadecimais funcionam de maneira semelhante aos códigos RGB. Eles consistem em números de 0 a 9 e letras de A a F. O código hexadecimal é assim: #800080. As duas primeiras letras especificam a intensidade da cor vermelha, os dois números do meio especificam a intensidade da cor verde e os dois últimos definem a intensidade da cor azul.

Valores HSL e HSLA

Outra maneira de definir cores em HTML é usar valores HSL. HSL significa matiz, saturação e leveza.

O matiz usa graus de 0 a 360. Em uma roda de cores padrão, o vermelho está em torno de 0/360, o verde está em 120 e o azul está em 240.

A saturação usa porcentagens para definir a saturação da cor. 0 representa preto e branco e 100 representa a cor completa.

Por fim, a leveza usa porcentagens de maneira semelhante à saturação. Nesse caso, 0% representa preto e 100% representa branco.

Por exemplo, a cor roxa que usamos ao longo deste artigo ficaria assim em HSL: hsl(276, 100%, 50%) .

HSL, como RGB, suporta opacidade. Nesse caso, você usaria o valor HSLA onde A representa alfa e é definido em um número de 0 a 1. se quisermos diminuir a opacidade do exemplo roxo, usaríamos este código: hsl(276, 100%, 50%, .85) .

Agora que você sabe como definir a cor, vamos ver diferentes maneiras de alterar a cor da fonte HTML.

O Antigo: <font> Tags

Antes que o HTML5 fosse introduzido e definido como padrão de codificação, você podia alterar a cor da fonte usando tags de fonte. Mais especificamente, você usaria a tag font com o atributo color para definir a cor do texto. A color foi especificada com seu nome ou com seu código hexadecimal.

Aqui está um exemplo de como esse código ficou com o código de cor hexadecimal:

 <font color="#800080">This text is purple.</font>

E é assim que você pode definir a cor do texto para roxo usando o nome da cor.

 <font color="purple">This text is purple.</font>

No entanto, a tag <font> está obsoleta em HTML5 e não é mais usada. Alterar a cor da fonte é uma decisão de design, e o design não é o objetivo principal do HTML. Portanto, faz sentido que as tags <font> não sejam mais suportadas em HTML5.

Então, se a tag <font> não for mais suportada, como você altera a cor da fonte HTML? A resposta é com Cascading Style Sheets ou CSS.

O Novo: Estilos CSS

Para alterar a cor da fonte HTML com CSS, você usará a propriedade de cor CSS emparelhada com o seletor apropriado. CSS permite que você use nomes de cores, valores RGB, hexadecimais e HSL para especificar a cor. Existem três maneiras de usar CSS para alterar a cor da fonte.

CSS embutido

CSS embutido é adicionado diretamente ao seu arquivo HTML. Você usará a tag HTML, como <p>, e a estilizará com a propriedade CSS color da seguinte forma:

 <p>This is a purple paragraph.</p>

Se você quiser usar um valor hexadecimal, seu código ficará assim:

 <p>This is a purple paragraph.</p>

Se você for usar o valor RGB, você o escreverá assim:

 <p>This is a purple paragraph.</p>

Por fim, usando os valores HSL, você usaria este código:

 <p>This is a purple paragraph.</p>

Os exemplos acima mostram como alterar a cor de um parágrafo em seu site. Mas você não está limitado apenas a parágrafos. Você pode alterar a cor da fonte de seus títulos e links.

Por exemplo, substituir a tag <p> acima por <h2> mudará a cor do texto do cabeçalho, enquanto a substituição pela tag <a> mudará a cor desse link. Você também pode usar o elemento <span> para colorir qualquer quantidade de texto.

Se você deseja alterar a cor de fundo de todo o parágrafo ou de um título, é muito semelhante a como você altera a cor da fonte. Você precisa usar o atributo background-color e usar o nome da cor, valores hexadecimais, RGB ou HSL para definir a cor. Aqui está um exemplo:

<p>

CSS incorporado

O CSS incorporado está dentro das tags <style> e colocado entre as tags head do seu documento HTML.

O código ficará assim se você quiser usar o nome da cor:

 <!DOCTYPE html> <html> <head> <style> <p> { color: purple; } </style> </head>

O código acima mudará a cor de cada parágrafo da página para roxo. Semelhante ao método CSS embutido, você pode usar seletores diferentes para alterar a cor da fonte de seus títulos e links.

Se você quiser usar o código hexadecimal, veja como o código ficaria:

 <!DOCTYPE html> <html> <head> <style> <p> { color: #800080; } </style> </head>

O exemplo abaixo usa os valores RBGA para que você possa ver um exemplo de configuração da opacidade:

 <!DOCTYPE html> <html> <head> <style> <p> { color: RGB(153,0,255,0.75), } </style> </head>

E o código HSL ficaria assim:

 <!DOCTYPE html> <html> <head> <style> <p> { color: hsl(276, 100%, 50%), } </style> </head>

CSS externo

Por fim, você pode usar CSS externo para alterar a cor da fonte em seu site. CSS externo é um CSS que é colocado em um arquivo de folha de estilo separado, geralmente chamado style.css ou stylesheet.css.

Esta folha de estilo é responsável por todos os estilos em seu site e especifica as cores e tamanhos de fonte, margens, preenchimentos, famílias de fontes, cores de fundo e muito mais. Resumindo, a folha de estilo é responsável pela aparência visual do seu site.

Para alterar a cor da fonte com CSS externo, você usaria seletores para estilizar as partes do HTML desejadas. Por exemplo, este código alterará todo o texto do corpo do seu site:

 body {color: purple;}

Lembre-se, você pode usar valores RGB, hexadecimal e HSL e não apenas os nomes das cores para alterar a cor da fonte. Se você deseja editar a folha de estilo, é recomendável fazê-lo em um editor de código.

Em linha, incorporado ou externo?

Então agora você sabe como usar CSS para alterar a cor da fonte. Mas qual método você deve usar?

Se você usar o código CSS embutido, você o adicionará diretamente ao seu arquivo HTML. De um modo geral, este método é adequado para correções rápidas. Se você deseja alterar a cor de um parágrafo ou título específico em uma única página, esse método é a maneira mais rápida e menos complicada de fazer isso.

No entanto, os estilos embutidos podem aumentar o tamanho do arquivo HTML. Quanto maior for o seu arquivo HTML, mais tempo levará para carregar sua página da web. Além disso, o CSS inline pode tornar seu HTML confuso. Como tal, o método inline de usar CSS para alterar a cor da fonte HTML geralmente é desencorajado.

O CSS incorporado é colocado entre as tags <head> e dentro das tags <style>. Assim como o CSS embutido, é bom para correções rápidas e sobrescrever os estilos especificados em uma folha de estilo externa.

Uma distinção notável entre estilos embutidos e incorporados é que eles se aplicam a qualquer página em que as tags de cabeçalho são carregadas, enquanto os estilos embutidos se aplicam apenas à página específica em que estão, normalmente o elemento que estão segmentando nessa página.

O último método, CSS externo, usa uma folha de estilo dedicada para definir seus estilos visuais. De um modo geral, é melhor usar uma folha de estilo externa para manter todos os seus estilos em um único local, de onde sejam fáceis de editar. Isso também separa a apresentação e o design, para que o código seja fácil de gerenciar e manter.

Lembre-se de que estilos embutidos e embutidos podem substituir estilos definidos na folha de estilo externa.

Tags de fonte ou estilos CSS: prós e contras

Os dois métodos principais de alterar as cores da fonte HTML são usar a tag de fonte ou estilos CSS. Ambos os métodos têm seus prós e contras.

Prós e contras de tags de fonte HTML

A tag de fonte HTML é fácil de usar, então isso é um profissional a seu favor. Normalmente falando, CSS é mais complicado e leva mais tempo para aprender do que digitar <font color="purple"> . Se você tiver um site antigo que não usa HTML5, a tag de fonte é um método viável de alterar a cor da fonte.

Mesmo que a tag de fonte seja fácil de usar, você não deve usá-la se seu site usar HTML. Como mencionado anteriormente, a tag de fonte foi preterida no HTML5. O uso de código obsoleto deve ser evitado, pois os navegadores podem parar de suportá-lo a qualquer momento. Isso pode fazer com que seu site seja quebrado e não funcione corretamente, ou pior, não seja exibido para seus visitantes.

Prós e contras do CSS

CSS, como a tag de fonte, tem seus prós e contras. A vantagem mais significativa de usar CSS é que é a maneira correta de alterar a cor da fonte e especificar todos os outros estilos do seu site.

Como mencionado anteriormente, ele separa a apresentação do design, o que torna seu código mais fácil de gerenciar e manter.

No lado negativo, CSS e HTML5 podem levar tempo para aprender e escrever corretamente em comparação com a maneira antiga de escrever código.

Tenha em mente que, com CSS, você tem diferentes maneiras de alterar a cor da fonte, e cada um desses métodos tem seu próprio conjunto de prós e contras, conforme discutido anteriormente.

Dicas para alterar a cor da fonte HTML

Agora que você sabe como alterar a cor da fonte HTML, aqui estão algumas dicas que irão ajudá-lo.

Use um seletor de cores

Em vez de escolher as cores aleatoriamente, use os seletores de cores para selecionar as cores certas. O benefício de um seletor de cores é que ele fornecerá o nome da cor e os valores hexadecimais, RGB e HSL corretos que você precisa usar em seu código.

Verifique o contraste

Texto escuro com fundo escuro e texto claro com fundo claro não funcionam bem juntos. Eles tornarão o texto do seu site difícil de ler. No entanto, você pode usar um verificador de contraste para garantir que as cores do seu site sejam acessíveis e o texto seja fácil de ler.

Encontre a cor usando o método de inspeção

Se você vir uma cor de que gosta em um site, poderá inspecionar o código para obter o valor hexadecimal, RGB ou HSL da cor. No Chrome, tudo o que você precisa fazer é apontar o cursor para a parte da página da Web que deseja inspecionar, clicar com o botão direito do mouse e selecionar Inspecionar . Isso abrirá o painel de inspeção de código, onde você poderá ver o código HTML de um site e os estilos correspondentes.

Quer mudar a cor da fonte em seu site? É simples! Este guia irá ajudá-lo a começar ️ Click to Tweet

Resumo

Alterar a cor da fonte HTML pode ajudar a melhorar a legibilidade e a acessibilidade do seu site. Também pode ajudá-lo a estabelecer a consistência da marca nos estilos do seu site.

Neste guia, você aprendeu sobre quatro maneiras diferentes de alterar a cor da fonte HTML: com nomes de cores, códigos hexadecimais, valores RGB e HSL.

Também abordamos como você pode alterar a cor da fonte com CSS embutido, incorporado e externo e usar a tag de fonte e os prós e contras de cada método. Até agora, você deve ter um bom entendimento de qual método você deve usar para alterar a cor da fonte HTML, então a única coisa que resta a fazer agora é implementar essas dicas em seu site.

Quais são seus pensamentos sobre como alterar a cor da fonte com CSS e tag de fonte? Deixe-nos saber na seção de comentários!