Cor

The CSS Podcast - 006: Color Part One

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

Como você decide qual tipo de cor usar? Como você deixa as cores semitransparentes? Nesta lição, você vai aprender quais opções tem para ajudar a tomar as decisões certas para seu projeto e 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 às cores no CSS seja por cores numéricas. Podemos trabalhar com valores numéricos de cores de algumas formas diferentes.

Cores hexadecimais

h1 {
  color: #b71540;
}

A notação hexadecimal (abreviada para "hex") é uma sintaxe abreviada de 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 conhecido.

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

Também é possível definir um valor alfa com qualquer cor numérica. Um valor Alfa é uma porcentagem de transparência. No código hexadecimal, você adiciona outros dois dígitos à sequência de seis dígitos, criando uma sequência de oito dígitos. Por exemplo, para definir preto no código hexadecimal, digite #000000. Para adicionar 50% de transparência, mude para #00000080.

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

• 0% Alfa, que é totalmente transparente, é 00: #00000000
• 50% de alfa é 80: #00000080
• A transparência de 75% é BF: #000000BF

Para converter um hexadecimal de dois dígitos em um decimal, pegue o primeiro dígito e multiplique por 16 (porque o hexadecimal é a base 16) e adicione o segundo dígito. Usando BF como exemplo para 75% de 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 é 191 a 75% de 255

Observação : também é possível escrever códigos hexadecimais com 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 o alfa, #a4e8 será expandido 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 entre 0 e 255, e as porcentagens precisam estar entre 0% e 100%. O RGB funciona na escala de 0 a 255, então 255 seria equivalente a 100% e 0 a 0%.

Para definir o preto em RGB, defina-o como rgb(0 0 0), que é zero vermelho, zero verde e zero azul. O preto também pode ser definido como rgb(0%, 0%, 0%). O branco é 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 número decimal entre 0 e 1. Por exemplo, para definir um preto alfa 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(), digite: rgba(0, 0, 0, 50%) ou rgba(0, 0, 0, 0.5).

Observação : as vírgulas foram removidas da 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 delimitador. Essa mudança oferece mais consistência não apenas com as funções de cor mais recentes, mas com o 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, brilho)

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

HSL significa matiz, saturação e luminosidade. A tonalidade descreve o valor na roda de cores, de 0 a 360 graus, começando pelo vermelho (0 e 360). Uma matiz de 180 ou 50% estaria no intervalo azul. É a origem da cor que vemos.

A saturação é o nível de vibração da matiz selecionada. Uma cor totalmente desaturada (com uma saturação de 0%) vai aparecer em escala de cinza. Por fim, a luminosidade é o parâmetro que descreve a escala de luz adicionada do branco ao preto. Um valor de 100% sempre vai resultar em 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 de tonalidade define o grau na roda de cores, que, se você usar o tipo de número, é 0 a 360. Também é possível usar o tipo de ângulo, que é (0deg) ou (0turn). A saturação e a luminosidade são definidas com porcentagens.

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

Browser Support

• 2
• 12
• 3.6
• 4

Source

O alfa é definido em hsl(), da mesma forma que rgb(), adicionando um / após os parâmetros de matiz, saturação e luminosidade ou usando a função hsla(). O alfa pode ser definido com uma porcentagem ou um número 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. Elas incluem lab() e lch(), que permitem especificar uma gama de cores muito mais ampla do que é possível em RGB.

Palavras-chave de cor

Há 148 cores nomeadas no CSS. São nomes simples em inglês, como purple, tomato e goldenrod. Alguns dos nomes mais populares, de acordo com o Web Almanac, são black, white, red, blue e gray. Nossos favoritos incluem dourado, azul-celeste e rosa-choque.

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

• transparent é uma cor totalmente transparente. Ele também é o valor inicial de background-color.
• currentColor é o valor dinâmico computado contextual da propriedade color. Se você tiver uma cor de texto red e definir o border-color como currentColor, ele também será vermelho. Se o elemento em que você define currentColor não tiver um valor definido para color, 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 plano de fundo do computador, 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 são sensíveis a maiúsculas e minúsculas, mas você vai encontrar cores do sistema com letras maiúsculas para diferenciá-las das palavras-chave de cor padrão.

Onde usar cores em regras CSS

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

Para planos de fundo, é possível 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 de cor, 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 dos contornos das caixas. A propriedade box-shadow também aceita a cor como um dos valores.

Teste seu conhecimento

Teste seus conhecimentos sobre cores

Quais das cores a seguir são válidas?

rbga(400 0 1)

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

#0f08

🎉

#OOFZ2

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

rgb(255, 0, 0)

🎉

hsl(180deg 50% 50%)

🎉

hotpink

🎉

Encontre 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. Os valores 2 e 3 precisam ser percentuais.

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 útil mostrando como usar ângulos com HSL
• Um guia completo sobre cores
• Um guia completo sobre a ampla gama de cores
• [vídeo] Explicação sobre como ler códigos hexadecimais
• Como os códigos hexadecimais funcionam