Como Mudar a Cor da Fonte HTML

Quando se trata de personalizar o seu site, a cor da fonte muitas vezes é negligenciada. Na maioria dos casos, os proprietários de sites deixam a cor padrão da fonte como preto ou qualquer que seja seu estilo do tema definido para o corpo e cor do texto do cabeçalho.

Entretanto, é uma boa idéia mudar a cor da fonte HTML em seu site por várias razões. Mudar a cor da fonte HTML pode parecer assustador, mas é bastante simples. Há várias maneiras de mudar a cor da fonte em seu site.

Neste artigo, nós lhe mostraremos diferentes maneiras de mudar a cor das fontes do seu site, assim como discutiremos porque você gostaria de fazer isso em primeiro lugar.

Confira nosso guia em vídeo para mudar a cor da fonte HTML

Por que mudar a cor da fonte HTML?

Você 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.

Outra razão pela qual você gostaria de considerar mudar a cor da fonte é se você vai usar uma cor mais escura da paleta de cores da sua marca. Esta é mais uma oportunidade para reforçar a sua marca. Ela constrói a consistência da 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 mudar a cor da fonte HTML.

Formas de definir uma cor

Há várias maneiras de definir cores no web design, 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 se refere ao nome específico para a cor HTML. Atualmente, existem 140 nomes de cores suportados, e você pode usar qualquer uma dessas cores em seus estilos. Por exemplo, você pode usar “blue” para definir a cor de um elemento individual para azul.

Entretanto, o lado negativo 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 suportadas, você não será capaz de usá-la em seu design pelo nome da cor.

Valores RGB e RGBA

A seguir, nós temos os valores RGB e RGBA. O RGB significa Vermelho, Verde e Azul. Ele define a cor misturando os valores vermelho, verde e azul, de forma similar a como você misturaria uma cor em uma paleta real.

O valor RGB se parece com isto: 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 cor entrada pode variar entre 0 e 255, onde 0 significa que a cor não está presente e 255 significa que a cor em particular está em sua intensidade máxima.

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

Valor HEX

Os códigos de cores hexadecimais funcionam de forma similar aos códigos RGB. Eles consistem de números de 0 a 9 e letras de A a F. O código hexadecimal é parecido com este: #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 de HSL e HSLA

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

A matiz usa graus de 0 a 360. Em uma roda de cor 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 o quão saturada está a cor. 0 representa o preto e branco, e 100 representa a cor completa.

Finalmente, a leveza usa porcentagens semelhantes à saturação. Neste caso, 0% representa o preto e 100% representa o branco.

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

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

Agora que você sabe como definir cores, vamos olhar para diferentes maneiras de mudar a cor da fonte HTML.

O antigo: Tag <font>

Antes de HTML5 ser introduzido e definido como o padrão de codificação, você podia mudar a cor da fonte usando as tags de fonte. Mais especificamente, você usaria a etiqueta da fonte com o atributo de cor para definir a cor do texto. O color foi especificado ou com seu nome ou com seu código hexadecimal.

Aqui está um exemplo de como este código ficou com código de cores hexadecimais:

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

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

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

Entretanto, a tag <font> é depreciada em HTML5 e não é mais usada. Mudar a cor da fonte é uma decisão de design, e design não é o propósito 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 é mais suportada, como você muda a cor da fonte HTML? A resposta é em Cascading Style Sheets ou CSS.

O novo: Estilos CSS

Para mudar 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, RGB, hexadecimal, e valores HSL para especificar a cor. Há três maneiras de usar CSS para mudar a cor da fonte.

CSS Inline

O CSS Inline é adicionado diretamente ao seu arquivo HTML. Você usará a tag HTML tal como <p> e então a estilizará com a propriedade de cor CSS assim:

<p style="color: purple">This is a purple paragraph.</p>

Se você quiser usar um valor hexadecimal, seu código será parecido com este:

<p style="color:#800080">This is a purple paragraph.</p>

Se você vai usar o valor RGB, você vai escrevê-lo assim:

<p style="color:RGB(153,0,255)">This is a purple paragraph.</p>

Finalmente, usando os valores da HSL, você usaria este código:

<p style="color:hsl(276, 100%, 50%)">This is a purple paragraph.</p>

Os exemplos acima mostram como mudar a cor de um parágrafo em seu site. Mas você não está limitado apenas aos parágrafos. Você pode mudar a cor da fonte de seus cabeçalhos, bem como os links.

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

