Este documento faz parte do guia de cores CSS de alta definição.
A CSS Color 4 descreve várias novas e ferramentas para CSS e cor. O Codepen a seguir mostra todos os novos e sintaxes de cor antigas juntas:
Leia a recapitulação dos espaços de cor clássicos.
A especificação level 4 apresentou 12 novos espaços de cor para procurar cores, acima das sete novas gamas compartilhadas anteriormente:
Conheça os novos espaços para cores da Web
Os espaços de cor a seguir oferecem acesso a gamas maiores do que o sRGB. A O espaço de cores display-p3 oferece quase duas vezes mais cores que RGB, enquanto o Rec2020 oferece quase o dobro do Display-p3. São muitas cores!
A função color()
A nova
color()
pode ser usada para qualquer espaço de cor que especifique cores com R, G e B
canais. Primeiro, color()
usa um parâmetro de espaço de cores e, em seguida, uma série de
valores de canal para RGB e, opcionalmente, algum alfa.
Muitos dos novos espaços de cor usam essa função porque,
funções especializadas como rgb
, srgb
, hsl
, hwb
etc., estavam crescendo
longa, é 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 ser escalonada verticalmente para qualquer espaço de cores de ampla gama baseada em RGB.
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()
. Além disso, ele oferece
decimais entre 0 e 1, 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 é linear perceptivamente (assim como
lch()
é) - Sem ampla gama 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() {#linear-srgb}
Essa alternativa linear ao RGB oferece uma intensidade de canal previsível.
Vantagens
- Acesso direto a canais RGB, que é útil para mecanismos de jogos ou shows de luzes.
Desvantagens
- Não é linear perceptivamente.
- Preto e branco estão estampados nas extremidades.
.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 posteriormente,
mas rapidamente é significativo ver uma srgb
e uma linear-srgb
em preto para branco
gradiente para ilustrar as diferenças:
LCH
O LCH introduz a sintaxe para acessar cores fora da gama RGB. Também é o primeiro a facilitar a criação de aplicativos cor de uma tela. Isso ocorre porque todas as cores de espaço do CIE (lch, oklch, lab, oklab) podem representar todo o espectro de cores visível para as pessoas.
Esse espaço de cores foi modelado com base na visão humana e oferece para especificar qualquer uma dessas cores e outras. Os canais de LCH são iluminação, chroma e matiz. Tonalidade como um ângulo, como em HSL e HWB. A luminosidade é um valor entre 0 e 100. É um modelo especial "perceptivamente linear", centrados nas pessoas luminosidade. Chroma é semelhante à saturação; pode variar de 0 a 230, mas é e tecnicamente ilimitadas.
Vantagens
- Manipulação de cores previsível graças ao fato de ser perceptivamente linear, principalmente (consulte oklch).
- Usa canais conhecidos.
- Geralmente tem gradientes vibrantes.
Desvantagens
- Fácil de sair da gama.
- Em raras ocasiões, o gradiente pode precisar 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 criado para acessar a gama CIE, novamente com uma dimensão de luminosidade linear (L). Os pontos A e B no LAB representam os eixos únicos visão de cores humana: vermelho-verde e azul-amarelo. Quando A recebe um valor positivo adiciona vermelho e adiciona verde quando está abaixo de 0. Quando B recebe um número positivo adiciona amarelo, onde valores negativos são para azul.
Vantagens
- Gradientes perceptivamente consistentes.
- High Dynamic Range.
Desvantagens
- Potencial para mudança de matiz.
- É difícil descobrir o autor ou adivinhar uma cor ao ler os 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 o LCH, (L) continua a representar a luminosidade perceptivamente linear, C para chroma e o H para matiz.
Se você já trabalhou com HSL ou LCH. Selecione um ângulo na roda de cores para H, escolha um brilho ou a quantidade de escuridão ajustando L, mas temos chroma em vez de saturação. Eles são bastante idênticos, mas os ajustes de luminosidade e chroma tendem a vêm em pares ou então pode ser fácil pedir cores com chroma alto, que vão fora da gama de metas.
Vantagens
- Não há surpresas ao trabalhar com tons de azul e roxo.
- Luz perceptivamente linear.
- Usa canais conhecidos.
- High Dynamic Range.
- Tem um seletor de cores moderno, de Marcianos Malvados.
Desvantagens
- Fácil de sair da gama.
- Novos e relativamente inexplorados.
- 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);
}
OKLAB
Esse espaço é corretivo para o LAB. Ele também é reivindicado como um espaço otimizado para processamento de imagens, o que para 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.
- Luz perceptivamente linear.
- Sem mudança de matiz como o LAB.
- Gradientes perceptivamente consistentes.
Desvantagens
- Novos e relativamente inexplorados.
- 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);
}
Display P3
A gama de telas P3 e o espaço de cores se tornaram populares desde que a Apple ofereceu suporte desde 2015 no iMac. A Apple também passou a oferecer suporte a display-p3 em páginas da Web via CSS desde 2016. Cinco anos à frente de qualquer outro navegador. Se vier de sRGB, esta é uma ótima cor para começar a trabalhar conforme você move os estilos para um intervalo dinâmico mais alto.
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
- Em algum momento, ela será ultrapassada pelos espaços do Rec2020 e do 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
A Rec2020 faz parte do movimento para UHDTV (TV ultra-alta definição), fornecendo uma ampla variedade de cores para uso em mídia 4k e 8k. O Rec2020 é outro Gama baseada em RGB, maior que display-p3, mas não tão comum entre consumidores como Display P3.
Vantagens
- Cores em Ultra HD.
Desvantagens
- Não é tão comum entre os consumidores (ainda).
- Não é encontrado com frequência 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 {#a98- rgb}
Abreviação de Adobe 1998 RGB, o A98 RGB foi criado pela Adobe para apresentar a maioria cores possíveis de impressoras CMYK. Ele oferece mais cores que sRGB, especialmente em tons de ciano e verde.
Vantagens
- Maior que os espaços de cor sRGB e Display P3.
Desvantagens
- Não é um espaço comum em que designers digitais trabalham.
- Quase ninguém está migrando as 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, este espaço de gama ampla oferece unidades primárias cores e recursos com mudanças de matiz mínimas ao alterar o brilho. Ele também afirma cobrir 100% cores de superfície do mundo real conforme documentado por Michael Pointer em 1980.
Vantagens
- A tonalidade mínima muda ao mudar a luminosidade.
- Cores primárias vibrantes.
Desvantagens
- Cerca de 13% de suas cores oferecidas são imaginários, o que significa que são que não estão no espectro 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 que são visíveis para uma pessoa com visão média. É por isso que ele é usado como referência padrão para outras cores espaços Y é luminância, X e Z são cromas possíveis dentro do Y dado luminância
A diferença entre d50 e d65 é o ponto branco, onde d50 usa o d50 pontos brancos e d65 usa o ponto branco d65.
Termo-chave: ponto branco é um atributo de um espaço de cores. É onde o branco verdadeiro existe dentro do espaço. Para telas eletrônicas, D65 é o mais recomendado ponto branco comum e é a abreviação de 6.500 Kelvin. As cores são importantes conversão que os pontos brancos correspondem para que a temperatura da cor (conforto ou resfriamento) não são afetadas.
Vantagens
- O acesso à luz linear tem casos de uso úteis.
- Ótimo para misturar cores físicas.
Desvantagens
- não perceptivamente linear, como lch, oklch, lab e oklab são.
.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 caminho para ensinar ao navegador um espaço de cores personalizado (em inglês). Este é um perfil ICC que informa ao navegador como para 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 especificar os valores de canal dele.
.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ção, gradientes e mistura de cores. Essa transição é normalmente especificada como uma cor inicial e um cor final, em que se espera que o navegador interfira entre eles. Nesse caso, interpolar significa gerar uma série de cores intermediárias para criar uma transição suave em vez de uma transição instantânea.
Com um gradiente, a interpolação é uma série de cores ao longo de uma forma. Com 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á novos
para interpolação. Transição de uma cor in hsl
de azul para branco
resulta em algo muito diferente de 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);
}
Então, 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%));
}
Felizmente, a Cor 4
tem instruções para os navegadores sobre como lidar com essas linhas
interpolações de espaço de cor. Para .gradient
, os navegadores percebem as diferenças
espaços de cor e use o espaço de cor padrão oklab
.
Você pode pensar que o navegador usaria lch como espaço de cores, pois esse é o
primeira cor, mas não tem. É por isso que eu mostro um segundo gradiente de comparação
.lch
: O gradiente .lch
é um gradiente do espaço de cores lch.
Menos faixas graças às cores de 16 bits
Antes que essa cor funcionasse, todas as cores eram salvas em um número inteiro de 32 bits para representam os quatro canais: vermelho, verde, azul e alfa. Ou seja, 8 bits por canal e 2^ 24 cores possíveis (ignorando alfa). 2 ^ 24 = 16.777.216, "milhões de cores".
Depois que essa cor funcionar, quatro valores de ponto flutuante de 16 bits, cada canal no próprio flutuador, em vez de agrupados. São 64 bits de dados no total, resultando em mais de milhões de cores.
Esse trabalho é necessário para oferecer compatibilidade com cores em alta definição. Isso aumenta a quantidade de cor informações que podem ser armazenadas, o que tem um bom efeito colateral: significa que há mais cores para o navegador usar em um gradiente.
As faixas de gradiente ocorrem quando não há cores suficientes para criar um gradiente suave. e "strips" de cor se tornam visíveis. As faixas são muito mitigadas com o atualizar para cores de resolução mais alta.
![Seis painéis são mostrados, cada um com uma quantidade variável de faixas de gradiente
além de informações sobre compactação e profundidade de bits.](https://developer.chrome.com/static/docs/css-ui/access-colors-spaces/image/six-panels-are-shown-eac-614abc71a28b3.png?authuser=19&hl=pt-br)
Interpolação de controles
A menor distância entre dois pontos é sempre uma linha reta. Com cores interpolação, os navegadores fazem a rota mais curta por padrão. Considere um cenário em que há dois pontos em um cilindro de cor HSL. Um gradiente adquire os degraus de cor indo ao longo da linha entre os dois pontos.
linear-gradient(to right, #94e99c, #e06242)
![Um gradiente circular com uma linha de verde a vermelho, reta
pelo círculo, passando pelas áreas brancas.](https://developer.chrome.com/static/docs/css-ui/access-colors-spaces/image/a-circular-gradient-a-li-d65ad80dd5676.png?authuser=19&hl=pt-br)
Visualização de cima para baixo de um cilindro HSL com uma linha entre os pontos de cor
A linha do gradiente acima vai direto da cor esverdeada para a cor avermelhada cor, passando pelo centro do espaço de cores. Embora o conteúdo acima seja ótimo para ajudar com a compreensão inicial, não é exatamente o que acontece. Este é o gradiente no Codepen a seguir e claramente não está branco no meio, como da demonstração simulada.
No entanto, a área central do gradiente perdeu a vitalidade. Isso ocorre porque as cores mais vibrantes estão na borda da forma do espaço de cores, não na de onde a interpolação se aproximou. Isso é comumente chamado de a "zona inativa". existem algumas maneiras de corrigir ou contornar isso.
Especificar mais paradas de gradiente para evitar a zona inativa
Uma técnica para evitar a zona morta hoje é adicionar outras paradas de cor ao o gradiente que orienta intencionalmente a interpolação para permanecer dentro do variações vibrantes de um espaço de cores. É literalmente uma solução alternativa, já que paradas adicionais ajudam a contornar a zona sem saída.
Há uma ferramenta de gradiente criada por Erik Kennedy que calcula cores adicionais. paradas para você, para ajudá-lo a evitar a zona morta mesmo em espaços de cor que tendem a são atraídas por ela. Usando-o, passando as mesmas cores do primeiro exemplo mas ao alterar a interpolação de cores para HSL, o resultado será o seguinte:
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
![Um gradiente circular com uma linha curvando-se em torno do meio com várias
o gradiente para ao longo do caminho, orientando-o para longe do centro.](https://developer.chrome.com/static/docs/css-ui/access-colors-spaces/image/a-circular-gradient-a-li-5adfb140eed03.png?authuser=19&hl=pt-br)
Imagem de cima para baixo de um cilindro HSL com uma linha curva com 9 pontos de cor
Com pontos de parada guiados, a interpolação não é mais uma linha reta, mas parece curvar em torno 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 recursos semelhantes ou melhores controle direto no CSS?
Direcionar a interpolação de cores
Na cor 4, a capacidade de controlar a estratégia de interpolação de matiz
foi adicionado e é uma nova forma de contornar (:wink:) a zona morta. Pense em um matiz
e considere um gradiente de duas paradas que só altera o ângulo, passando matiz
mudando de 140deg
para 240deg
, por exemplo.
Interpolação de matiz mais curta x mais longa
Por padrão, o gradiente
shorter
, a menos que
que você especificar,
Trajeto de longer
. Tom
as opções de interpolação direcionam a rotação do ângulo, como pedir para alguém virar
para a esquerda em vez de para a direita (heh, Zoolander):
No exemplo de distâncias de interpolação de matiz, o caminho curto e e o caminho longo são simulados para ilustrar a diferença. A curta distância tem menos matizes entre eles, pois ele percorreu a menor distância possível, onde a longa distância percorreu mais matizes.
Aumento vs. diminuição da interpolação de matiz
Existem mais duas estratégias de interpolação de matiz na Cor 4, mas são exclusivas para objetos cilíndricos espaços de cor. Mantendo as duas cores dos exemplos anteriores, o visual agora mostra como funciona o aumento e a diminuição.
O Codepen acima usou ColorJS para demonstrar a o resultado esperado. O CSS que você criaria para obter o mesmo efeito sem uma A 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, aqui está um playground divertido onde você pode alterar a matiz entre 2 paradas de cor e ver os efeitos de uma escolha de interpolação de matiz como bem como os espaços de cores alteram os resultados de gradiente. Os efeitos podem ser muito different; considere isso como quatro novos truques acabaram de chegar à sua barra de ferramentas de cores.
Gradientes em diferentes espaços de cor
Cada espaço de cor, devido à sua forma e organização de cores únicas, resulta em uma gradientes diferentes. Nos exemplos abaixo, observe como cada espaço de cor lida com isso de forma diferente, especialmente do azul para o branco. Observe quantos roxo no meio; isso é chamado de mudança de matiz durante a interpolação.
Alguns gradientes nesses espaços são mais vibrantes que outros ou viajam menos
usando zonas inativas.
Espaços como lab
agrupam as cores de uma forma otimizada para a saturação, já que
em vez de espaços otimizados para humanos escreverem 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 resultados interpolação com o laboratório. A sintaxe do laboratório não é simples de ler, mas há números negativos que não sejam familiares ao vindo de rgb ou hsl. Boa notícias, podemos usar hwb para uma sintaxe familiar, mas pedir que o gradiente seja interpoladas inteiramente dentro de 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%));
}
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
vibração, mas possíveis zonas mortas ou pontos brilhantes (veja o ponto de calor ciano na
principal). O oklab é ótimo para gradientes perceptivamente lineares que permanecem
saturados. Esse recurso é muito divertido, porque você pode testar várias cores
espaços para ver de qual gradiente você mais gosta.
Este é um Codepen que testa gradientes e espaços de cor, misturando e e estratégias de correspondência para explorar as possibilidades. Mesmo uma transição do preto para branco é diferente em cada espaço de cores!
Fixação de gama
Existem cenários em que uma cor pode pedir algo fora de uma 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 acontece quando informações extras são simplesmente removidas. 300
se torna 255
internamente no mecanismo de cores. A cor foi fixada dentro do espaço.
Como escolher um espaço de cores
Muitas pessoas, depois de aprenderem sobre esses espaços de cor e seus efeitos, sentem sobrecarregada e quer saber qual "qual" escolher. Com base nos meus estudos experiência, não vejo um espaço de cor como o único para todas as minhas tarefas. Cada tem momentos em que produzem o resultado desejado.
Se houvesse um melhor espaço, não haveria tantos espaços novos sendo apresentado.
No entanto, posso dizer que os espaços CIE (lab
, oklab
, lch
e oklch
) são meus
pontos de partida. Se o resultado delas não for o que estou procurando,
e testar outros espaços. Para misturar cores e criar gradientes, concordo com o
escolha de especificação padrão de oklab
. Para sistemas de cores e cores gerais de IU, eu gosto
oklch
:
Aqui estão alguns artigos em que as pessoas compartilharam suas novas cores
de acordo com esses novos recursos e espaços de cor. Por exemplo, Andrey Sitnik
investiu em oklch
, talvez ele convença você a fazer o mesmo:
- OKLCH em CSS: por que movemos de RGB e HSL por Andrey Sitnik (em inglês)
- Formatos de cor por Josh W. Comeau
- OK, OKLCH de Chris Coyier (em inglês)
Próximas etapas
Agora que está familiarizado com os novos espaços de cor e ferramentas, você pode migrar para cores em alta definição.
Mais vibração, manipulações e interpolações consistentes e, no geral, entregam uma uma experiência mais colorida aos usuários.
Leia mais recursos de cor no guia.