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.
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:
- B é igual a 11, que, quando multiplicado por 16, resulta em 176
- F é igual a 15
- 176 + 15 = 191
- O valor alfa é de 191 a 75% de 255
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)
.
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.
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)
.
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 debackground-color
currentColor
é o valor dinâmico calculado contextual da propriedadecolor
. Se a cor do texto forred
e você definirborder-color
comocurrentColor
, a cor também será vermelha. Se o elemento em que você definecurrentColor
não tiver um valor paracolor
definido,currentColor
será calculado pela cascata.
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.
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)
#0f08
#OOFZ2
rgb(255, 0, 0)
hsl(180deg 50% 50%)
hotpink
Identifique a cor hsl inválida.
hsl(5, 0%, 90%)
hsl(.5turn 40% 60%)
hsl(0, 0, 0)
hsl(2rad 50% 50%)
hsl(0 0% 0% / 20%)