CSS color-mix()

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Adam Argyle

A função CSS color-mix() permite misturar cores em qualquer um dos espaços de cores aceitos diretamente no CSS.

Antes do color-mix(), para escurecer, clarear ou desaturar uma cor, os desenvolvedores usavam pré-processadores CSS ou calc() em canais de cor.

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

O Sass fez um ótimo trabalho para se manter à frente da especificação de CSS de cores. No entanto, não há uma maneira real de misturar cores no CSS. Para chegar perto, é necessário fazer cálculos de valores de cor parciais. Confira um exemplo reduzido de como o CSS pode simular a mistura hoje:

.color-mixing-with-vanilla-css-before {
  --lightness: 50%;
  --red: hsl(0 50% var(--lightness));

  /* add "white" to red
     by adding 25% to the lightness channel
  */
  --lightred: hsl(0 50% calc(var(--lightness) + 25%);
}

color-mix() permite misturar cores no CSS. Os desenvolvedores podem escolher em qual espaço de cores eles vão misturar e como cada cor vai ser dominante na mistura.

.color-mixing-after {
  /* equally mix red with white */
  --red-white-mix: color-mix(in oklab, red, white);

  /* equally mix red with white in srgb */
  --red-white-mix-srgb: color-mix(in srgb, red, white);
}

É isso que queremos. APIs flexíveis, poderosas e completas. Curta,

Como misturar cores no CSS

O CSS existe em um mundo de vários espaços e gamas de cores. Por isso, não é opcional especificar o espaço de cores para mistura. Além disso, diferentes espaços de cor podem mudar drasticamente os resultados de uma mistura. Portanto, conhecer os efeitos de um espaço de cor vai ajudar você a conseguir os resultados necessários.

Para uma introdução interativa, use esta ferramenta color-mix(): - Explore os efeitos de cada espaço de cores. - Explore os efeitos da interpolação de matiz ao misturar em um espaço de cor cilíndrica (lch, oklch, hsl e hwb). - Mude as cores que estão sendo misturadas clicando em uma das duas caixas de cor na parte de cima. - Use o controle deslizante para mudar a proporção de mistura. - O código CSS color-mix() gerado está disponível na parte de baixo.

Como misturar os vários espaços de cores

O espaço de cores padrão para mistura (e gradientes) é oklab. Ele fornece resultados consistentes. Você também pode especificar espaços de cores alternativos para adaptar a mistura às suas necessidades.

Por exemplo, black e white. O espaço de cores em que eles são misturados não faz muita diferença, certo? Errado.

color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);