Se você quiser mudar a cor de fundo do parágrafo inteiro ou de um cabeçalho, é muito semelhante a como você mudaria a cor da fonte. Você tem que usar o atributo background-color e usar ou o nome da cor, hexadecimal, RGB, ou valores HSL para definir a cor. Aqui está um exemplo

<p style="background-color: purple">

CSS embutido

O CSS embutido está dentro das tags <style> e colocado entre as tags do cabeçalho do seu documento HTML.

O código terá este aspecto 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. Similar ao método CSS em linha, você pode usar seletores diferentes para mudar a cor da fonte dos seus cabeçalhos e links.

Se você quiser usar o código hexadecimal, aqui está 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 ajuste 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

Finalmente, você pode usar CSS externo para mudar a cor da fonte em seu site. CSS externo é CSS que é colocado em um arquivo separado de stylesheet, 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 das fontes, margens, padrões, famílias de fontes, cores de fundo, e muito mais. Em resumo, a folha de estilo (style sheet) é responsável pela aparência visual do seu site.

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

body {color: purple;}

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

Inline, Embutido, ou Externo?

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

Se você usar o código CSS inline, você o adicionará diretamente ao seu arquivo HTML. Geralmente falando, este método é adequado para correções rápidas. Se você quiser mudar a cor de um parágrafo ou cabeçalho específico em uma única página, este método é a maneira mais rápida e menos complicada de fazer isso.

Entretanto, estilos inline podem fazer o tamanho do seu arquivo HTML maior. Quanto maior for seu arquivo HTML, mais tempo levará para que sua página web seja carregada. Além disso, o CSS inline pode fazer seu HTML ficar confuso. Como tal, o método inline de usar CSS para mudar a cor da fonte HTML é geralmente desencorajado.

O CSS embutido é colocado entre as tags <head> e dentro da tag <style>. Como o CSS inline, ele é bom para correções rápidas e sobreposição aos estilos especificados em uma folha de estilos externa.

Uma distinção notável entre estilos inline e embedded é que eles se aplicarão a qualquer página em que as tags do cabeçalho forem carregadas, enquanto os estilos inline se aplicam apenas à página específica em que eles estão, tipicamente o elemento que eles estão alvejando naquela página.

O último método, CSS externo, usa uma folha de estilo dedicada para definir seus estilos visuais. Geralmente falando, é melhor usar uma folha de estilos externa para manter todos os seus estilos em um único lugar, de onde eles são fáceis de editar. Isto também separa apresentação e design, assim o código é fácil de gerenciar e manter.

Tenha em mente que os estilos inline e embutidos podem substituir os estilos definidos na folha de estilos externa.

Tags de fontes ou estilos CSS: Prós e contras

Os dois métodos primários para mudar 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 tag da fonte HTML

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

Mesmo que a tag da fonte seja fácil de usar, você não deve usá-la se o seu site usa HTML. Como mencionado anteriormente, a tag da fonte foi depreciada em HTML5. O uso de código depreciado deve ser evitado, pois os navegadores podem parar de suportá-la a qualquer momento. Isto pode levar à quebra do seu site e não funcionar corretamente, ou pior, não mostrar nada para seus visitantes.

Prós e contras do CSS

O CSS, assim como a tag da fonte, tem seus prós e contras. A vantagem mais significativa do uso do CSS é que ele é a maneira correta de mudar a cor da fonte e especificar todos os outros estilos para o seu site.

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

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

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

Dicas para mudar a cor da fonte HTML

Agora que você sabe como mudar a cor da fonte HTML, aqui estão algumas dicas que o ajudarão.

Use um selecionador de cores

Ao invés de escolher cores aleatoriamente, use selecionador de cores para selecionar as cores certas. O benefício de um selecionador de cores é que ele lhe dará 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 assim como texto claro com fundo claro não funcionam bem juntos. Eles tornarão o texto em seu site difícil de ler. Entretanto, você pode usar um verificador de contraste para garantir que as cores do seu site estejam acessíveis e que o texto seja fácil de ler.

Encontre a cor usando o método Inspecionar

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

Resumo

A mudança da cor da fonte HTML pode ajudar a melhorar a legibilidade e acessibilidade do seu site. Também pode ajudar a estabelecer a consistência da marca em seus estilos de site.

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

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

O que você acha de mudar a cor da fonte com CSS e a tag da fonte? Informe-nos na seção de comentários!