Neste artigo, você aprenderá diferentes maneiras de definir valores de cores em CSS.
Definir propriedades de cor
A propriedade color define a cor do texto do elemento (geralmente a cor do primeiro plano).
Por exemplo, a propriedade color especificada no seletor de corpo define a cor de texto padrão para a página inteira. Vamos tentar o seguinte exemplo para ver como funciona:
body {
color: #ff5722;
}Nota: A propriedade color geralmente herda o valor de cor de seu elemento pai, com exceção dos elementos âncora. Por exemplo, se você especificar uma cor para o elemento body, ela será automaticamente passada para títulos, parágrafos, etc.
Definir valor de cor
As cores CSS são mais frequentemente especificadas no seguinte formato:
- Palavra-chave de cor – como “vermelho”, “verde”, “azul”, “transparente” etc.
- Valor HEX – como “#ff0000”, “#00ff00”, etc.
- Valor RGB – como “rgb(255, 0, 0)”
O CSS3 introduziu vários outros formatos de cores, como HSL, HSLA e RGBA, que também suportam transparência alfa. Veremos com mais detalhes no capítulo Cores CSS3.
Por enquanto, vamos nos ater ao método básico de definir valores de cores:
Cores com palavras-chave
CSS define várias palavras-chave de cores que permitem especificar facilmente valores de cores.
Essas palavras-chave de cores básicas são: aqua, preto, azul, fúcsia, cinza, verde, limão, marrom, marinho, verde-oliva, roxo, vermelho, prata, azul-petróleo, branco e amarelo. Os nomes de cores não diferenciam maiúsculas de minúsculas.
h1 {
color: red;
}
p {
color: purple;
}No entanto, os navegadores da Web modernos suportam muito mais nomes de cores do que os definidos no padrão CSS, mas, por segurança, você deve usar valores de cores hexadecimais.
Para obter uma lista completa de nomes de cores possíveis, consulte Referência de nomes de cores CSS.
Valor de cor com hexadecimal (HEX)
Hex (abreviação de Hexadecimal) é de longe a maneira mais comum de definir cores na web.
Hex representa a cor usando um código de seis dígitos precedido por um caractere de hash, como #rrggbb, onde rr, g e bb representam os componentes vermelho, verde e azul da cor, respectivamente.
O valor de cada componente pode variar de 00 (sem cor) e FF (cor total) em notação hexadecimal, ou 0 e 255 em equivalente decimal. Então #ffffff é branco e #000000 é preto. Vejamos o seguinte exemplo:
h1 {
color: #ffa500;
}
p {
color: #00ff00;
}Nota: Hexadecimal ou hexadecimal refere-se a um esquema de numeração que usa 16 caracteres como base. Ele usa os números de 0 a 9 e as letras A, B, C, D, E e F, que correspondem aos números decimais 10, 11, 12, 13, 14 e 15, respectivamente.
Dica: Se o código hexadecimal da cor tiver pares de valores, você também pode usar a notação abreviada para evitar entradas adicionais, por exemplo, o valor hexadecimal da cor #ffffff também pode ser escrito como #fff, #000000 é #000 e #00ff00 é # 0f0, #ffcc00 como #fc0 e assim por diante.
Leia também: 10 frameworks JavaScript que você deve conhecer em 2022
Valores de cores RGB
As cores podem ser definidas no modelo RGB (vermelho, verde e azul) usando a notação da função rgb().
A função rgb() aceita três valores separados por vírgula que especificam o número de componentes vermelho, verde e azul da cor. Esses valores geralmente são especificados como números inteiros entre 0 e 255, onde 0 é sem cor e 255 é cor total ou máxima.
h1 {
color: rgb(255, 165, 0);
}
p {
color: rgb(0, 255, 0);
}Nota: Você também pode especificar valores RGB como porcentagens dentro da função rgb(), onde 100% significa cor total e 0% (não simplesmente 0) significa sem cor. Por exemplo, você pode especificar vermelho como rgb(255, 0, 0) ou rgb(100%, 0%, 0%).
Dica: Se R, G, B estiverem todos definidos como 255, ou seja, rgb(255, 255, 255), a cor será branca. Da mesma forma, se todos os canais estiverem definidos como 0, ou seja, rgb(0, 0, 0), a cor será preta. Use os valores RGB na demonstração abaixo para ver como funciona.
Efeitos das propriedades de cor nas arestas e contornos
A propriedade color se aplica não apenas ao conteúdo de texto, mas também a qualquer conteúdo em primeiro plano que tenha um valor de cor. Por exemplo, se nenhuma cor de borda ou valor de cor de contorno for definido explicitamente para o elemento, o valor de cor será usado. Vejamos um exemplo:
p.one {
color: #0000ff;
border: 2px solid;
}
p.two {
color: #00ff00;
outline: 2px solid;
}Leia também: HTML: guia sobre formulários
