Guia de cores CSS de alta definição

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

Adam Argyle

Há mais de 25 anos, sRGB (padrão vermelho verde azul) foi a única cor gamut para gradientes e cores CSS, com espaço de cores as ofertas dentro dele, como rgb(), hsl() e hexadecimal. É a cor mais comum capacidade de gama entre telas, em um denominador comum. Crescemos acostumado a especificar cores nele.

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

À 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 desses intervalos mais amplos. Formatos de cores atuais não têm idioma para amplas variações de cores.

Se o CSS não fosse atualizado, ficaria preso para sempre nos intervalos de cores dos anos 90, forçado nunca corresponder à ampla gama encontrada em imagens e vídeos. Interrompido, mostrando apenas 30% das cores que o olho humano consegue ver. Agradecemos a CSS Color Level 4 por nos ajudar a escapar, escrito principalmente por Lea Verou e Chris Liley.

O Chrome é compatível com as cores CSS Color 4 e espaços de cor. Agora o CSS é compatível com HD (alta definição) que especifica cores de gamas de alta definição, além de oferecer espaços de cor com especializações.

Várias imagens em transição entre cores amplas e estreitas gamas, ilustrando a nitidez das cores e seus efeitos.
Faça um teste

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

Visão geral

Nos navegadores compatíveis, há 50% mais cores para escolher. Se você pensou que 16 de milhões de cores parecia muito, espere até ver quantas cores esses novos espaços podem aparecer. Além disso, pense em todos os gradientes banded porque não havia a profundidade de bits, isso também foi resolvido.

Além de mais cores, provavelmente as cores 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 o HSL e sua "iluminação" canal, que era o melhor dos desenvolvedores Web. Agora, no CSS, temos a "iluminação perceptiva (link em inglês) do LCH.

Visualize você mesmo no Codepen

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

A imagem a seguir mostra algumas das atualizações de combinação.

Os dois principais mixes de cores estão em sRGB com cores sRGB. Os dois mixes de cores inferiores estão na tela p3. A Rede de Display p3 tem mais cores vivas e as misturas resultam em preto e branco no meio, em que sRGB parece um pouco dessaturado e as misturas do 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 os monitores que a maioria das pessoas tem nos bolsos, no colo ou embutidos nas paredes estão disponíveis para uma ampla gama de cores e cores de alta definição. O recurso de cores das telas cresceu mais rápido do que o CSS, agora o CSS chegou para ficar em dia.

Há muito mais do que apenas "mais cores". Ao final desses documentos, você poderá especificar mais cores, aprimorar gradientes e escolher as melhores espaços de cor 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 comentar sobre a gama de uma tela ou sobre a gama de cores que ela deve escolher se originou. 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 contra uma bola de beisebol vente café cup vs a grande; um nome para o tamanho pode ajudar as pessoas se comunicar. Aprender esses nomes da gama de cores ajuda você a se comunicar e agilizar compreender uma variedade de cores.

Este artigo analisa as gamas de cores anteriores. Você pode ler sobre a sete novas gamas em Acesse mais cores e novos espaços.

Gama visual humano

A gama de cores é frequentemente comparada com a gama visual humana. a totalidade cor que acreditamos que o olho humano consegue ver. O HVS costuma ser representado diagrama de cromaticidade, como este:

Fonte: Wikipédia

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.

Assim como você viu os triângulos acima, comparando tamanhos de gama, você também encontrará triângulos a seguir. Essa é a maneira do setor de se comunicar sobre gamas de cores e e compará-los.

O que é um espaço de cores?

Espaços de cor são arranjos de uma gama, estabelecendo uma forma e um método de acessando as cores. Muitos são formas simples em 3D, como cubos ou cilindros. Esta cor a organização determina quais cores estão próximas umas das outras e como acessar e cores interpoladas funcionarão.

RGB é como um espaço de cores retangular, em que as cores são acessadas especificando coordenadas em 3 eixos. HSL é um espaço de cores cilíndrico, no qual 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. Eles são além das quatro cores vagas antes disponíveis:

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

Resumo do espaço de cores e gama 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 cor como uma garrafa feitas para reter esse intervalo de partículas.

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

• Use gamas de cores para falar sobre uma variedade de cores, como baixa ou estreita gama versus alta ou ampla gama.
• Use espaços de cor para falar sobre a organização das cores, a sintaxe usada para especificar uma cor, manipular cores e interpolar por meio da cor.

.

Acima está a gama sRGB de partículas que se encaixam em um espaço de cores de cubo RGB Origem da imagem

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

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

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

Por volta de 2010, dependendo de seu navegador, o CSS poderia usar hsl() cores. Depois, em 2017, hex com alfa. Por último, somente recentemente, hwb() começou a receber são compatíveis com navegadores.

Todos esses espaços de cores clássicos fazem referência a cores 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 hexadecimal. O seguinte os exemplos de código mostram todas as maneiras pelas quais essa sintaxe pode especificar vermelho, verde e azul e 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 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 alguma normalização de sintaxe . Portanto, você verá sintaxes de vírgula e nenhuma vírgula em si. Transporte para a frente, não é mais necessário usar vírgulas.

.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

Compatibilidade com navegadores

• 1
• 12
• 1
• 3,1

Origem

Um dos primeiros espaços de cores a se orientar para a linguagem humana e comunicação, HSL (saturação e luminosidade de matiz) oferece todas as cores no gama sRGB, sem que seu cérebro precise saber como o vermelho, o verde e o azul interagem. Assim como no RGB, originalmente, ela também tinha vírgulas na sintaxe, mas a movimentação para a frente, não é mais necessário usar vírgulas.

.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 como os humanos descrevem as cores é o HWB (matiz, brancura, escuridão). Os autores podem escolher um tom e misturar o branco ou o 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, depois aprenda a migrar para cores em alta definição (link em inglês).

Os espaços de cor não sRGB na Web estão no início, mas veremos um aumento na utilização por parte de designers e desenvolvedores ao longo do tempo. Saber qual espaço de cor para construir um sistema de design, por exemplo, é uma ferramenta forte para se uma barra de ferramentas de criadores. Cada espaço de cor oferece características únicas e uma razão pela qual foi adicionado à especificação CSS. Não há problema em começar aos poucos e adicionar conforme necessário.

Recursos

Leia mais em nossos artigos de nível de cor 5.

• Sintaxe de cores relativas a CSS
• Mix de cores do CSS

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

• Módulo de cores CSS nível 4 do W3C

• Módulo de cores CSS nível 5 do W3C

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

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

• Rumo a cores mais vivas na Web

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

• Rumo a cores mais vivas no Chromium (PDF)

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

• Como projetar sistemas de cores acessíveis (link em inglês)

• Color Espaços, de Hannah Weller

• Grande gama de cores em CSS com Display-P3

• Espaço de cores do CIE 1931 (em inglês)

• Formatos de cor no CSS

• ColorEspaços de Bartosz Ciechanowski

E ferramentas:

• afc163.github.io/color3d/ (link em inglês)
• Visualização da gama
• Gerador de gradiente vívido