color-mix(): de yellow a blue

div {background-color: color-mix(in srgb, var(--cor-inicial), var(--cor-final) 50%);}

Usei cores opostas para ficar mais fácil perceber como elas se mesclam em cada método de interpolação.

Esta página está disponível para edições no CodePen.

color-interpolation-method 0% de blue 25% de blue 50% de blue 75% de blue 100% de blue
rectangular-color-spacesrgbde yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
srgb-linearde yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
display-p3de yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
a98-rgbde yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
prophoto-rgbde yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
rec2020de yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
labde yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
oklabde yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
xyzde yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
xyz-d50de yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
xyz-d65de yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
polar-color-spacehslde yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
hwbde yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
lchde yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
oklchde yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
longerhsl longer huede yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
hwb longer huede yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
lch longer huede yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
oklch longer huede yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
increasinghsl increasing huede yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
hwb increasing huede yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
lch increasing huede yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
oklch increasing huede yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
decreasinghsl decreasing huede yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
hwb decreasing huede yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
lch decreasing huede yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue
oklch decreasing huede yellow a blue de yellow a blue de yellow a blue de yellow a blue de yellow a blue

Experimente aqui

Ou abra o CodePen em outra janela.

Para experimentar outras cores, mude apenas --cor-inicial e --cor-final:

:root {
--cor-inicial:yellow;
--cor-final:blue;
}

Sugestões: lime e magenta, cyan e red, pink e green, lightgreen e darkred.

Veja o Pen Função color-mix() da Helen Fernanda (@helenfernanda) no CodePen.

Fontes: MDN Web Docs e W3Schools.