Acesse mais cores e novos espaços

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:

• Linear sRGB
• LCH
• okLCH
• LAB
• okLAB
• Tela p3
• Rec2020
• RGB a98
• ProPhoto RGB
• XYZ
• XYZ d50
• XYZ d65

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-s rgb}

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 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 visível das pessoas.

.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.

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)

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);

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:

1. OKLCH em CSS: por que movemos de RGB e HSL por Andrey Sitnik (em inglês)
2. Formatos de cor por Josh W. Comeau
3. 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.