Guia de cores CSS de alta definição

O CSS Color 4 traz ferramentas e recursos de cores de ampla gama para a Web: mais cores, funções de manipulação e gradientes melhores.

Adam Argyle

Por mais de 25 anos, sRGB (vermelho verde azul padrão) tem sido o único gama de cores para gradientes e cores do CSS, com ofertas de espaço de cores como rgb(), hsl() e hexadecimal. É o recurso de gama de cores mais comum entre as telas; um denominador comum. Nós nos acostumamos a especificar cores dentro dele.

https://almanac.httparchive.org/en/2022/css#colors

À medida que as telas ficam mais capazes de mostrar uma ampla variedade de cores, o CSS precisa de uma maneira de especificar cores dentro dessas faixas mais amplas. Os formatos de cores atuais não têm um idioma para intervalos de cores amplos.

Se o CSS nunca fosse atualizado, ele ficaria preso para sempre nas faixas de cores dos anos 90, forçado a nunca corresponder às ofertas de ampla gama encontradas em imagens e vídeos. Preso, mostrando apenas 30% das cores que o olho humano pode ver. Agradeça ao CSS Color Level 4 por nos ajudar a escapar, escrito principalmente por Lea Verou e Chris Liley.

O Chrome oferece suporte a gamas e espaços de cor do CSS Color 4. O CSS agora oferece suporte a telas HD (alta definição), especificando cores de gamas HD e oferecendo espaços de cores com especializações.

Uma série de imagens é mostrada em transição entre gamas de cores amplas e estreitas, ilustrando a vivacidade das cores e os efeitos delas.
Faça um teste

Este guia tem três partes. Continue lendo para lembrar onde a cor foi usada. Em seguida, leia para onde a cor está indo e como gerenciar as cores no futuro migrando para cores em HD.

Visão geral

Nos navegadores compatíveis, há 50% mais cores para escolher. Se você achou que 16 milhões de cores pareciam muito, aguarde até ver quantas cores alguns desses novos espaços podem mostrar. Além disso, pense em todos os gradientes que são divididos em faixas porque não havia profundidade de bits suficiente. Isso também foi resolvido.

Além de mais cores, provavelmente as cores mais vivas que a tela é capaz de mostrar, os novos espaços de cores oferecem ferramentas e métodos exclusivos para gerenciar e criar sistemas de cores. Por exemplo, antes tínhamos HSL e o canal "lightness", que era o melhor que os desenvolvedores da Web tinham. Agora, no CSS, temos a iluminação perceptiva do LCH.

Visualize você mesmo no Codepen

Além disso, os gradientes e a mistura receberam algumas melhorias: suporte a espaço de cores, opções de interpolação de matiz e menos faixas.

A imagem a seguir mostra alguns dos upgrades de mixagem.

As duas misturas de cores principais estão em sRGB com cores sRGB. As duas misturas de cores na parte de baixo estão na tela P3. A tela P3 tem cores mais vivas, e as misturas resultam em preto e branco no meio, enquanto o sRGB parece um pouco dessaturado e as misturas no meio não são resultados em preto e branco.
https://codepen.io/web-dot-dev/pen/poZgXQb

O problema com a cor e a Web é que o CSS não está pronto para alta definição, enquanto as telas que a maioria das pessoas tem nos bolsos, nas pernas ou montadas nas paredes são de gama ampla e prontas para cores de alta definição. A capacidade de cores das telas cresceu mais rápido que o CSS, e agora o CSS está aqui para acompanhar.

Há muito mais do que apenas "mais cores". Ao final desses documentos, você vai poder especificar mais cores, melhorar gradientes e escolher os melhores espaços e gamas de cores para cada tarefa.

O que é uma gama de cores?

Uma gama representa o tamanho de algo. A frase "milhões de cores" é um comentário sobre a gama de uma tela ou o intervalo de cores disponíveis. Na imagem a seguir, três gamas são comparadas, e quanto maior o tamanho, maior o número de cores.

Uma gama de cores também pode ter um nome. Como uma bola de basquete em comparação com uma de beisebol ou uma xícara de café Venti em comparação com uma Grande. Um nome para o tamanho pode ajudar as pessoas a se comunicar. Aprender esses nomes de gama de cores ajuda você a se comunicar e entender rapidamente uma variedade de cores.

