Novo Livro!
Categorias
Ferramentas
Projetos
Cor

Tingir imagens com blend modes

Escolha a cor e vá trocando o modo de mistura: a foto da prévia mostra cada um dos 16 modos do CSS agindo sobre ela. Leve o código para uma foto num <img> ou no background.

Funciona em todos os navegadores atuais Ver no Baseline

Ajuste

100%
Modo de mistura
Sem mistura
Escurece
Clareia
Contrasta
Inverte
Troca um componente
A foto está num

Muda só o código: as duas formas dão o mesmo resultado.

Veja

Mesa com laptop, xícara de café e caderno, tingida pela cor escolhida.
mix-blend-mode: multiply escurece

Copie o código

CSS 
/* <div class="media"><img src="foto.webp" alt="…"></div> */
.media {
  /* A mistura fica dentro da .media e não pega o fundo da página. */
  isolation: isolate;
  position: relative;
}

.media img {
  display: block;
  inline-size: 100%;
}

/* A cor por cima da foto, misturada com ela. */
.media::after {
  background: #2563eb;
  content: "";
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
}

O problema

Foto com a cor da marca por cima é um recurso comum em banners, cards e capas. Uma camada de cor com opacidade só deixa a foto lavada, e editar cada imagem num editor não acompanha a troca de tema nem a foto nova que o cliente mandou.

O CSS mistura a cor com a foto do mesmo jeito que os editores de imagem, com os mesmos 16 modos. Mas os nomes (multiply, soft-light, color-burn) dizem pouco sozinhos, e o resultado muda com a cor e com a foto.

Como funciona

Cada modo é uma conta feita canal a canal entre a cor de cima (a que tinge) e a foto de baixo, com os valores de 0 a 1:

multiply = cor × foto · screen = 1 − (1 − cor) × (1 − foto)

Multiplicar dois números entre 0 e 1 nunca dá mais que nenhum deles: por isso multiply só escurece, e o branco da foto vira a cor. O screen faz a mesma conta com as cores invertidas e só clareia: o preto da foto vira a cor.

Os modos se agrupam pelo que fazem com a foto. multiply, darken e color-burn escurecem; screen, lighten e color-dodge clareiam; overlay, soft-light e hard-light escurecem o escuro e clareiam o claro, o que aumenta o contraste. difference e exclusion invertem as cores. hue, saturation, color e luminosity trocam um componente da foto pelo da cor: o color mantém a luz da foto e pinta tudo com o matiz e a saturação da cor, o tingimento mais fiel.

Com a foto num <img>, um ::after posicionado por cima leva a cor e o mix-blend-mode. O isolation: isolate no elemento de fora limita a mistura à foto: sem ele, a cor também se misturaria com o fundo da página.

Com a foto no background, a cor vira uma camada de imagem (linear-gradient() de uma cor só) acima da foto, e o background-blend-mode mistura as duas. A ordem importa: na lista do background, a primeira camada fica por cima.

A intensidade é a opacidade da cor: abaixo de 100%, a mistura se soma à foto original na mesma proporção.

Quando usar

  • Banners e capas com a foto na cor da marca, que acompanham a troca de tema.
  • Grades de fotos de origens diferentes que precisam parecer da mesma família.
  • Fundo de foto escurecido o bastante para o texto por cima ter contraste, com multiply.
  • Efeito de hover que tinge a foto e some ao passar o mouse, trocando só a cor ou o modo.

Outras ferramentas

Cor

Conversor de cores CSS

Cole uma cor em qualquer sintaxe e veja a mesma cor em hex, rgb(), hsl(), oklch(), lab() e display-p3, com o aviso de gamut.

 Cor

Escala de cores OKLCH

Gere os tons de 50 a 950 a partir de uma cor, com luminosidade uniforme em OKLCH, o contraste de cada tom e as custom properties prontas.

 Cor

Gerador de gradientes CSS

Monte gradientes lineares, radiais e cônicos e compare a interpolação em sRGB, OKLab e OKLCH, sem o cinza no meio.