🏅 🐑 💇🏿 Cores CSS LCH 🏂🏽 ⭐️ 💆🏽

Sempre me interessei pela ciência da cor. Em 2014, falei em várias conferências, falando sobre a especificação CSS Color 4. Antes disso, em 2009, escrevi um programa para escolher cores. Ela usou um applet Java oculto para suportar perfis de cores ICC e para funcionar corretamente com o CMYK. Foi, até onde eu sei, o primeiro programa desse tipo. Eu nunca a publiquei, mas isso levou à publicação desta publicação. O interesse pela cor me levou ao homem que se tornou meu marido. Em 2019, tornei-me co-editor da especificação CSS Color 5 . Meu objetivo é concretizar minha proposta.

modificação de cores, que visa permitir que os designers personalizem arbitrariamente os canais de cores para criar opções de cores. Eu também quero combinar minha oferta com esta oferta. As cores CSS LCH são algo que realmente me fascinam. Estou profundamente convencido de que os designers, quando aprenderem mais sobre as cores LCH, ficarão indignados com o fato de ainda não terem a oportunidade de usá-las.

O que é LCH?

O módulo CSS Color 4 possui, entre outras coisas, uma definição de cores LCH . Hoje, todos os principais navegadores começaram a implementar seu suporte ou estão considerando seriamente essa possibilidade:

No suporte ao Safari, o LCH já está sendo implementado.
Esse recurso é esperado no Chrome .
A possibilidade de implementar esse recurso no Firefox é discutida .

LCH é um espaço de cores que possui algumas vantagens sobre os espaços de cores RGB / HSL que todos estão acostumados a trabalhar com CSS. Na verdade, eu iria ainda mais longe e chamaria a LCH de uma tecnologia que pode mudar drasticamente a maneira como as cores funcionam na web. Aqui estão três fatos que me permitem fazer tais declarações.

▍1 O LCH, comparado ao sRGB, dá acesso a cerca de 50% mais cores

Este é um grande passo em frente. No momento, qualquer cor CSS que podemos definir é definida no espaço de cores sRGB . Alguns anos atrás, isso era mais do que suficiente, pois todos os monitores, exceto os profissionais, tinham uma gama de cores menor que sRGB. No entanto, agora tudo não é mais assim. Hoje, a gama de cores (ou seja, o intervalo de cores que pode ser exibido) da maioria dos monitores está próxima de P3 . E o volume desse espaço de cores é 50% maisque a quantidade de espaço sRGB. Atualmente, o CSS não tem absolutamente nenhum acesso a essas cores. Deixe-me repetir isso: não temos acesso a um terço das cores que os monitores modernos podem exibir. E não se trata de algumas cores menores. Estamos falando das cores mais vivas que os monitores podem exibir. Nossos sites parecem pálidos devido ao fato de o hardware do monitor estar evoluindo mais rapidamente do que as especificações CSS e as implementações do navegador.

Espaço de cor sRGB e P3

§ 2 LCH (e Lab) são espaços de cores uniformes na percepção

Ao trabalhar com LCH, a mesma alteração numérica no espaço de cores fornece a mesma diferença percebida entre as cores. Essa propriedade do espaço de cores é chamada de "uniformidade perceptiva". Os espaços de cores RGB ou HSL não são uniformes na percepção. Aqui está um exemplo muito revelador desse recurso ( aqui está a fonte deste exemplo).

Heterogeneidade da percepção das cores HSL: as cores

nas linhas superior e inferior diferem em tom em 20 graus. Você acha que a diferença percebida entre essas cores é a mesma?

▍3 O brilho no LCH é um indicador que significa algo

No espaço de cores HSL, a luminosidade é um indicador sem sentido. As cores podem ter a mesma luminosidade, mas variam muito na luminosidade percebida. Meu exemplo favorito é uma comparação de amarelo e azul. Você pode não acreditar em mim, mas as cores mostradas abaixo têm a mesma leveza HSL.

Cores HSL com a mesma luminosidade

Ambas as cores têm uma luminosidade de 50%, mas certamente não têm o mesmo brilho percebido. Qual é o significado do conceito de "leveza" no HSL?

Aqui você pode discutir comigo, dizendo que a leveza, pelo menos, faz algum sentido com o mesmo tom de cor (matiz) e saturação de cor. Ou seja - ao alterar a luminosidade na mesma cor. E a verdade: aumentando a leveza do HSL, obtemos uma cor mais clara e diminuindo - uma cor mais escura. Mas o que acontece não será necessariamente da mesma cor.

Ajustando a luminosidade com tom e saturação

de cores constantes Ambas as cores têm o mesmo matiz e a mesma saturação, mas elas parecem uma versão mais escura e mais clara da mesma cor?

Ao usar o modelo de cores LCH, cores com a mesma luminosidade são percebidas como cores com o mesmo brilho e cores com a mesma cor são percebidas como cores da mesma saturação.