Este artigo analisa as gamas de cores anteriores. Leia sobre as sete novas gamas em Acessar mais cores e novos espaços.

Gama visual humana

As gamas de cores costumam ser comparadas com a gama de cores humana, ou seja, o conjunto de cores que o olho humano consegue perceber. O HVS é frequentemente representado com um diagrama de cromaticidade, como este:

Fonte: Wikipedia

A forma mais externa é o que podemos ver como humanos, e o triângulo interno é o intervalo de funções rgb(), também conhecido como espaço de cores sRGB.

Como você viu os triângulos acima, comparando os tamanhos de gama, você também vai encontrar triângulos abaixo. Essa é a maneira do setor de se comunicar sobre as gamas de cores e compará-las.

O que é um espaço de cores?

Os espaços de cor são arranjos de uma gama, estabelecendo uma forma e um método de acesso às cores. Muitas são formas simples em 3D, como cubos ou cilindros. Essa organização de cores determina quais cores ficam próximas umas das outras e como o acesso e a interpolação de cores vão funcionar.

O RGB é como um espaço de cor retangular, em que as cores são acessadas especificando coordenadas em três eixos. O HSL é um espaço de cores cilíndrico, em que as cores são acessadas com um ângulo de matiz e coordenadas em dois eixos.

https://en.wikipedia.org/wiki/HSL_and_HSV

A especificação de nível 4 apresenta 12 novos espaços de cor para procurar cores. Além dos quatro espaços de cor disponíveis anteriormente:

• Hex
• RGB (link em inglês)
• HSL
• HWB

Resumo da gama de cores e do espaço de cores

Um espaço de cores é um mapeamento de cores em que uma gama de cores é um intervalo de cores. Considere uma gama de cores como um total de partículas e um espaço de cores como um frasco feito para conter essa faixa de partículas.

Aqui está um recurso visual interativo de Alexey Ardov, que demonstra os espaços de cor. Aponte, arraste e aplique zoom nesta demonstração. Mude o espaço de cores para visualizar outros espaços.

• Use gamas de cores para falar sobre uma variedade de cores, como baixo intervalo ou gama estreita em vez de alto intervalo ou ampla gama.
• Use espaços de cores para falar sobre arranjos de cores, sintaxe usada para especificar uma cor, manipular cores e interpolar por cores.

Na imagem acima, a gama sRGB de partículas se encaixa em um espaço de cor de cubo RGB Fonte da imagem

