Este documento faz parte do Guia de cores CSS de alta definição.
A CSS Color 4 descreve vários novos recursos e ferramentas para CSS e cores. O Codepen abaixo mostra todas as sintaxes de cores nova e antiga juntas:
Leia a recapitulação dos espaços de cores clássicos.
A especificação de nível 4 introduziu 12 novos espaços de cor para procurar cores, acima das sete novas gamas compartilhadas anteriormente:
- Linear sRGB
- LCH (link em inglês)
- okLCH
- LABORATÓRIO
- okLAB
- Display p3
- Rec2020
- RGB a98
- ProPhoto RGB
- XYZ
- XYZ d50
- XYZ d65
Conheça os novos espaços de cores na Web
Os espaços de cores a seguir oferecem acesso a gamas maiores do que o sRGB. O espaço de cores display-p3 oferece quase o dobro de cores do RGB, enquanto Rec2020 oferece quase o dobro de cores do display-p3. São várias cores!
A função color()
A nova função
color()
pode ser usada para qualquer espaço de cores que especifique cores com os canais
R, G e B. color() usa um parâmetro de espaço de cores primeiro e, em seguida, uma série de
valores de canal para RGB e, opcionalmente, um valor alfa.
Você verá que muitos dos novos espaços de cor usam essa função porque, como
funções especializadas, como rgb, srgb, hsl, hwb etc., estava crescendo para uma
longa lista, sendo 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 escalonar verticalmente para qualquer espaço de cores com base em RGB de ampla gama.
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(). Ela também oferece
decimales entre 0 e 1, usados 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 é perceptivamente linear (como
lch()é) - Não há uma gama ampla 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 aos canais RGB, útil para coisas como motores de jogos ou shows de luzes.
Desvantagens
- Perceptivamente, não linear.
- As bordas pretas e brancos estão preenchidas.
.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 mais tarde,
mas é importante observar um gradiente de srgb e linear-srgb de preto para branco
para ilustrar as diferenças:
LC
O LCH introduz sintaxe para acessar cores fora da gama RGB. Também é o primeiro a facilitar a criação de cores fora da gama para uma tela. Isso ocorre porque todas as cores do espaço de CIE (lch, oklch, laboratório, oklab) podem representar todo o espectro de cores visível pelo ser humano (links em inglês).
Esse espaço de cores é modelado de acordo com a visão humana e oferece sintaxe para especificar qualquer uma dessas cores e muito mais. Os canais LCH são lightness, chroma e hue. Tonalidade sendo um ângulo, como em HSL e HWB. A luminosidade é um valor entre 0 e 100. É uma iluminação especial, "perceptivamente linear", centrada em pessoas. Chroma é semelhante à saturação e pode variar de 0 a 230, mas é tecnicamente ilimitado.
Vantagens
- Manipulação de cor previsível devido à forma mais linear (consulte oklch).
- Usa canais conhecidos.
- Costumam ter gradientes vibrantes.
Desvantagens
- Fácil de sair da gama.
- Em raras ocasiões, o gradiente precisa 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 feito para acessar a gama CIE, novamente com uma dimensão de brilho perceptivamente linear (L). A e B do laboratório representam os eixos exclusivos da visão de cor humana: vermelho-verde e azul-amarelo. Quando A recebe um valor positivo, ele adiciona o vermelho e o verde quando está abaixo de 0. Quando B recebe um número positivo, ele adiciona amarelo, enquanto os valores negativos estão em direção ao azul.
Vantagens
- Gradientes perceptivamente consistentes.
- High Dynamic Range.
Desvantagens
- Potencial para mudança de matiz.
- Dificuldade de criar ou adivinhar uma cor ao ler 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 LCH, (L) continua a representar luminosidade perceptivamente linear, C para chroma e H para matiz.
Este espaço parece familiar se você já trabalhou com HSL ou LCH. Escolha um ângulo na roda de cores para H, escolha uma quantidade de luminosidade ou escuro ajustando L, mas teremos chroma em vez de saturação. Eles são bastante idênticos, exceto pelo fato de que os ajustes de luminosidade e chroma tendem a ocorrer em pares, ou pode ser fácil solicitar cores cromáticas altas que vão fora da gama desejada.
Vantagens
- Sem surpresas ao trabalhar com tons de azul e roxo.
- Brilho perceptivamente linear.
- Usa canais conhecidos.
- High Dynamic Range.
- Tem um seletor de cores moderno, dos Evil Martians.
Desvantagens
- Fácil de sair da gama.
- Novos e pouco explorados.
- 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);
}
LABORATÓRIO
Este espaço é corretivo para o LAB. Ele também é considerado um espaço otimizado para a qualidade do processamento de imagens, o que, para nós 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.
- Brilho perceptivamente linear.
- Nenhuma mudança de matiz como o LABORATÓRIO.
- Gradientes perceptivamente consistentes.
Desvantagens
- Novos e pouco explorados.
- 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);
}
Rede de Display P3
A gama e o espaço de cores da tela P3 se tornaram populares desde que a Apple os ofereceu com o iMac da Apple desde 2015. A Apple também oferece suporte a display-p3 em páginas da Web via CSS desde 2016, cinco anos à frente de qualquer outro navegador. Se vier do sRGB, esse é um ótimo espaço de cores para começar a trabalhar à medida que você move estilos para um intervalo dinâmico maior.
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
- No futuro, será ultrapassado pelos espaços Rec2020 e 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
O Rec2020 faz parte da mudança para a televisão de ultra-alta definição (UHDTV), que oferece uma ampla variedade de cores para uso em mídias 4K e 8K. O Rec2020 é outra gama baseada em RGB, maior que o display-p3, mas não tão comum entre consumidores quanto o Display P3.
Vantagens
- Cores Ultra HD.
Desvantagens
- Não tão comum entre os consumidores (ainda).
- Não é comumente encontrado 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}
A abreviação do Adobe 1998 RGB, A98 RGB foi criada pela Adobe para apresentar a maioria das cores atingíveis por impressoras CMYK. Ele oferece mais cores que o sRGB, principalmente nos tons ciano e verde.
Vantagens
- Maior que os espaços de cor sRGB e Display P3.
Desvantagens
- Não é um espaço comum dentro do qual designers digitais trabalham.
- Poucas pessoas estão transferindo 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, esse amplo espaço de gama oferece exclusivamente cores primárias em uma ampla variedade e apresenta mudanças de matiz mínimas ao mudar a claridade. Ela também afirma cobrir 100% das cores das superfícies do mundo real, conforme documentado por Michael Pointer em 1980.
Vantagens
- A tonalidade mínima muda ao alterar o brilho.
- Cores primárias vibrantes.
Desvantagens
- Cerca de 13% das cores oferecidas são imaginárias, o que significa que não estão dentro do espectro visível 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 visíveis para uma pessoa com visão média. É por isso que ele é usado como referência padrão para outros espaços de cor. Y é luminância, X e Z são cromas possíveis dentro da luminância Y especificada.
A diferença entre d50 e d65 é o ponto branco, em que d50 usa os pontos brancos d50 e d65 usa o ponto branco d65.
Termo-chave: ponto branco é um atributo de um espaço de cor. É o lugar em que o branco real existe no espaço. Para telas eletrônicas, D65 é o ponto branco mais comum, e é abreviação de 6500 Kelvin. Na conversão de cores, é importante que os pontos brancos correspondam para que a temperatura da cor (quente ou frio) não seja afetada.
Vantagens
- O acesso à luz linear tem casos de uso úteis.
- Ótimo para a mistura física de cores.
Desvantagens
- Perceptivamente, não são lineares como lch, oklch, lab e oklab.
.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 um caminho para ensinar ao navegador um espaço de cores personalizado. Esse é um perfil ICC que informa ao navegador como 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 especifique os valores do canal para ele.
.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ções, gradientes e mistura de cores. Normalmente, essa transição é especificada como uma cor inicial e uma cor final, em que o navegador deve interpolar entre elas. Neste caso, "interpolar" significa gerar uma série de cores intermediárias para criar uma transição suave em vez de uma instantânea.
Com um gradiente, a interpolação é uma série de cores ao longo de uma forma. Com a 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á novas outras
opções de interpolação. A transição de uma cor in hsl de azul para branco
resulta em algo muito diferente do 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);
}
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 especificação da Cor 4
tem instruções para os navegadores sobre como lidar com essas interpolações
de espaço entre cores. Para .gradient, os navegadores percebem os espaços
de cores diferenciais e usam o espaço de cores padrão oklab.
Você pode pensar que o navegador usaria "lch" como espaço de cores, já que essa é
a primeira cor, mas não. É por isso que mostro um segundo gradiente de comparação
.lch. O gradiente .lch é um gradiente do espaço de cores linear.
Menos faixas devido às cores de 16 bits
Antes dessa cor funcionar, todas as cores eram salvas em um número inteiro de 32 bits para representar os quatro canais: vermelho, verde, azul e Alfa. Isso significa 8 bits por canal e 2^ 24 cores possíveis (ignorando alfa). 2 ^ 24 = 16.777.216, "milhões de cores".
Depois disso, quatro valores de ponto flutuante de 16 bits, cada canal tem o próprio ponto flutuante em vez de agrupar. Isso representa um total de 64 bits de dados, resultando em muito mais de milhões de cores.
Este trabalho é necessário para oferecer suporte a cores HD. Isso aumenta a quantidade de informações de cor que podem ser armazenadas, o que tem um bom efeito colateral de significar que há mais cores para o navegador usar em um gradiente.
A faixa de gradiente ocorre quando não há cores suficientes para criar um gradiente suave e as "faixas" de cor ficam visíveis. As faixas são muito mitigadas com o upgrade para cores de resolução mais alta.
Interpolação de controle
A distância mais curta entre dois pontos é sempre uma linha reta. Com a interpolação de cores, os navegadores seguem o trajeto curto por padrão. Considere um cenário em que há dois pontos em um cilindro de cores HSL. Um gradiente adquire suas etapas de cor ao viajar ao longo da linha entre os dois pontos.
linear-gradient(to right, #94e99c, #e06242)
Visualização de cima para baixo de um cilindro HSL com uma linha entre as paradas de cor
A linha de gradiente acima vai diretamente entre a cor esverdeada e a cor avermelhada, passando pelo centro do espaço de cores. Embora a explicação acima seja ótima para ajudar no entendimento inicial, não é exatamente o que acontece. Este é o gradiente no Codepen a seguir. Ele claramente não está branco no meio, como mostrado na demonstração simulada.
No entanto, a área do meio do gradiente perdeu sua vitalidade. Isso ocorre porque as cores mais vibrantes estão na borda da forma do espaço de cores, não no centro de proximidade da interpolação. Isso é comumente chamado de zona morta. Existem algumas maneiras de corrigir ou contornar isso.
Especificar mais paradas de gradiente para evitar a zona morta
Uma técnica para evitar a zona morta hoje é adicionar mais paradas de cor ao gradiente que guiam intencionalmente a interpolação para permanecer dentro dos intervalos vibrantes de um espaço de cor. É literalmente uma solução alternativa, já que as paradas extras o ajudam a contornar a zona morta.
Uma ferramenta de gradiente criada por Erik Kennedy (em inglês) calcula outras paradas de cor para você, a fim de evitar a zona morta, mesmo em espaços de cores que tendem a se mover na direção dela. Ao usá-lo, transmitindo as mesmas cores do primeiro exemplo, mas mudando a interpolação de cor para HSL, o resultado será o seguinte:
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
Visualização de cima para baixo de um cilindro HSL com uma linha curva e nove pontos de cor
Com os pontos de parada guiados, a interpolação não é mais uma linha reta, mas parece curva ao redor 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 um controle semelhante ou maior diretamente do CSS?
Como direcionar a interpolação de cores
Na cor 4, a capacidade de controlar a estratégia de interpolação de matiz
foi adicionada e é uma nova maneira de contornar (:piscar:) a zona morta. Pense em um ângulo de matiz e considere um gradiente de dois pontos que só muda o ângulo, mudando de 140deg para 240deg, por exemplo.
Interpolação de matiz mais curta x mais longa
O padrão do gradiente é seguir a rota shorter, a menos que você especifique a rota longer. As opções
de interpolação de matiz direcionam a rotação do ângulo, como dizer para alguém virar
à esquerda em vez de à direita (heh, Zoolander):
No exemplo de distâncias de interpolação de matiz, o caminho curto e o longo são simulados para ilustrar a diferença. A distância curta tem menos matizes entre ela, porque é percorrida pela menor distância possível, em que a longa distância percorreu mais matizes.
Como aumentar x diminuir a interpolação de matiz
Existem mais duas estratégias de interpolação de matiz na Cor 4, mas elas são exclusivas para espaços de cores cilíndricos. Mantendo as duas cores dos exemplos anteriores, o visual agora mostra como o aumento e a diminuição funcionam.
O Codepen acima usou ColorJS para demonstrar o resultado esperado. O CSS que você escreveria para ter o mesmo efeito sem uma 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, confira este divertido playground em que é possível mudar a matiz entre duas paradas de cor e conferir os efeitos de uma escolha de interpolação de matiz, além de como os espaços de cores mudam os resultados do gradiente. Os efeitos podem ser muito diferentes. Considere isso como quatro novos truques que acabaram de ser adicionados à sua barra de ferramentas de cores.
Gradientes em espaços de cores diferentes
Cada espaço de cores, dado a forma e o arranjo de cores exclusivos, resulta em um gradiente diferente. Nos exemplos abaixo, observe como cada espaço de cor processa isso de maneira diferente, especialmente do azul para o branco. Observe quantos ficam roxos 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 trafegam menos
por zonas mortas (link em inglês).
Espaços como lab agrupam as cores de uma forma otimizada para saturação, em vez de espaços otimizados para que humanos escrevam 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 uma interpolação mais consistente com o laboratório. No entanto, a sintaxe do laboratório não é simples de ler. Há números negativos muito desconhecidos em rgb ou hsl. Temos uma boa notícias: podemos usar hwb para uma sintaxe familiar, mas solicitar que o gradiente seja interpolado totalmente em 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 alta vibração, mas possíveis zonas mortas ou pontos brilhantes (consulte o ponto de acesso ciano no exemplo principal). O oklab é ótimo para gradientes lineares que permanecem saturados. Esse recurso é muito divertido, porque você pode testar alguns espaços de cores
diferentes para ver de qual gradiente você mais gosta.
Confira um Codepen experimentando gradientes e espaços de cor, misturando estratégias e combinando para explorar as possibilidades. Até mesmo uma transição de preto para branco é diferente em cada espaço de cor!
Restrição de gama
Existem cenários em que uma cor pode pedir algo fora da 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 ocorre quando informações extras são simplesmente removidas. 300 se torna 255
internamente no mecanismo de cores. A cor agora está fixada no espaço.
Como escolher um espaço de cor
Muitas pessoas, depois de aprender sobre esses espaços de cores e seus efeitos, se sentem sobrecarregadas e querem saber qual "de um" escolher. De acordo com meus estudos e experiência, não vejo um espaço de cor único para todas as minhas tarefas. Cada uma tem momentos em que produzem o resultado desejado.
Se houvesse um espaço melhor, não haveria tantos novos espaços sendo introduzidos.
No entanto, posso dizer que os espaços da CIE (lab, oklab, lch e oklch) são meus
pontos de partida. Se o resultado não for o que estou procurando, vou testar outros espaços. Para misturar cores e criar gradientes, concordo com a
escolha de especificações padrão de oklab. Para sistemas de cores e cores gerais da interface, gosto de
oklch.
Aqui estão alguns artigos em que as pessoas compartilharam suas estratégias de cores
atualizadas com base nesses novos recursos e espaços de cor. Por exemplo, Andrey Sitnik
acionou totalmente o oklch, talvez ele convenca você a fazer o mesmo:
- OKLCH no CSS: por que mudamos de RGB e HSL, por Andrey Sitnik
- Color Formats por Josh W. Comeau
- OK, OKLCH, de Chris Coyier
Próximas etapas
Agora que você já conhece os novos espaços de cores e ferramentas, é possível migrar para cores em alta definição.
Mais vitalidade, manipulações e interpolações consistentes e, no geral, proporcionam uma experiência mais colorida aos usuários.
Leia mais recursos de cores no guia.