Cor

The CSS Podcast - 006: Color Part One

A cor é uma parte importante de qualquer site, e no CSS há muitas opções para especificar e manipular 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.

Como escolher as cores

Cores nomeadas

A maneira mais simples de escolher uma cor é selecionar uma das 148 cores nomeadas no CSS. Esses são nomes simples em inglês, como purple, tomato e goldenrod. Alguns dos nomes mais conhecidos, de acordo com o Web Almanac, são black, white, red, blue e gray. Nossos favoritos incluem goldenrod, aliceblue e hotpink.

Cores numéricas

Embora as cores nomeadas sejam convenientes, provavelmente você precisará usar cores específicas que não estão disponíveis nesse conjunto. É possível especificar cores com valores numéricos de várias formas.

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.

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

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).

HSL (matiz, saturação, luminosidade)

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.

Uma roda de cores com rótulos para valores em incrementos de 60 graus para ajudar a entender o que cada valor de ângulo representa

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.

A função de cor HSL detalhada visualmente. O matiz usa a roda de cores. A saturação mostra a mistura de cinza com azul-esverdeado. A luminosidade mostra o preto no branco.

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).

Cores de alta definição

RGB e HSL definem cores na gama sRGB. Monitores mais recentes oferecem suporte a muitas mais cores do que podem ser descritas por esses formatos e fora da gama sRGB. É possível escolher essas cores com várias funções do CSS.

.

A função color()

h1 {
  color: color(srgb 0.9 0.2 0.4);
}

A função color() do CSS permite escolher uma cor em um espaço de cores específico. O primeiro argumento é o espaço de cores a ser usado, que define as opções para os canais seguintes. Assim como o rgb(), é possível definir o canal Alfa definindo um número entre 0 e 1 ou uma porcentagem após um /.

Por exemplo, a cor RGB vermelho escuro no snippet de código anterior, que é definida como rgb(183 21 64), pode ser definida com porcentagens como rgb(72% 8% 25%). Você pode usar a função color() com a palavra-chave srgb para especificar a mesma cor com color(srgb .72 .08 .25).

O srgb define o espaço de cores e informa que os três próximos argumentos são vermelho, verde e azul. Os valores vão de 0 a 1 em vez de 0 a 255.

Assim como rgb(), podemos definir o alfa com um / e uma porcentagem ou um número decimal entre 0 e 1.

Há muitos espaços de cores que podem ser usados com a função color(), cada um com diferentes pontos fortes e casos de uso.

Tela P3

h1 {
  color: color(display-p3 0.9 0.2 0.4);
}

A gama Display P3 contém 50% mais cores do que o sRGB. É possível especificar todas as cores na gama de cores do Display P3 com o espaço de cores do Display P3 usando a função color().

Para definir o preto em Display P3, defina como color(display-p3 0 0 0). Depois de especificar o espaço de cor display-p3 para a função color(), você terá três canais: vermelho, verde e azul, semelhante a color(srgb). No entanto, como os valores do canal representam coordenadas em um espaço de cores mais amplo, os mesmos valores do canal vão significar coisas diferentes.

color(srgb 1 .5 0) é uma cor laranja equivalente a color(display-p3 0.93596 0.52724 0.1983). Podemos tornar o laranja ainda mais vibrante estendendo-o para fora do espaço sRGB, para color(display-p3 1 .5 0).

Oklab

O Oklab é definido com a função oklab(), com canais de luminosidade, a e b. Ele é útil para criar gradientes suaves e ajustar a saturação de uma cor, mantendo a matiz e a luminosidade.

h1 {
  color: oklab(75% 0.1 0.1)
}

O canal de luminosidade vai de 0 a 1 ou de 0% a 100%. Cores com uma luminosidade de 0 sempre serão pretas.

O canal a vai de -0.4 a 0.4 ou de 0% a 100%. Valores mais baixos são mais verdes, e valores mais altos são mais vermelhos.

O canal b vai de -0.4 a 0.4 ou de 0% a 100%. Valores mais baixos são mais azuis, e valores mais altos são mais amarelos.

OkLCh

O OkLCh é a forma polar ou cilíndrica do OKLab e é definido com canais de luminosidade, croma e matiz. Ela é útil para ajustar cores de uma maneira uniforme. Isso significa que as mudanças na matiz não afetam a luminosidade ou saturação de uma cor.

h1 {
  color: oklch(80% 0.1 200)
}

Você trabalhou com a luminosidade e a matiz em HSL, e a croma é semelhante à saturação. É possível definir o preto com oklch(0 0 0) e o branco com oklch(1 0 0).