Uma revisão dos espaços de cores clássicos {#classic-color-spaces}

A CSS Color 4 descreve vários novos recursos e ferramentas de CSS e cor. Primeiro, uma recapitulação de onde estava a cor antes desses novos recursos.

Desde os anos 2000, é possível usar o seguinte para qualquer propriedade CSS que aceite uma cor como valor: hexadecimal (números hexadecimais), rgb(), rgba(), por nome, como hotpink, ou com palavras-chave como currentColor.

Por volta de 2010, dependendo do navegador, o CSS podia usar cores hsl(). Depois, em 2017, surgiu o hex com alfa. Por fim, apenas recentemente, o hwb() começou a receber suporte em navegadores.

Todos esses espaços de cores clássicas fazem referência à cor dentro da mesma gama, sRGB.

HEX

Compatibilidade com navegadores

• 1
• 12
• 1
• 1

Origem

O espaço de cores hexadecimal especifica R, G, B e A com números hexadecimais. Os exemplos de código a seguir mostram todas as maneiras de especificar vermelho, verde e azul, além da opacidade.

.valid-css-hex-colors {
  /* classic */
  --3-digits: #49b;
  --6-digits: #4499bb;

  /* hex with opacity */
  --4-digits-opaque: #f9bf;
  --8-digits-opaque: #ff99bbff;
  --4-digits-with-opacity: #49b8;
  --8-digits-with-opacity: #4499bb88;
}

RGB

Compatibilidade com navegadores

• 1
• 12
• 1
• 1

Origem

O espaço de cor RGB tem acesso direto aos canais vermelho, verde e azul. Ele permite especificar um valor entre 0 e 255 ou como uma porcentagem de 0 a 100. Essa sintaxe existia antes de algumas normalizações de sintaxe serem incluídas nas especificações. Por isso, você vai encontrar sintaxe com e sem vírgula. Seguindo em frente, as vírgulas não são mais necessárias.

.valid-css-rgb-colors {
  --classic: rgb(64, 149, 191);
  --modern: rgb(64 149 191);
  --percents: rgb(25% 58% 75%);

  --classic-with-opacity-percent: rgba(64, 149, 191, 50%);
  --classic-with-opacity-decimal: rgba(64, 149, 191, .5);

  --modern-with-opacity-percent: rgb(64 149 191 / 50%);
  --modern-with-opacity-decimal: rgb(64 149 191 / .5);

  --percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
  --percents-with-opacity-decimal: rgb(25% 58% 75% / .5);

  --empty-channels: rgb(none none none);
}

HSL

Compatibilidade com navegadores

• 1
• 12
• 1
• 3.1

Origem

Um dos primeiros espaços de cores a se orientar para a linguagem e comunicação humana, o HSL (matiz, saturação e luminosidade) oferece todas as cores na gama sRGB sem exigir que seu cérebro saiba como o vermelho, o verde e o azul interagem. Assim como no RGB, originalmente, elas também tinham vírgulas na sintaxe, mas, avançando, elas não são mais necessárias.

.valid-css-hsl-colors {
  --classic: hsl(200deg, 50%, 50%);
  --modern: hsl(200 50% 50%);

  --classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
  --classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);

  --modern-with-opacity-percent: hsl(200 50% 50% / 50%);
  --modern-with-opacity-decimal: hsl(200 50% 50% / .5);

  /* hueless and no saturation */
  --empty-channels-white: hsl(none none 100%);
  --empty-channels-black: hsl(none none 0%);
}

HWB

Compatibilidade com navegadores

• 101
• 101
• 96
• 15

Origem

Outro espaço de cores da gama sRGB orientado para a forma como as pessoas descrevem as cores é o HWB (matiz, branco, preto). Os autores podem escolher uma tonalidade e misturar branco ou preto para encontrar a cor desejada.

.valid-css-hwb-colors {
  --modern: hwb(200deg 25% 25%);
  --modern2: hwb(200 25% 25%);

  --modern-with-opacity-percent: hwb(200 25% 25% / 50%);
  --modern-with-opacity-decimal: hwb(200 25% 25% / .5);

  /* hueless and no saturation */
  --empty-channels-white: hwb(none 100% none);
  --empty-channels-black: hwb(none none 100%);
}

Próximas etapas

Leia sobre os novos espaços de cor, sintaxes e ferramentas e, em seguida, aprenda a migrar para cores em alta definição (links em inglês).

Os espaços de cor não sRGB na Web estão no início, mas haverá um aumento no uso por designers e desenvolvedores ao longo do tempo. Saber em qual espaço de cores criar um sistema de design, por exemplo, é uma ferramenta poderosa para criadores de conteúdo. Cada espaço de cor oferece recursos exclusivos e uma razão pela qual foi adicionado à especificação CSS. Não há problema em começar pequeno e adicionar conforme necessário.

Recursos

Leia mais artigos sobre o nível 5 de cores.

• Sintaxe de cor relativa do CSS
• Mistura de cores do CSS

E você pode encontrar leituras adicionais em toda a Web:

• Módulo de cor CSS nível 4 da W3C

• Módulo de cor CSS nível 5 da W3C

• Cores LCH no CSS: o que, por que e como?

• Melhor que o laboratório? Redução de gama: CIE Lab e OKLab

• Cores mais ricas na Web

• Okhsv e Okhsl: dois novos espaços de cor para seleção de cores (em inglês)

• Como usar cores mais ricas no Chromium (PDF)

• O LCH é o melhor espaço de cores.

• Como projetar sistemas de cores acessíveis

• Color Spaces, por Hannah Weller

• Cor de gama ampla no CSS com Display-P3

• Espaço de cores CIE 1931

• Formatos de cores no CSS

• ColorEspaços de Bartosz Ciechanowski

E ferramentas:

• afc163.github.io/color3d/
• Visualização de gama
• Gerador de gradiente vívido