Cor

Podcast do CSS - 006: Parte 1 da Cor

A cor é uma parte importante de qualquer site e, no CSS, existem muitas opções de tipos, funções e tratamentos de cores.

Como decidir que tipo de cor usar? Como deixar suas cores semitransparentes? Nesta lição, você vai aprender quais opções tem para ajudar você a tomar as decisões certas para seu projeto e sua equipe.

O CSS tem vários tipos de dados diferentes, como strings e números. A cor é um desses tipos e usa outros, como números para as próprias definições.

Cores numéricas

É muito provável que sua primeira exposição a cores no CSS tenha sido feita com cores numéricas. Podemos trabalhar com valores numéricos de cor de algumas formas diferentes.

Cores hexadecimais

h1 {
  color: #b71540;
}

A notação hexadecimal (geralmente reduzida para hexadecimal) é uma sintaxe abreviada para RGB, que atribui um valor numérico a vermelho verde e azul, que são as três cores primárias.

Observação : de acordo com o Web Almanac, hex é o tipo de sintaxe de cor mais usado.

Os intervalos hexadecimais são 0-9 e A-F. Quando usados em uma sequência de seis dígitos, eles são convertidos para os intervalos numéricos RGB, que são de 0 a 255, que correspondem aos canais de cores vermelho, verde e azul, respectivamente.

Também é possível definir um valor Alfa com cores numéricas. Um valor Alfa é uma porcentagem de transparência. Em código hexadecimal, você adiciona outros dois dígitos à sequência de seis dígitos, fazendo uma sequência de oito dígitos. Por exemplo, para definir preto em código hexadecimal, escreva #000000. Para adicionar um valor de transparência de 50%, mude para #00000080.

Como a escala hexadecimal é de 0-9 e A-F, os valores de transparência provavelmente não são os esperados. Veja alguns valores comuns e importantes adicionados ao código hexadecimal preto, #000000:

• 0% Alfa, que é totalmente transparente, é 00: #00000000
• 50% Alfa é 80: #00000080
• 75% Alfa é BF: #000000BF

Para converter um hexadecimal de dois dígitos em decimal, multiplique o primeiro dígito por 16 (porque o hexadecimal é a base 16) e adicione o segundo dígito. Usando BF como exemplo para 75% Alfa:

1. B é igual a 11, que, quando multiplicado por 16, resulta em 176
2. F é igual a 15
3. 176 + 15 = 191
4. O valor alfa é de 191 a 75% de 255

Observação : também é possível escrever códigos hexadecimais em uma abreviação de três dígitos. Um código hexadecimal de três dígitos é um atalho para uma sequência equivalente de seis dígitos. Por exemplo, #a4e é idêntico a #aa44ee. Para adicionar Alfa, #a4e8 expandiria para #aa44ee88.

RGB (vermelho, verde, azul)

h1 {
  color: rgb(183, 21, 64);
}

As cores RGB são definidas com a função de cor rgb(), usando números ou porcentagens como parâmetros. Os números precisam estar no intervalo de 0-255, e as porcentagens precisam estar entre 0-100%. O RGB funciona na escala de 0 a 255. Dessa forma, 255 equivale a 100% e de 0 a 0%.

Para definir o preto em RGB, defina-o como rgb(0 0 0), que é zero vermelho, zero verde e zero azul. A cor preta também pode ser definida como rgb(0%, 0%, 0%). A cor branca é exatamente o oposto: rgb(255, 255, 255) ou rgb(100%, 100%, 100%).

Um Alfa é definido em rgb() de duas maneiras. Adicione um / após os parâmetros vermelho, verde e azul ou use a função rgba(). O alfa pode ser definido com uma porcentagem ou um decimal entre 0 e 1. Por exemplo, para definir uma cor preta de 50% em navegadores modernos, escreva: rgb(0 0 0 / 50%) ou rgb(0 0 0 / 0.5). Para um suporte mais amplo, usando a função rgba(), escreva: rgba(0, 0, 0, 50%) ou rgba(0, 0, 0, 0.5).

Observação : as vírgulas foram removidas das notação rgb() e hsl() porque as funções de cor mais recentes, como lab() e lch(), usam espaços em vez de vírgulas como delimitadores. Essa mudança oferece mais consistência não apenas com funções de cor mais recentes, mas com CSS em geral. Para melhorar a compatibilidade com versões anteriores, você ainda pode usar vírgulas para definir rgb() e hsl().

HSL (matiz, saturação e brilho)

h1 {
  color: hsl(344, 79%, 40%);
}

HSL significa matiz, saturação e brilho. Matiz descreve o valor no disco de cores, de 0 a 360 graus, começando com vermelho (sendo 0 e 360). Um matiz de 180, ou 50%, estaria no intervalo azul. É a origem da cor que vemos.