Como as cores LCH são organizadas?

LCH é a abreviação de Luminosidade, Croma, Matiz (luminosidade, cor, tom). Os componentes de cores neste modelo de cores têm alguma relação com os componentes do modelo de cores HSL. Mas existem sérias diferenças entre os componentes desses modelos de cores.

Os ângulos de afinação no LCH não correspondem exatamente aos tons HSL. Isso é - 0 - isso não é completamente vermelho. Essa cor é bem mais próxima da magenta. E 180 não é uma cor turquesa, é azul-esverdeado e é completamente complementar.

Cores com o mesmo brilho percebido

Observe que essas cores, embora tenham tons muito diferentes, parecem cores com o mesmo brilho percebido.

No espaço de cores HSL, a saturação é representada por um intervalo puro de valores de 0 a 100. O fato é que esse espaço é o resultado de uma simples transformação de RGB em coordenadas polares. Em LCH, no entanto, o valor do componente croma é teoricamente ilimitado. O padrão LCH (como o Lab) foi projetado para representar toda a gama de cores percebidas pelos seres humanos. Nem todas essas cores podem ser exibidas no monitor, mesmo as que suportam o espaço de cores P3. Além disso, estamos falando não apenas do número máximo de cores exibidas, dependendo da gama de cores do monitor, mas também da diferença de cores.

Talvez essa idéia seja mais fácil de entender se eu a ilustrar com um exemplo. Por uma questão de simplicidade, vamos imaginar que temos um monitor cuja gama de cores corresponde exatamente ao espaço de cores sRGB. Para comparação, a tela do MacBook Air de 2013 pode produzir cerca de 60% de sRGB, mas a maioria dos monitores modernos pode, como já mencionado, exibir 150% de sRGB. Para L = 50 e H = 180 (a amostra de ciano na figura acima), o valor máximo de C é de apenas 35! Para L = 50 e H = 0 (rosa), o valor de C pode atingir 77 sem ir além do sRGB. Para L = 50 e H = 320 (Roxo), o valor de C pode ir até 108!

Embora a falta de bordas possa ser percebida como algo assustador (seja sobre pessoas ou espaços de cores), não há nada com que se preocupar: se for definida uma cor que não possa ser exibida em um determinado monitor, ela será reduzida para uma cor semelhante suportada pelo monitor. No final, não há nada de novo: até os monitores adquirirem uma gama de cores que excede as capacidades do sRGB, foi exatamente o que aconteceu com as cores CSS comuns exibidas nos monitores cuja gama de cores era menor que o sRGB.

Seletor de cores LCH

Espero que agora você também esteja um pouco interessado na idéia de usar cores LCH. Isso levanta a questão de como visualizar essas cores.

De fato, há muito tempo atrás criei a ferramenta correspondente, o LCH Color Picker, projetada principalmente para ajudar a mim e meus colegas a entender corretamente os recursos do LCH ao editar o CSS Color 5 . Uma é conhecer a teoria, e outra é ser capaz de experimentar os controles deslizantes e ver o resultado com seus próprios olhos. Até comprei um domínio, css.land , para postar exemplos relevantes lá. Usamos um pouco essa ferramenta, adicionei novos recursos a ela, mas nunca escrevi sobre ela. Portanto, essa ferramenta estava disponível apenas para nós e para aqueles que prestavam atenção emneste repositório do github.

Meios para selecionar cores LCH

Se você estiver interessado em experimentar cores LCH, poderá muito bem usar esta ferramenta. Aqui estão alguns detalhes sobre ele:

O código de conversão de cores foi escrito por um dos membros da nossa equipe. Estamos confiantes de que os cálculos, pelo menos, foram feitos com base em um entendimento correto do processo de conversão (isto é, se algo der errado - isso é um erro no código e não o resultado de um mal-entendido).
O componente de cor Chroma suporta uma alteração em um intervalo diferente de 0 a 100, o que diferencia nossa ferramenta de algumas das outras que conseguimos encontrar.
Os usuários podem carregar cores CSS arbitrárias nele (usando o botão Importar).
Os controles deslizantes permitem inserir apenas valores inteiros, mas nos campos em preto que aparecem acima dos controles deslizantes, você pode inserir qualquer número.
No processo, você pode salvar cores e ver como elas são interpoladas.
A análise de cores é suportada se pertence ao espaço de cores sRGB, P3 (ou à Rec.2020, mesmo um espaço de cores mais extenso).
Configuração de transparência suportada.
E, finalmente, usar esta ferramenta é simplesmente interessante! Especialmente considerando que ele é implementado com base no Mavo (embora um pouco de JavaScript seja usado aqui, ou seja, não é um projeto do Mavo criado em HTML puro).

De fato, você pode experimentar o Seletor de cores LCH aqui .

