Cores HTML

Já alterou o aspeto com o atributo style e marcou significado com formatação e citações. As cores moldam o clima e a legibilidade da página. Neste caminho de HTML para iniciantes pratica valores de cor dentro de style: nomes comuns, códigos hex e funções rgb(). Sistemas de design completos ficam para o CSS mais à frente; aqui aprende a ler e a escrever as formas corretamente, com demos curtas que o olho consegue seguir. Quando reconhecer cada sintaxe à primeira vista, será mais fácil mover as mesmas cores para folhas de estilo partilhadas sem reaprender a gramática do valor.

O que é um valor de cor HTML?

Um valor de cor diz ao navegador que cor usar numa propriedade CSS como color ou background-color. As mesmas formas de valor funcionam em style inline e em folhas de estilo. Os iniciantes encontram primeiro três formas práticas: um nome legível (tomato), um código hex (#c0392b) e uma mistura rgb() (rgb(192, 57, 43)). Podem descrever o mesmo tom com grafias diferentes. Pense no valor como a “receita” da cor; a propriedade decide onde essa receita se aplica — no texto, no fundo, ou noutro sítio que o CSS permitir mais tarde. Dominar a receita agora evita confusão quando as regras saírem do atributo e forem para um ficheiro .css.

Resposta direta

Defina o texto com color e a área atrás do conteúdo com background-color. Escolha a forma de valor que serve o momento: um nome para demos rápidas, hex quando copia de uma paleta, ou rgb() quando pensa em canais vermelho/verde/azul de 0 a 255. Mantenha o contraste forte o suficiente para ler. À medida que os projetos crescem, mova cores partilhadas para CSS em vez de repetir atributos inline longos em cada página. Em demos de uma página o inline é útil para ver o efeito imediatamente; num site com muitas páginas, repetir o mesmo hex dezenas de vezes torna a manutenção lenta e inconsistente.

Formas de valor num relance

Cores com nomes

Os nomes de cor são o ponto de partida mais amigável. Emparelhe com cuidado a cor do texto e a do fundo para as palavras permanecerem legíveis. Nomes como darkgreen, navy e lightblue leem-se em voz alta e ajudam a lembrar o efeito sem abrir uma calculadora de cor. Ainda assim, o conjunto útil é limitado: nem toda a palavra de cor em inglês é um nome CSS válido. Comece com nomes que já viu a funcionar e confirme no navegador antes de os tratar como “óbvios”.

Ler o exemplo

• O primeiro parágrafo só altera a cor do texto
• O segundo define fundo e texto para o azul-marinho ficar claro sobre azul claro
• Os nomes não distinguem maiúsculas/minúsculas em CSS, mas minúsculas são um hábito claro
• Nem toda a palavra de cor em inglês é um nome CSS válido — fique com nomes comuns que já verificou
• Se mudar só o fundo e deixar o texto no padrão do navegador, o contraste pode falhar sem aviso

Cores hex

Uma cor hex costuma começar com # seguida de seis caracteres de 0–9 e a–f. Os pares significam vermelho, verde e azul. #000000 é preto; #ffffff é branco. Não precisa memorizar um catálogo — escolha numa paleta e cole com cuidado. Muitas ferramentas de design mostram hex por omissão; por isso esta forma aparece muito quando copia cores de um mockup. Um único dígito em falta ou um # esquecido pode fazer o valor falhar em silêncio, por isso trate o hex como um código curto que merece revisão visual antes de guardar.

Dicas de hex

• Mantenha o # — 336699 sozinho não é o mesmo que #336699 na forma desta lição
• Use só dígitos hex válidos; as letras param em f
• Existe hex de três dígitos em CSS (#333), mas códigos de seis dígitos bastam nesta etapa do curso
• Volte a verificar o copiar/colar para um dígito em falta não falhar em silêncio
• #000000 e #ffffff são âncoras úteis: ajudam a sentir o extremo escuro e o extremo claro da escala

Cores rgb()

A função rgb() mistura vermelho, verde e azul como números de 0 a 255. rgb(255, 0, 0) é vermelho puro. Esta forma é útil quando ajusta um canal de cada vez — por exemplo, aumentar só o verde e deixar vermelho e azul iguais. Em demos de aula, rgb() torna visível a ideia de “mistura de três luzes”; em trabalho real, continua a ser a mesma gramática que verá em CSS. Pode descrever o mesmo tom que um hex ou um nome, desde que os canais correspondam.

Ligar as formas

O mesmo tom pode muitas vezes escrever-se como nome, hex ou rgb. Escolha uma forma por demo para o olho aprender a sintaxe. Mais tarde no CSS encontrará outras notações; estas três cobrem a prática inicial de HTML. Quando vir #c0392b numa paleta e rgb(192, 57, 43) noutro sítio, lembre-se de que podem apontar para o mesmo vermelho — a diferença é a escrita, não necessariamente a cor. Treinar as três formas agora evita a sensação de “três línguas diferentes” quando avançar para folhas de estilo.

Contraste e legibilidade

Uma cor válida ainda pode ser uma má escolha. Texto amarelo claro sobre branco pode analisar bem e mesmo assim ser difícil de ler. Quando define color e background-color, confirme que o texto se destaca. Em sites reais, o contraste faz parte da acessibilidade — comece o hábito já, mesmo em demos pequenas. Um estilo “bonito” que obriga o leitor a esforçar-se não cumpre o objetivo da página. Preferir pares escuros sobre claros (ou o inverso com cuidado) é uma regra simples que evita a maior parte dos problemas de legibilidade no início.

Prática no editor

1. Crie três parágrafos curtos sob um título.
2. Colorize o texto do primeiro com um nome (teal ou semelhante).
3. Colorize o texto do segundo com um valor hex.
4. Dê ao terceiro um background-color com rgb() e, se precisar de contraste, um color escuro.
5. Guarde e atualize. Confirme que cada forma funciona.
6. Quebre de propósito um hex (retire um dígito), atualize, corrija — isso treina sintaxe cuidadosa.
   Trate cada passo como um mini-experimento: altere uma coisa de cada vez para ver qual valor falhou. Se as três formas forem bem no mesmo documento, já tem um modelo mental sólido para demos futuras e para a transição para CSS partilhado.

Erros que escondem ou enfraquecem as cores

• Confundir color (texto) com background-color (atrás do texto)
• Escrever #33, #gggggg ou hex sem # quando queria um código de seis dígitos
• Combinações de baixo contraste que parecem “estilizadas” mas são difíceis de ler
• Construir um tema de marca inteiro só com estilos inline repetidos em vez de aprender CSS partilhado a seguir
• Assumir que toda a palavra de cor em inglês é um nome CSS válido sem verificar
• Copiar um hex de seis dígitos e perder o # ou um carácter no meio da colagem
  Estes erros são comuns porque a página pode “quase” parecer correta: o HTML continua válido, mas a cor não aparece ou o texto fica ilegível. Quando uma cor “não faz nada”, revise primeiro a propriedade, depois a sintaxe do valor, e por fim o contraste.

Resumo

• Use color e background-color em style para demos rápidas de cor
• Valores: nomes, hex (#RRGGBB) ou rgb(r, g, b)
• Pares hex mapeiam para vermelho, verde e azul; canais rgb vão de 0 a 255
• Prefira contraste legível sempre que o texto assenta num fundo colorido
• Mova cores partilhadas para CSS à medida que páginas e projetos crescem
• Confirme com guardar e atualizar; corrija a sintaxe com cuidado quando uma cor “não faz nada”
  Com estas três formas e dois propriedades claras, já consegue pintar demos de HTML de forma previsível. O passo seguinte natural é reunir as mesmas regras num sítio partilhado — CSS — para não repetir o mesmo valor em cada parágrafo.