O CSS Color 4 oferece ferramentas e recursos de cores com uma ampla gama para a Web: mais cores, funções de manipulação e melhores gradientes.
Por mais de 25 anos, sRGB (azul-verde vermelho padrão) é a única gamute de cores para gradientes e cores CSS, com opções de espaço de cores como rgb(), hsl() e hexadecimal. É o recurso de gama de cores
mais comum entre as telas. Estamos muito acostumados a especificar cores dentro dessa gama.
À medida que as telas se tornam 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 idioma para amplas faixas de cores.
Se o CSS nunca fosse atualizado, ele ficaria preso nos intervalos de cores dos anos 90 para sempre, 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 consegue ver. Agradecemos ao CSS Color Level 4 por nos ajudar a escapar dessa armadilha, escrito principalmente por Lea Verou e Chris Liley.
No Chrome 111, há suporte para gamas e espaços de cor
CSS Color 4, bem como o Safari, que tem suporte para display-p3 desde
2016. Agora, o CSS pode oferecer suporte a telas HD (alta definição), especificando cores de
gama em HD, além de oferecer espaços de cores com especializações. Este guia explicará como você pode começar a aproveitar esse novo mundo das cores.
Faça um teste
Nos navegadores compatíveis, há 50% mais cores para escolher! Você achou que 16 milhões de cores soavam muito, espere até ver quantas cores alguns desses novos espaços podem mostrar. Além disso, pense em todos os gradientes que bandaram porque não havia profundidade de bits suficiente. Isso também está resolvido.
Além de ter mais cores, provavelmente as mais vívidas que a tela é capaz de fazer, os novos espaços de cor oferecem ferramentas e métodos exclusivos para gerenciar e criar sistemas de cores. Por exemplo, antes tínhamos HSL e seu canal "lightness", que era o melhor que os desenvolvedores da Web tinham. Agora, no CSS, temos a "clareza perceptível" do LCH.
Além disso, os gradientes e a mistura recebem algumas atualizações: suporte ao espaço de cores, opções de interpolação de matiz e menos faixas. A imagem a seguir mostra alguns dos upgrades de combinação. As duas principais misturas de cores estão em sRGB. As duas misturas de cores abaixo estão na tela p3. A tela p3 tem uma cor mais vívida, e as misturas resultam em completamente preto e branco no meio. Já sRGB parece um pouco dessaturado e as misturas do meio não apresentam resultados em preto ou branco completos.
https://codepen.io/web-dot-dev/pen/poZgXQb
Este guia aborda onde a cor esteve, para onde ela está indo e como o CSS vai permitir e oferecer suporte aos desenvolvedores da Web para gerenciar as cores.
Visão geral
O problema com as cores e a Web é que o CSS não está pronto para alta definição, enquanto as telas que a maioria das pessoas tem no bolso, no colo ou montadas nas paredes têm uma ampla gama e prontas para cores de alta definição. A capacidade de cores das telas aumentou mais rápido do que a do CSS. Agora o CSS está aqui para superar isso.
Há muito mais do que apenas "mais cores" também. Ao final deste artigo, você poderá especificar mais cores, aprimorar 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 que ela tem para escolher. Na imagem a seguir, três gamas são comparadas, e quanto maior o tamanho, mais cores ela oferece.
Uma gama de cores também pode ter um nome. como uma bola de basquete versus uma bola de beisebol ou uma xícara de café vente versus um grande. Um nome para o tamanho pode ajudar as pessoas a se comunicarem. Aprender esses nomes da gama de cores ajuda você a se comunicar e entender rapidamente uma variedade de cores.
Neste artigo, apresentaremos sete novas gamas, todas com um intervalo maior do que o sRGB, e descreveremos os diferentes recursos delas para ajudar você a escolher qual usar:
Gama visual humano
As gamas de cores são frequentemente comparadas à gama visual humana: toda a cor que acreditamos que o olho humano consegue ver. O HVS geralmente é representado com um diagrama de cromática (link em inglês), como este:
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ê encontrará triângulos abaixo. Essa é a maneira do setor de se comunicar e comparar as gamas de cores.
O que é um espaço de cor?
Os espaços de cores são arranjos de uma gama, estabelecendo uma forma e um método de acessar cores. Muitos são formas simples em 3D, como cubos ou cilindros. Essa organização de cores determina quais cores estão 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. HSL é um espaço de cor cilíndrico, em que as cores são acessadas com um ângulo de matiz e as coordenadas em dois eixos
A especificação de nível 4 introduz 12 novos espaços de cor para procurar cores das sete novas gamas compartilhadas anteriormente:
- Linear sRGB
- LCH (link em inglês)
- okLCH
- LABORATÓRIO
- okLAB
- Display p3
- Rec2020
- RGB a98
- ProPhoto RGB
- XYZ
- XYZ d50
- XYZ d65
além dos quatro espaços de cor disponíveis anteriormente:
Resumo da gama de cores e do espaço de cores
Um espaço de cor é um mapeamento de cores em que a gama é um intervalo de cores. Considere uma gama de cores como o total de partículas e um espaço de cor como uma garrafa feita para armazenar esse intervalo de partículas.
Aqui está um visual interativo de Alexey Ardov que demonstra espaços de cores. Aponte, arraste e aplique zoom na demonstração. Mude o espaço de cores para conferir outros espaços.
- Use a gama de cores para falar sobre um intervalo de cores, como faixa baixa ou estreita em comparação com a gama alta ou ampla.
- Use espaços de cores para falar sobre arranjos de cores, sintaxe usada para especificar uma cor, manipular e interpolar a cor.
Como acessar mais cores, novos espaços e resultados de depuração
A CSS Color 4 descreve vários novos recursos e ferramentas para CSS e cores. Primeiro, vamos recapitular onde a cor estava antes desses novos recursos. Em seguida, uma visão geral dos novos espaços de cor, sintaxes e ferramentas.
O Codepen a seguir mostra todas as sintaxes de cor novas e antigas juntas:
Uma revisão dos espaços de cores clássicos
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(). Então, em 2017, apareceu o hex com alfa. Por último, recentemente, o hwb() começou a receber
suporte a navegadores.
Todos esses espaços de cores clássicos fazem referência a cores dentro da mesma gama, o sRGB.
HEX
O espaço de cores hexadecimal especifica R, G, B e A com números hexadecimal. Os exemplos de código a seguir mostram todas as maneiras como essa sintaxe pode especificar vermelho, verde e azul, além de 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
O espaço de cores RGB oferece 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 a normalização de sintaxe estar nas especificações, portanto, você verá sintaxes de vírgula e sem vírgula à solta. 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% / 50%);
--empty-channels: rgb(none none none);
}
HSL
Um dos primeiros espaços de cores a se orientar em direção à linguagem e comunicação humana, o HSL (saturação de matiz e brilho) 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 o RGB, ele também tinha vírgulas na sintaxe, mas, a partir de agora, 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
Outro espaço de cores da gama sRGB orientado para como os humanos descrevem as cores é o HWB (matiz, branco e escuridão). Os autores podem escolher um matiz 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%);
}
Conheça os novos espaços de cores na Web
Os espaços de cores a seguir oferecem acesso a gamas maiores do que o sRGB. O espaço de cores display-p3 oferece quase o dobro de cores do RGB, enquanto Rec2020 oferece quase o dobro de cores do display-p3. São várias cores!
A função color()
A nova função
color()
pode ser usada para qualquer espaço de cores que especifique cores com os canais
R, G e B. color() usa um parâmetro de espaço de cores primeiro e, em seguida, uma série de
valores de canal para RGB e, opcionalmente, um valor alfa.
Você verá que muitos dos novos espaços de cor usam essa função porque, como
funções especializadas, como rgb, srgb, hsl, hwb etc., estava crescendo para uma
longa lista, sendo mais fácil ter o espaço de cores como um parâmetro.
Vantagens
- Um espaço normalizado para acessar espaços de cor que usam canais RGB.
- Pode escalonar verticalmente para qualquer espaço de cores com base em RGB de ampla gama.
Desvantagens
- Não funciona com HSL, HWB, LCH, okLCH ou okLAB
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
sRGB via color()
Esse espaço de cores oferece os mesmos recursos que rgb(). Ela também oferece
decimales entre 0 e 1, usados exatamente como 0% a 100%.
Vantagens
- Quase todas as telas são compatíveis com o intervalo desse espaço de cores.
- Suporte a ferramentas de design.
Desvantagens
- Não é perceptivamente linear (como
lch()é) - Não há uma gama ampla de cores.
- Os gradientes geralmente passam por uma zona morta.
.valid-css-srgb-colors {
--percents: color(srgb 34% 58% 73%);
--decimals: color(srgb .34 .58 .73);
--percents-with-opacity: color(srgb 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb none none none);
--empty-channels-black2: color(srgb);
}
sRGB linear via color().
Essa alternativa linear ao RGB oferece uma intensidade de canal previsível.
Vantagens
- Acesso direto aos canais RGB, útil para coisas como motores de jogos ou shows de luzes.
Desvantagens
- Perceptivamente, não linear.
- As bordas pretas e brancos estão preenchidas.
.valid-css-srgb-linear-colors {
--percents: color(srgb-linear 34% 58% 73%);
--decimals: color(srgb-linear .34 .58 .73);
--percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb-linear none none none);
--empty-channels-black2: color(srgb-linear);
}
Os gradientes são discutidos em detalhes mais tarde,
mas é importante observar um gradiente de srgb e linear-srgb de preto para branco
para ilustrar as diferenças:
LC
O primeiro espaço desta postagem apresenta a sintaxe para acessar cores fora da gama RGB. Também é o primeiro a facilitar a criação de cores para uma tela. Isso ocorre porque todas as cores de espaço da CIE (lch, oklch, laboratório, oklab) são capazes de representar todo o espectro de cores visíveis pelo ser humano.
Esse espaço de cores é modelado de acordo com a visão humana e oferece sintaxe para especificar qualquer uma dessas cores e muito mais. Os canais LCH são lightness, chroma e hue. Tonalidade sendo um ângulo, como em HSL e HWB. A luminosidade é um valor entre 0 e 100, mas, diferentemente do brilho da HSL, ela é uma iluminação especial, "perceptualmente linear" e centrada em pessoas. Chroma é semelhante à saturação e pode variar de 0 a 230, mas também é tecnicamente ilimitado.
Vantagens
- Manipulação de cor previsível devido à forma mais linear (consulte oklch).
- Usa canais conhecidos.
- Costumam ter gradientes vibrantes.
Desvantagens
- Fácil de sair da gama.
- Em raras ocasiões, o gradiente precisa de um ponto médio de ajuste para evitar a mudança de matiz.
.valid-css-lch-colors {
--percent-and-degrees: lch(58% 32 241deg);
--just-the-degrees: lch(58 32 241deg);
--minimal: lch(58 32 241);
--percent-opacity: lch(58% 32 241 / 50%);
--decimal-opacity: lch(58% 32 241 / .5);
/* chromaless and hueless */
--empty-channels-white: lch(100 none none);
--empty-channels-black: lch(none none none);
}
LABORATÓRIO
Outro espaço de cores feito para acessar a gama CIE, novamente com uma dimensão de brilho perceptivamente linear (L). A e B do laboratório representam os eixos exclusivos da visão de cor humana: vermelho-verde e azul-amarelo. Quando A recebe um valor positivo, ele adiciona o vermelho e o verde quando está abaixo de 0. Quando B recebe um número positivo, ele adiciona amarelo, enquanto os valores negativos estão em direção ao azul.
Vantagens
- Gradientes perceptivamente consistentes.
- High Dynamic Range.
Desvantagens
- Potencial para mudança de matiz.
- Dificuldade de criar ou adivinhar uma cor ao ler valores.
.valid-css-lab-colors {
--percent-and-degrees: lab(58% -16 -30);
--minimal: lab(58 -16 -30);
--percent-opacity: lab(58% -16 -30 / 50%);
--decimal-opacity: lab(58% -16 -30 / .5);
/* chromaless and hueless */
--empty-channels-white: lab(100 none none);
--empty-channels-black: lab(none none none);
}
OKLCH
Esse espaço de cores é corretivo para LCH. E, assim como LCH, (L) continua a representar luminosidade perceptivamente linear, C para chroma e H para matiz.
Este espaço parece familiar se você já trabalhou com HSL ou LCH. Escolha um ângulo na roda de cores para H, escolha uma quantidade de luminosidade ou escuro ajustando L, mas teremos chroma em vez de saturação. Eles são bastante idênticos, exceto pelo fato de que os ajustes de luminosidade e chroma tendem a ocorrer em pares, ou pode ser fácil solicitar cores cromáticas altas que vão fora da gama desejada.
Vantagens
- Sem surpresas ao trabalhar com tons de azul e roxo.
- Brilho perceptivamente linear.
- Usa canais conhecidos.
- High Dynamic Range.
- Tem um seletor de cores moderno, dos Evil Martians.
Desvantagens
- Fácil de sair da gama.
- Novos e pouco explorados.
- Poucos seletores de cores.
.valid-css-oklch-colors {
--percent-and-degrees: oklch(64% .1 233deg);
--just-the-degrees: oklch(64 .1 233deg);
--minimal: oklch(64 .1 233);
--percent-opacity: oklch(64% .1 233 / 50%);
--decimal-opacity: oklch(64% .1 233 / .5);
/* chromaless and hueless */
--empty-channels-white: oklch(100 none none);
--empty-channels-black: oklch(none none none);
}
LABORATÓRIO
Este espaço é corretivo para o LAB. Ele também é considerado um espaço otimizado para a qualidade do processamento de imagens, o que, para nós no CSS, significa gradientes e qualidade de manipulação da função de cor.
Vantagens
- Espaço padrão para animações e interpolações.
- Brilho perceptivamente linear.
- Nenhuma mudança de matiz como o LABORATÓRIO.
- Gradientes perceptivamente consistentes.
Desvantagens
- Novos e pouco explorados.
- Poucos seletores de cores.
.valid-css-oklab-colors {
--percent-and-degrees: oklab(64% -.1 -.1);
--minimal: oklab(64 -.1 -.1);
--percent-opacity: oklab(64% -.1 -.1 / 50%);
--decimal-opacity: oklab(64% -.1 -.1 / .5);
/* chromaless and hueless */
--empty-channels-white: oklab(100 none none);
--empty-channels-black: oklab(none none none);
}
Rede de Display P3
A gama e o espaço de cores da tela P3 se tornaram populares desde que a Apple os ofereceu com o iMac da Apple desde 2015. A Apple também oferece suporte a display-p3 em páginas da Web via CSS desde 2016, cinco anos à frente de qualquer outro navegador. Se vier do sRGB, esse é um ótimo espaço de cores para começar a trabalhar à medida que você move estilos para um intervalo dinâmico maior.
Vantagens
- Ótimo suporte, considerado o valor de referência para telas HDR.
- 50% mais cores do que sRGB.
- O DevTools oferece um ótimo seletor de cores.
Desvantagens
- No futuro, será ultrapassado pelos espaços Rec2020 e CIE.
.valid-css-display-p3-colors {
--percents: color(display-p3 34% 58% 73%);
--decimals: color(display-p3 .34 .58 .73);
--percent-opacity: color(display-p3 34% 58% 73% / 50%);
--decimal-opacity: color(display-p3 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(display-p3 none none none);
--empty-channels-black2: color(display-p3);
}
Rec2020
O Rec2020 faz parte da mudança para a televisão de ultra-alta definição (UHDTV), que oferece uma ampla variedade de cores para uso em mídias 4K e 8K. O Rec2020 é outra gama baseada em RGB, maior que o display-p3, mas não tão comum entre consumidores quanto o Display P3.
Vantagens
- Cores Ultra HD.
Desvantagens
- Não tão comum entre os consumidores (ainda).
- Não é comumente encontrado em dispositivos portáteis ou tablets.
.valid-css-rec2020-colors {
--percents: color(rec2020 34% 58% 73%);
--decimals: color(rec2020 .34 .58 .73);
--percent-opacity: color(rec2020 34% 58% 73% / 50%);
--decimal-opacity: color(rec2020 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(rec2020 none none none);
--empty-channels-black2: color(rec2020);
}
RGB A98
A abreviação do Adobe 1998 RGB, A98 RGB foi criada pela Adobe para apresentar a maioria das cores atingíveis por impressoras CMYK. Ele oferece mais cores que o sRGB, principalmente nos tons ciano e verde.
Vantagens
- Maior que os espaços de cor sRGB e Display P3.
Desvantagens
- Não é um espaço comum dentro do qual designers digitais trabalham.
- Poucas pessoas estão transferindo paletas do CMYK.
.valid-css-a98-rgb-colors {
--percents: color(a98-rgb 34% 58% 73%);
--decimals: color(a98-rgb .34 .58 .73);
--percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(a98-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(a98-rgb none none none);
--empty-channels-black2: color(a98-rgb);
}
ProPhoto RGB
Criado pela Kodak, esse amplo espaço de gama oferece exclusivamente cores primárias em uma ampla variedade e apresenta mudanças de matiz mínimas ao mudar a claridade. Ela também afirma cobrir 100% das cores das superfícies do mundo real, conforme documentado por Michael Pointer em 1980.
Vantagens
- A tonalidade mínima muda ao alterar o brilho.
- Cores primárias vibrantes.
Desvantagens
- Cerca de 13% das cores oferecidas são imaginárias, o que significa que não estão dentro do espectro visível humano.
.valid-css-prophoto-rgb-colors {
--percents: color(prophoto-rgb 34% 58% 73%);
--decimals: color(prophoto-rgb .34 .58 .73);
--percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(prophoto-rgb none none none);
--empty-channels-black2: color(prophoto-rgb);
}
XYZ, XYZ-d50 e XYZ-d65
O espaço de cores CIE XYZ abrange todas as cores visíveis para uma pessoa com visão média. É por isso que ele é usado como referência padrão para outros espaços de cor. Y é luminância, X e Z são cromas possíveis dentro da luminância Y especificada.
A diferença entre d50 e d65 é o ponto branco, em que d50 usa os pontos brancos d50 e d65 usa o ponto branco d65.
Vantagens
- O acesso à luz linear tem casos de uso úteis.
- Ótimo para a mistura física de cores.
Desvantagens
- Perceptivamente, não são lineares como lch, oklch, lab e oklab.
.valid-css-xyz-colors {
--percents: color(xyz 22% 26% 53%);
--decimals: color(xyz .22 .26 .53);
--percent-opacity: color(xyz .22 .26 .53 / 50%);
--decimal-opacity: color(xyz .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz none none none);
--empty-channels-black2: color(xyz);
}
.valid-css-xyz-d50-colors {
--percents: color(xyz-d50 22% 26% 53%);
--decimals: color(xyz-d50 .22 .26 .53);
--percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d50 none none none);
--empty-channels-black2: color(xyz-d50);
}
.valid-css-xyz-d65-colors {
--percents: color(xyz-d65 22% 26% 53%);
--decimals: color(xyz-d65 .22 .26 .53);
--percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d65 none none none);
--empty-channels-black2: color(xyz-d65);
}
Espaços de cor personalizados
A especificação CSS Color 5 também tem um caminho para ensinar ao navegador um espaço de cores personalizado. Esse é um perfil ICC que informa ao navegador como resolver cores.
@color-profile --foo {
src: url(path/to/custom.icc);
}
Depois de carregado, acesse as cores desse perfil personalizado com a função color()
e especifique os valores do canal para ele.
.valid-css-color-from-a-custom-profile {
background: color(--foo 1 0 0);
}
Interpolação de cores
A transição de uma cor para outra é encontrada em animações, gradientes e mistura de cores. Normalmente, essa transição é especificada como uma cor inicial e uma cor final, em que o navegador deve interpolar entre elas. Neste caso, "interpolar" significa gerar uma série de cores intermediárias para criar uma transição suave em vez de uma instantânea.
Com um gradiente, a interpolação é uma série de cores ao longo de uma forma. Com a animação, é uma série de cores ao longo do tempo.
@keyframes bg {
0%, 100% {
background: orange;
}
25% {
background: magenta;
}
50% {
background: lime;
}
75% {
background: cyan;
}
}
.circle {
animation: bg 5s ease-in-out infinite;
}
Com um gradiente, as cores intermediárias são mostradas de uma só vez:
Novidades sobre interpolação de cores
Com a adição de novas gamas e espaços de cores, há novas outras
opções de interpolação. A transição de uma cor in hsl de azul para branco
resulta em algo muito diferente do sRGB.
.classic-gradient-in-srgb {
background: linear-gradient(to right, blue, white);
}
.new-gradient-in-hsl {
background: linear-gradient(in hsl to right, blue, white);
}
A demonstração do Codepen não aparece?
O que acontece se você passar de uma cor em um espaço para uma cor em um espaço completamente diferente:
.gradient {
/* oklab will be the common space */
background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}
.lch {
/* lch is specified */
background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}
A demonstração do Codepen não aparece?
Felizmente, a especificação da Cor 4
tem instruções para os navegadores sobre como lidar com essas interpolações
de espaço entre cores. No caso acima para .gradient, os navegadores notarão os espaços de cores diferenciais e usarão o espaço de cores padrão oklab.
Você pode pensar que o navegador usaria "lch" como o espaço de cores, já que essa é a
primeira cor, mas não é. Por isso, mostro um segundo gradiente de comparação
.lch. O gradiente .lch é um gradiente do espaço de cores linear.
Menos faixas devido às cores de 16 bits
Antes dessa cor funcionar, todas as cores eram salvas em um número inteiro de 32 bits para representar os quatro canais: vermelho, verde, azul e Alfa. Isso significa 8 bits por canal e 2^ 24 cores possíveis (ignorando alfa). 2 ^ 24 = 16.777.216, "milhões de cores".
Depois disso, quatro valores de ponto flutuante de 16 bits, cada canal tem o próprio ponto flutuante em vez de agrupar. Isso representa um total de 64 bits de dados, resultando em muito mais de milhões de cores.
Este trabalho é necessário para oferecer suporte a cores HD. Isso aumenta a quantidade de informações de cor que podem ser armazenadas, o que tem um bom efeito colateral de significar que há mais cores para o navegador usar em um gradiente.
A faixa de gradiente ocorre quando não há cores suficientes para criar um gradiente suave e as "faixas" de cor ficam visíveis. As faixas são muito mitigadas com o upgrade para cores de resolução mais alta.
Como controlar a interpolação
A distância mais curta entre dois pontos é sempre uma linha reta. Com a interpolação de cores, os navegadores seguem o trajeto curto por padrão. Considere um cenário em que há dois pontos em um cilindro de cores HSL. Um gradiente adquire suas etapas de cor ao viajar ao longo da linha entre os dois pontos.
linear-gradient(to right, #94e99c, #e06242)
Visualização de cima para baixo de um cilindro HSL com uma linha entre as paradas de cor
A linha de gradiente acima vai diretamente entre a cor esverdeada e a cor avermelhada, passando pelo centro do espaço de cores. Embora a explicação acima seja ótima para ajudar no entendimento inicial, não é exatamente o que acontece. Este é o gradiente no Codepen a seguir. Ele claramente não está branco no meio, como mostrado na demonstração simulada.
No entanto, a área do meio do gradiente perdeu sua vitalidade. Isso ocorre porque as cores mais vibrantes estão na borda da forma do espaço de cores, não no centro de proximidade da interpolação. Isso é comumente chamado de zona morta. Existem algumas maneiras de corrigir ou contornar isso.
Especificar mais paradas de gradiente para evitar a zona morta
Uma técnica para evitar a zona morta hoje é adicionar mais paradas de cor ao gradiente que guiam intencionalmente a interpolação para permanecer dentro dos intervalos vibrantes de um espaço de cor. É literalmente uma solução alternativa, já que as paradas extras o ajudam a contornar a zona morta.
Uma ferramenta de gradiente criada por Erik Kennedy (em inglês) calcula outras paradas de cor para você, a fim de evitar a zona morta, mesmo em espaços de cores que tendem a se mover na direção dela. Ao usá-lo, transmitindo as mesmas cores do primeiro exemplo, mas mudando a interpolação de cor para HSL, o resultado será o seguinte:
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
Visualização de cima para baixo de um cilindro HSL com uma linha curva e nove pontos de cor
Com os pontos de parada guiados, a interpolação não é mais uma linha reta, mas parece curva ao redor da zona morta, ajudando a manter a saturação, resultando em um gradiente muito mais vibrante.
Embora a ferramenta faça um ótimo trabalho, e se você pudesse ter um controle semelhante ou maior diretamente do CSS?
Como direcionar a interpolação de cores
Na cor 4, a capacidade de controlar a estratégia de interpolação de matiz
foi adicionada e é uma nova maneira de contornar (:piscar:) a zona morta. Pense em um ângulo de matiz e considere um gradiente de dois pontos que só muda o ângulo, mudando de 140deg para 240deg, por exemplo.
Interpolação de matiz mais curta x mais longa
Por padrão, o gradiente usará a rota shorter que puder, a menos que você especifique que ele use a rota longer. As opções
de interpolação de matiz direcionam a rotação do ângulo, como dizer para alguém virar
à esquerda em vez de à direita (heh, Zoolander):
No exemplo visual acima de distâncias de interpolação de matiz, o caminho curto e o longo são simulados para ilustrar a diferença. A distância curta tem menos matizes entre ela, porque será percorrida pela menor distância possível, em que a longa distância terá percorrido por mais matizes.
Como aumentar x diminuir a interpolação de matiz
Existem mais duas estratégias de interpolação de matiz na Cor 4, mas elas são exclusivas para espaços de cores cilíndricos. Mantendo as duas cores dos exemplos anteriores, o visual agora mostra como o aumento e a diminuição funcionam.
O Codepen acima usou ColorJS para demonstrar o resultado esperado. O CSS que você escreveria para ter o mesmo efeito sem uma biblioteca JavaScript seria:
.longer-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl longer hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
.decreasing-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl decreasing hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
Para fechar a interpolação de matiz, confira este divertido playground em que é possível mudar a matiz entre duas paradas de cor e conferir os efeitos de uma escolha de interpolação de matiz, além de como os espaços de cores mudam os resultados do gradiente. Os efeitos podem ser muito diferentes. Considere isso como quatro novos truques que acabaram de ser adicionados à sua barra de ferramentas de cores.
Gradientes em espaços de cores diferentes
Cada espaço de cores, devido à forma e ao arranjo de cores exclusivos, resultará em um gradiente diferente. Veja os exemplos abaixo, especialmente no caso de "azul para branco". Veja como cada espaço de cor lida com isso de maneira diferente. Observe quantos ficam roxos no meio. Isso é chamado de "mudança de matiz" durante a interpolação.
A demonstração do Codepen não aparece?
A imagem mostrada é apenas um de muitos exemplos do Codepen. Vale a pena testar o Canary ou o Safari Tech Preview para testar.
Alguns gradientes nesses espaços são mais vibrantes do que outros ou percorrem menos
por zonas mortas (link em inglês).
Espaços como lab agrupam as cores de uma forma otimizada para saturação, em vez de espaços otimizados para que humanos escrevam cores como hwb().
.hwb {
background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}
A demonstração acima, embora sutil nos resultados, mostra uma interpolação mais consistente com o laboratório. No entanto, a sintaxe do laboratório não é simples de ler. Há números negativos muito desconhecidos em rgb ou hsl. Temos uma boa notícias: podemos usar hwb para uma sintaxe familiar, mas solicitar que o gradiente seja interpolado totalmente em outro espaço de cores, como o oklab.
.hwb {
background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
A demonstração do Codepen não aparece?
Este exemplo usa as mesmas cores em hwb, mas especifica o espaço de cores para
interpolação para hwb ou oklab. hwb é um ótimo espaço de cores para alta vibração, mas possíveis zonas mortas ou pontos brilhantes (consulte o ponto de acesso ciano no exemplo principal). O oklab é ótimo para gradientes lineares que permanecem saturados. Esse recurso é muito divertido, porque você pode testar alguns espaços de cores
diferentes para ver de qual gradiente você mais gosta.
Confira um Codepen experimentando gradientes e espaços de cor, misturando estratégias e combinando para explorar as possibilidades. Até mesmo uma transição de preto para branco é diferente em cada espaço de cor!
A demonstração do Codepen não aparece?
Restrição de gama
Existem cenários em que uma cor pode pedir algo fora da gama. Considere a seguinte cor:
rgb(300 255 255)
O máximo para um canal de cor no espaço de cores rgb é 255, mas aqui
300 foi especificado para vermelho. O que acontece? Restrição de gama.
A fixação ocorre quando informações extras são simplesmente removidas. 300 vai se tornar 255
internamente no mecanismo de cores. A cor agora está fixada no espaço.
Como escolher um espaço de cor
Muitas pessoas, depois de aprender sobre esses espaços de cores e seus efeitos, se sentem sobrecarregadas e querem saber qual "de um" escolher. De acordo com meus estudos e experiência, não vejo um espaço de cor único para todas as minhas tarefas. Cada uma tem momentos em que produzem o resultado desejado.
Se houvesse um espaço melhor, não haveria tantos novos espaços sendo introduzidos.
No entanto, posso dizer que os espaços da CIE (lab, oklab, lch e oklch) são meus
pontos de partida. Se o resultado não for o que estou procurando, vou testar outros espaços. Para misturar cores e criar gradientes, concordo com a
escolha de especificações padrão de oklab. Para sistemas de cores e cores gerais da interface, gosto de
oklch.
Aqui estão alguns artigos em que as pessoas compartilharam suas estratégias de cores
atualizadas com base nesses novos recursos e espaços de cor. Por exemplo, Andrey Sitnik
acionou totalmente o oklch, talvez ele convenca você a fazer o mesmo:
- OKLCH no CSS: por que mudamos de RGB e HSL, por Andrey Sitnik
- Color Formats por Josh W. Comeau
- OK, OKLCH, de Chris Coyier
Como migrar para cores CSS HD
Existem duas estratégias principais para atualizar as cores do seu projeto da Web para oferecer compatibilidade com telas amplas:
Degradação suave
Use os novos espaços de cor e deixe o navegador e o sistema operacional descobrirem qual cor será exibida com base nos recursos da tela.Aprimoramento progressivo
Use@supportse@mediapara avaliar os recursos do navegador do usuário e, se as condições forem atendidas, fornecer uma ampla gama de cores.
Se um navegador não entender a cor do display-p3, faça o seguinte:
color: red;
color: color(display-p3 1 0 0);
Se um navegador entender a cor do display-p3:
color: red;
color: color(display-p3 1 0 0);
Cada uma tem vantagens e desvantagens. Aqui está uma lista rápida de prós e contras:
Degradação suave
- Vantagens
- O trajeto mais simples.
- O navegador vai usar o mapa de variação ou fixar para sRGB se não for uma tela de gama ampla. Portanto, a responsabilidade é do navegador.
- Desvantagens
- O navegador pode limitar a gama ou exibir o mapa de uma cor que você não gosta.
- O navegador pode não entender a solicitação de cor e falhar totalmente. No entanto, isso pode ser atenuado especificando a cor duas vezes, permitindo que a cascata retorne a cor anterior que ela entende.
Aprimoramento progressivo
- Vantagens
- Mais controle com fidelidade de cores gerenciada.
- Uma estratégia aditiva que não afeta as cores atuais.
- Desvantagens
- Você precisa gerenciar duas sintaxes de cor separadas.
- Você precisa gerenciar duas gamas separadas de cores.
Verificando a compatibilidade com a gama e o espaço de cores
O navegador permite verificar o suporte para a ampla gama de recursos e a compatibilidade com a sintaxe de cores de CSS e JavaScript. A gama exata de cores que o usuário tem não é disponibilizada. Uma resposta generalizada é fornecida para que a privacidade do usuário seja mantida. No entanto, a compatibilidade exata com o espaço de cor é disponibilizada, já que não é específica dos recursos do hardware do usuário, como a gama.
Consultas de suporte para gama de cores
Os exemplos de código a seguir verificam o intervalo de cores do usuário visitante na tela.
Verificando do CSS
A consulta de suporte menos específica é a
consulta de mídia
dynamic-range:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
É possível solicitar suporte aproximado ou mais com a
consulta de mídia
color-gamut:
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
Há outras duas consultas de mídia para verificar o suporte:
Verificando do JavaScript
Em JavaScript, a função
window.matchMedia()
pode ser chamada e transmitir uma consulta de mídia para avaliação.
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
O padrão acima pode ser copiado para o restante das consultas de mídia.
Consultas de compatibilidade de espaço de cores
Os exemplos de código a seguir verificam o navegador do usuário visitante e a seleção de espaços de cor para trabalhar.
Verificando do CSS
O suporte a espaço de cores individual pode ser consultado usando uma
consulta @supports:
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
Verificando do JavaScript
Em JavaScript, a função
CSS.supports()
pode ser chamada e transmitir um par de propriedades e valores para que o
navegador entenda.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
Reunir o hardware e as verificações de análise
Enquanto espera cada navegador implementar esses novos recursos de cores, é bom verificar a capacidade de hardware e de análise de cores. Muitas vezes, isso é o que uso ao melhorar progressivamente as cores para alta definição:
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
Depurar cores com o Chrome DevTools
O Chrome DevTools foi atualizado e está equipado com novas ferramentas para ajudar os desenvolvedores a criar, converter e depurar cores em alta definição.
Seletor de cores atualizado
O seletor de cores agora oferece suporte a todos os novos espaços de cor. Permitir que os autores interajam com os valores do canal como fariam.
Limites de gama
Uma linha de limite de gama também foi adicionada, desenhando uma linha entre as gamas srgb e display-p3. Deixando claro em qual gama a cor selecionada está.
Isso ajuda os autores a diferenciar visualmente as cores em alta definição das cores não HD.
É especialmente útil ao trabalhar com a função color() e os novos
espaços de cor, porque eles são capazes de produzir cores não HD e HD. Se
você quiser verificar em qual gama sua cor está, abra o seletor de cores e confira.
Conversão de cores
O DevTools foi capaz de converter cores entre formatos com suporte, como hsl,
hwb, rgb e hex há muitos anos. shift + click em uma amostra de cor quadrada no
painel "Estilos" para realizar essa conversão. As novas ferramentas de cores não só percorrem
as conversões, mas também geram um pop-up em que os autores podem ver e escolher a
conversão desejada.
Ao converter, é importante saber se ela foi cortada para caber no espaço. O DevTools agora tem um ícone de aviso para a cor convertida que alerta você sobre esse recorte.
Confira mais recursos de depuração de CSS no DevTools no anúncio recente.
Conclusão
Espaços de cor não sRGB na Web estão no início, mas acredito que veremos 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 forte para se usar na barra de ferramentas dos criadores. Cada espaço de cores oferece recursos exclusivos e um motivo pelo qual foi adicionado à especificação CSS, e você pode começar com esses recursos e adicioná-los conforme necessário.
Divirta-se com estes novos brinquedos de cores! Mais vitalidade, manipulações e interpolações consistentes e, em geral, oferecem uma experiência mais colorida aos usuários.
Mais informações
- https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
- https://www.w3.org/Graphics/Color/Workshop/slides/lilley/lilley.html
- https://darker.ink/writings/Towards-richer-colors-on-the-Web
- https://bottosson.github.io/posts/colorpicker/
- https://www.w3.org/Graphics/Color/Workshop/slides/Erias.pdf
- https://atmos.style/blog/lch-color-space
- https://stripe.com/blog/accessible-color-systems
- https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
- https://afc163.github.io/color3d/
- https://github.com/nschloe/colorio#gamut-visualization
- https://www.learnui.design/tools/gradient-generator.html
- https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
- https://www.w3.org/TR/css-color-4/
- https://www.w3.org/TR/css-color-5/
- https://en.wikipedia.org/wiki/CIE_1931_color_space
- https://www.joshwcomeau.com/css/color-formats/
- https://ciechanow.ski/color-spaces/