A transição ou a mistura de cores pode ser um problema. Para muitas animações de interface, uma simples interpolação RGB (interpolando os componentes vermelho, verde e azul linearmente) funcionará, porque você está simplesmente iluminando, escurecendo ou alterando ligeiramente a cor. No entanto, em jogos, interfaces experimentais ou outra programação visual, às vezes você precisa fazer a transição entre cores dramaticamente diferentes.
Se você visualizar o espaço de cores RGB como um círculo, verá que o centro está dessaturado. Se você estiver fazendo a transição de um lado do espaço de cores para o outro lado, estará passando pelo meio, resultando em cores cinza ou turvas no meio da transição.
Para tentar resolver isso no passado, eu (e inúmeros outros) tentei usar HSV (ou HSB), pois parece que deve funcionar bem. No entanto, devido à maneira como nossos olhos percebem a cor, simplesmente interpolar o matiz, a saturação e o valor (brilho) também não funciona – alguns matizes, embora compartilhem a mesma saturação e brilho, parecem mais brilhantes do que outros.
Então, como lidamos com a mistura de cores sem resultar em cores brutas? O espaço de cores CIE-LCh. Quais são os componentes do espaço de cores CIE-LCh? Eu não sei, mas você realmente não precisa se preocupar. O que importa é que se você converter sua cor de RGB para sua alternativa CIE-LCh e, em seguida, interpolar linearmente cada um de seus três componentes, você obterá uma mistura suave que transita uniformemente a tonalidade, a saturação percebida e o brilho percebido.
Misture usando RGB
Misture usando HSV
Misturar usando CIE-LCh
(Imagens da postagem do blog de Stuart Denman )
Uma nota final – a única desvantagem é que a conversão entre RGB e CIE-LCh envolve expoentes, que são mais caros computacionalmente do que outras operações matemáticas. Se você estiver animando, pode não querer converter para frente e para trás entre RGB e CIE-LCh em cada loop de renderização. Em vez disso, eu recomendaria calcular algum número de valores de cor intermediários com CIE-LCh – digamos, 5 ou 6 valores intermediários – e, em seguida, interpolar entre esses valores com o espaço de cores RGB para uma aproximação aproximada (mas muito boa) de um CIE verdadeiro -LCh blend.
Para obter mais informações, verifique a postagem original do blog de Stuart Denman
Para uma implementação de Javascript, consulte minha postagem do blog