O CSS Color 4 leva ferramentas e recursos de cores de 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. Nós nos acostumamos
a especificar cores nela.
À 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 enxergar. Agradecemos ao CSS Color Level 4 por nos ajudar a escapar, escrito principalmente por Lea Verou e Chris Liley.
O Chrome é compatível com gamas e espaços de cores CSS Color 4. O CSS agora é compatível com telas em HD (alta definição), especificando cores de gamas de alta definição, além de oferecer espaços de cores com especializações.
Faça um teste
Este guia tem três partes. Continue lendo para lembrar onde a cor esteve. Em seguida, leia para onde a cor vai e como gerenciar as cores no futuro migrando para cores em HD.
Visão geral
Em navegadores compatíveis, há 50% mais cores para escolher. Se você achou que 16 milhões de cores soavam muito, aguarde 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 mais cores, que podem ser as mais vívidas da tela, 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 algumas das melhorias misturadas.
https://codepen.io/web-dot-dev/pen/poZgXQb
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". Ao final destes documentos, 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.
Este artigo analisa as gamas de cores anteriores. Leia sobre as sete novas gamas em Acessar mais cores e novos espaços.
Gama visual humano
As gamas de cores são frequentemente comparadas com a gama visual humana, ou seja, 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. além dos quatro espaços de cor anteriormente disponíveis:
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.
Uma revisão dos espaços de cores clássicos {#classic-color-spaces}
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.
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%);
}
Próximas etapas
Leia sobre os novos espaços de cor, sintaxes e ferramentas, e aprenda a migrar para cores em alta definição.
Espaços de cor não sRGB na Web estão no início, mas vamos perceber um aumento no uso por parte de 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.
Recursos
Leia mais dos nossos artigos de nível de cor 5.
Além disso, você pode encontrar leituras adicionais na Web:
- Módulo de cor CSS Nível 4 do W3C
Módulo de cor CSS Nível 5 do W3C
Okhsv e Okhsl: dois novos espaços de cor para escolha de cores (em inglês)
E ferramentas:
- afc163.github.io/color3d/ (link em inglês)
- Visualização de gama
- Gerador de gradiente vívido