Perguntas e respostas

Depois que publiquei este artigo, eles começaram a me fazer perguntas. Acredito que devo esclarecer aqui alguns conceitos errôneos comuns.

▍Você diz que o suporte para cores LCH nos navegadores ainda não foi implementado, mas posso vê-los no artigo. Como isso é possível?

Todas as cores usadas neste artigo se enquadram na gama de cores sRGB. Isso ocorre porque simplesmente não podemos produzir cores fora do sRGB até agora. sRGB é um espaço de cores, não uma sintaxe de descrição de cores. Por exemplo, rgb(255 0 0)eles lch(54.292% 106.839 40.853)definem a mesma cor.

▍Como o Seletor de cores LCH exibe cores fora do sRGB?

Meu programa, o LCH Color Picker, não exibe essas cores. E, até onde eu sei, em nenhum lugar da Internet existe um programa que possa exibir essas cores. O projeto LCH Color Picker é implementado usando tecnologias da web, o que significa que as restrições padrão se aplicam a outras páginas da web. Converto cores não produzidas em sRGB. Inicialmente, eu simplesmente trouxe os componentes de cores RGB para uma faixa de 0 a 100%, mas, graças a esse PR , o programa agora usa um algoritmo muito mais bem-sucedido. Ou seja, estamos falando em reduzir o valor do componente LCH C até que a cor caia dentro dos limites de sRGB. É por isso que um aumento no valor do componente C acima de um determinado limite não leva à conclusão de uma cor mais brilhante. O fato é que essa cor ainda não pode ser deduzida usando CSS.

Noticed Notei que o Firefox exibe cores mais brilhantes que o Chrome e o Safari. Existe alguma conexão com o suporte LCH?

O Firefox não implementou a parte da especificação que restringe as cores CSS aos quadros sRGB. Em vez disso, o navegador simplesmente passa valores RGB brutos para a tela. Por exemplo, rgb(100% 0% 0%)essa é a cor vermelha mais brilhante que um monitor pode exibir. Embora isso possa parecer uma solução inteligente, aqui estamos diante de contradições. O fato é que, com essa abordagem, é possível definir cores, na melhor das hipóteses, apenas aproximadamente, pois todas as telas exibem as cores de maneira diferente. Ao restringir as cores CSS a um espaço de cores conhecido (sRGB), obtemos independência do dispositivo. Os espaços de cores LCH e Lab também são independentes do dispositivo, pois são baseados na cor real medida.

▍ O que você pode dizer sobre o design em cores (display-p3 rgb)? O Safari o apoia desde 2017!

Fui informado sobre isso depois de publicar este artigo. Eu sabia há muito tempo que o Safari está trabalhando nesse recurso, mas de alguma forma eu perdi o momento em que estava pronto. De fato, no mês passado, este artigo foi publicado descrevendo essa sintaxe no WebKit. Surpreendente

Design color(colorspaceid params)é um recurso descrito em CSS Color 4. Ela, em matéria de gerenciamento de cores em CSS, pode ser comparada com uma faca suíça. O melhor deste design é que ele permite especificar o perfil de cores ICC e as cores retiradas dele. Por exemplo, isso pode ser útil se você quiser usar cores CMYK reais ou cores Pantone em uma página da web. Esse design também suporta alguns espaços de cores predefinidos, um dos quais é display-p3. Por exemplo, color(display-p3 0 1 0)fornece a cor verde mais clara no espaço de cores P3. Para testar o suporte para esse design, você pode usar este teste. Na ausência de suporte color(), será mostrada uma cor vermelha e, se disponível, uma cor verde clara.

Embora esse seja um recurso incrível (e eu precise refazer o meu LCH Color Picker para que o programa o utilize color()se esse recurso for suportado), preste atenção ao fato de que ele resolve apenas o primeiro dos problemas mencionados. Ou seja, estamos falando sobre o acesso a todas as cores da gama de cores. Mas, como a ferramenta é color()baseada em RGB, ela sofre de todas as desvantagens associadas ao RGB. Não se distingue por uma percepção uniforme, com sua ajuda, ao ajustar os parâmetros de cor, é difícil criar opções de cores (opções mais claras ou mais escuras, mais ou menos brilhantes e assim por diante).

Além disso, observo que esta é uma solução temporária. Agora é aplicável devido ao fato de que telas que podem exibir cores que não cabem em P3 são raras. Mas, depois de outra melhoria nas telas, o design color(display-p3 ...)terá os mesmos problemas que as cores RGB agora.

Os espaços de cores LCH e Lab são independentes do dispositivo, eles podem representar todas as cores visíveis aos seres humanos e, como resultado, permanecerão relevantes, independentemente da evolução do hardware.

Queridos leitores! Você está interessado em usar cores LCH em CSS?

Cores CSS LCH