Cor

Podcast do CSS - 006: Cores parte um

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

Como você decide que tipo de cor usar? Como você faz para suas cores serem semitransparentes? Nesta aula, você aprenderá quais opções tem para ajudá-lo 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 tipos, como números para suas próprias definições.

Cores numéricas

É muito provável que sua primeira exposição a cores no CSS seja por cores numéricas. É possível trabalhar com valores de cor numéricos em algumas formas diferentes.

Cores hexadecimais

h1 {
  color: #b71540;
}

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

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

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

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

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

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

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

RGB (vermelho, verde, azul)

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

As cores RGB são definidas com o função de cor rgb(), usando números ou porcentagens como parâmetros. Os números precisam estar dentro do intervalo de 0 a 255 e as porcentagens, entre 0% e 100%. RGB funciona na escala de 0 a 255, portanto, 255 é 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%). Branco é exatamente o oposto: rgb(255, 255, 255) ou rgb(100%, 100%, 100%).

Um Alfa é definido no rgb() de duas maneiras. Adicione uma / 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 um preto alfa 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(), gravar: rgba(0, 0, 0, 50%) ou rgba(0, 0, 0, 0.5).

HSL (matiz, saturação e brilho)

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

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

A saturação indica a intensidade da matiz selecionada. Uma cor totalmente dessaturada (com uma saturação de 0%) será exibida em escala de cinza. E, por fim, o brilho é o parâmetro que descreve a escala de branco a preto da luz adicionada. Um brilho de 100% sempre resultará na cor branca.

Usando a função de cor hsl(), defina 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á 0-360. Você também pode usar o tipo de ângulo, que é (0deg) ou (0turn). Tanto a saturação quanto o brilho são definidos com porcentagens.

Alfa é definido em hsl(), da mesma forma que rgb(), adicionando um / após os parâmetros matiz, saturação e brilho ou usando o método hsla(). O alfa pode ser definido com uma porcentagem ou um decimal entre 0 e 1. Por exemplo, para definir um preto alfa 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).

Palavras-chave de cor

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

Além das cores padrão, também há 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 você tiver uma cor de texto igual a red e definir border-color como currentColor, ele também será vermelho. Se o elemento em que você definir currentColor não tiver um valor para color definido, currentColor será calculado pela cascata

Onde usar a cor nas regras de CSS

Se uma propriedade CSS aceitar o tipo de dados <color> como um valor; ela aceitará qualquer um dos métodos acima de 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. Gradientes são um tipo de imagem que pode ser definido programaticamente em CSS. Os gradientes aceitam duas ou mais cores em qualquer combinação de formato de cor, como hexadecimal, rgb ou hsl.

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

Teste seu conhecimento

Teste seus conhecimentos sobre cor

Recursos

• Uma demonstração útil que mostra como você pode 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