A saturação indica o quão vibrante é a tonalidade selecionada. Uma cor totalmente dessaturada (com uma saturação de 0%) vai aparecer em escala de cinza. E, finalmente, o brilho é o parâmetro que descreve a escala do branco ao preto de luz adicional. Um brilho de 100% sempre dará branco.

Usando a função de cor hsl(), você define um preto verdadeiro escrevendo hsl(0 0% 0%) ou até mesmo hsl(0deg 0% 0%). Isso ocorre porque o parâmetro hue define o grau na roda de cores, que, se você usar o tipo de número, será de 0 a 360. Você também pode usar o tipo de ângulo, que é (0deg) ou (0turn). A saturação e o brilho são definidos com porcentagens.

Observação : o tipo de ângulo no CSS é ótimo para definir a matiz, porque ele representa muito bem o ângulo da roda de cores. Esse tipo aceita graus, viradas, radianos e grados.

Compatibilidade com navegadores

• 2
• 12
• 3.6
• 4

Origem

Alfa é definido em hsl(), da mesma forma que rgb(), adicionando um / após os parâmetros de matiz, saturação e brilho ou usando a função hsla(). O alfa pode ser definido com uma porcentagem ou um decimal entre 0 e 1. Por exemplo, para definir um preto alfa de 50%, use: hsl(0 0% 0% / 50%) ou hsl(0 0% 0% / 0.5). Usando a função hsla(), escreva: hsla(0, 0%, 0%, 50%) ou hsla(0, 0%, 0%, 0.5).

Observação : alguns tipos de cores mais recentes estão chegando ao CSS. Isso inclui lab() e lch(), que permitem especificar um intervalo de cores muito maior do que o possível no RGB.

Palavras-chave de cor

Existem 148 cores nomeadas no CSS. São nomes simples em inglês, como roxo, tomate e goldrod. Alguns dos nomes mais conhecidos, de acordo com o Web Almanac, são preto, branco, vermelho, azul e cinza. Nossos favoritos incluem goldenrod, aliceblue e hotpink.

Além das cores padrão, há também palavras-chave especiais disponíveis:

• transparent é uma cor totalmente transparente. Também é o valor inicial de background-color
• currentColor é o valor dinâmico calculado contextual da propriedade color. Se a cor do texto for red e você definir border-color como currentColor, a cor também será vermelha. Se o elemento em que você define currentColor não tiver um valor para color definido, currentColor será calculado pela cascata.

Observação : as palavras-chave do sistema são cores definidas pelo tema do sistema operacional. Alguns exemplos dessas cores são Background, que é a cor de fundo da área de trabalho, ou Highlight, que é a cor de destaque dos itens selecionados. Essas são apenas duas das muitas opções. Todas as palavras-chave de cor não diferenciam maiúsculas de minúsculas. No entanto, muitas vezes você verá cores do sistema com letras maiúsculas para diferenciá-las das palavras-chave com cores padrão.

Onde usar cores nas regras de CSS

Se uma propriedade CSS aceitar o tipo de dados <color> como um valor, ela vai aceitar qualquer um dos métodos acima para expressar cores. Para estilizar o texto, use as propriedades color, text-shadow e text-decoration-color, que aceitam cor como valor ou cor como parte do valor.

Para planos de fundo, você pode definir uma cor como o valor de background ou background-color. As cores também podem ser usadas em gradientes, como linear-gradient. Os gradientes são um tipo de imagem que pode ser definido programaticamente no CSS. Os gradientes aceitam duas ou mais cores em qualquer combinação de formato, como hex, rgb ou hsl.

Observação : há muito o que aprender com os gradientes, por isso escrevemos uma aula inteira sobre como usá-los.

Por fim, border-color e outline-color definem a cor das bordas e contornos das caixas. A propriedade box-shadow também aceita cor como um dos valores.

Teste seu conhecimento

Teste seus conhecimentos sobre cores

Quais das opções a seguir são cores válidas?

rbga(400 0 1)

rbga é um erro de digitação de rgba, e 400 é maior do que seria aceito de qualquer forma, tornando-o inválido.

#0f08

🎉

#OOFZ2

Não é um valor hexadecimal, é apenas 5 números e inclui um Z, o que o torna inválido.

rgb(255, 0, 0)

🎉

hsl(180deg 50% 50%)

🎉

hotpink

🎉

Identifique a cor hsl inválida.

hsl(5, 0%, 90%)

Este é um valor hsl válido.

hsl(.5turn 40% 60%)

Este é um valor hsl válido.

hsl(0, 0, 0)

🎉 Você encontrou, o segundo e terceiro valores devem ser porcentagens.

hsl(2rad 50% 50%)

Este é um valor hsl válido.

hsl(0 0% 0% / 20%)

Este é um valor hsl válido.

Recursos

• Uma demonstração prática que mostra como usar ângulos com HSL
• Um guia completo sobre cores
• Um guia completo sobre a ampla gama de cores
• [vídeo] Uma explicação sobre como ler códigos hexadecimais
• Como funcionam os códigos hexadecimais