O canal de luminosidade vai de 0 a 1 ou de 0% a 100%. Cores com uma luminosidade de 0 sempre serão pretas.

O canal de croma define a vibração de uma cor. O valor 0 ou 0% será dessaturado, e valores mais altos terão mais cor. Um valor de 100% é igual a .4, mas é possível sair rapidamente da gama com valores próximos a .4.

A matiz é especificada em graus, assim como hsl().

O OkLCh não é limitado por uma gama como a Display P3. Portanto, você precisa garantir que está criando cores que podem ser exibidas. oklch(80% 50% 200) é um azul brilhante que parece numericamente uma cor razoável, mas está fora da gama de cores da Display P3.

Outros espaços

Há muitas maneiras de especificar cores no CSS, e você não precisa aprender todas. Os formatos rgb() e Hex são usados com frequência em ferramentas de design e em código existente e são úteis. Também é útil conhecer um formato que possa ser manipulado de forma previsível. É possível mudar os valores hsl ou oklch diretamente e ter uma ideia de qual será a cor resultante.

Leia mais em Acessar mais cores e novos espaços.

Cores do sistema

Além de cores nomeadas, como roxo ou azul-petróleo, 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 border-color como currentColor, ela também será red. Se o elemento em que você define currentColor não tiver um valor definido para a cor, o currentColor será calculado pela cascata.

Como manipular cores

Embora você possa ter uma paleta de cores para usar no seu site, talvez seja necessário usar variantes dessas cores para estados de passar o cursor, bordas e outros elementos da interface. Você pode especificar cada cor, mas o CSS também oferece maneiras de transformar cores para criar essas variantes.

color-mix()

Para usar o resultado da mistura de duas cores, use o método color-mix(). Isso é útil para misturar uma cor com branco ou preto para criar uma variante mais clara ou mais escura.

Para usar color-mix(), você precisa definir as duas cores, como quer que elas sejam misturadas (o método de interpolação) e a quantidade de cada cor.

Para espaços de cores que têm uma matiz, você também pode decidir para qual direção da roda de cores quer ir. O padrão é usar o caminho shorter, mas você também pode escolher longer ou increasing e decreasing.

Juntos, o espaço de cores e a direção são o método de interpolação.

Também é possível fornecer a quantidade de cada cor a ser misturada.

Sintaxe de cores relativa

Também é possível trabalhar mais diretamente com uma cor usando a sintaxe de cor relativa, que permite que você escolha qualquer cor e realize cálculos nela para criar uma nova cor.

h1 {
  color: oklch(from red l c h);
}

Usar a função oklch() significa que você vai trabalhar com canais de luminosidade, croma e matiz. Depois da palavra-chave from, você pode especificar qualquer cor em qualquer sintaxe. Isso dá a você cada valor do canal para usar como uma letra. Isso vai resultar em uma cor vermelha, sem ajustes.

Para fazer ajustes, use a função calc() para mudar os valores do canal ou substitua o canal completamente. Aqui, usamos a mesma cor red, mas a definimos com oklch(62% 0.25 29).

h1 {
  color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}

O canal de luminosidade é 62% / 2 ou 31%. O canal de croma não foi alterado, então ele é 0.25. O canal de matiz é 180. Isso cria a nova cor oklch(31% 0.25 180), uma nova cor verde escuro.

Você vai usar uma propriedade personalizada como a cor de entrada. Isso permite criar variações de cores dinamicamente.

Você pode fazer isso com qualquer função de cor, e é útil fazer isso com funções de cor que têm canais que descrevem as mudanças que você quer fazer. Por exemplo, se você quiser ajustar a luminosidade de uma cor, escolha oklch ou hsl, já que é possível mudar diretamente o canal de luminosidade.

h1 {
  color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}

Usando a sintaxe de cores relativa, ou RCS, você pode criar uma paleta de cores para usar no seu site.

Cores fora da gama

Seu conteúdo será mostrado em diferentes telas que podem ou não oferecer suporte a cores de ampla gama. Se você especificar uma cor que não tem suporte de uma tela, ela passará por um processo chamado mapeamento de gama para encontrar uma cor semelhante que possa ser exibida na tela. Se você quiser definir cores específicas nesses casos, use a consulta de mídia color-gamut.

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 descritos anteriormente para expressar a cor. Para definir o estilo do texto, use as propriedades color, text-shadow e text-decoration-color, que aceitam a cor como valor ou como parte do valor.

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.

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