Simulador de modos de mesclagem CSS
Cor
CSS `mix-blend-mode` expõe os mesmos 16 modos de mesclagem que o Photoshop popularizou — multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, e os quatro modos não-separáveis tipo HSL (hue, saturation, color, luminosity). Esta ferramenta implementa exatamente os algoritmos do W3C Compositing & Blending Level 1 em JavaScript puro e calcula a cor resultante quando uma source (frente) se mescla sobre um backdrop (fundo). Para cada modo você vê uma prévia visual usando CSS `mix-blend-mode` real e o hex calculado, então pode verificar o que o navegador produzirá e copiar o snippet diretamente. Modos separáveis operam canal por canal; os não-separáveis usam helpers W3C setLum/setSat/clipColor em espaço perceptual de luminosidade/saturação.
Notas
Implementa a especificação W3C Compositing & Blending Level 1. Modos separáveis (multiply, screen, etc.) operam canal por canal. Modos não separáveis (hue, saturation, color, luminosity) usam lum = 0.3R + 0.59G + 0.11B e preservam luminosidade/saturação com setLum/setSat/clipColor. Clique em qualquer tile para copiar a declaração mix-blend-mode correspondente.
Como usar
- Escolha uma cor de fundo (a camada base).
- Escolha uma cor source (a frente que mescla por cima).
- Navegue a grade — cada modo mostra prévia e hex calculado.
- Clique em qualquer tile para copiar `mix-blend-mode: <modo>;` ao clipboard.
- Experimente um preset (Vermelho sobre azul, Tinta de foto, Sticker, Pôr-do-sol) para ver um exemplo.
Perguntas frequentes
- Diferença entre overlay e hard-light?
- Overlay decide qual fórmula aplicar com base no brilho do BACKDROP — fundo escuro → multiply, fundo claro → screen. Hard-light decide com base no brilho da SOURCE — source escura → multiply, source clara → screen. Logo overlay(A, B) == hard-light(B, A). Use overlay para 'realçar contraste com base no que está embaixo'; use hard-light para 'fazer a source atravessar'.
- Por que hue/saturation/color/luminosity parecem tão diferentes?
- São modos 'não-separáveis' — não podem ser calculados canal por canal. O W3C os define via três helpers: lum(rgb) = 0.3R + 0.59G + 0.11B (luminância), sat(rgb) = max − min, e setLum/setSat que preservam um alvo com clipping. 'color' por exemplo pega matiz+saturação da source e luminância do backdrop. Por isso colorir uma foto preto-e-branco usa mode: color.
- Bate com o que o navegador renderiza?
- Sim — a prévia usa CSS `mix-blend-mode` real, então o navegador faz o compositing real. O hex exibido é calculado em JavaScript com as mesmas fórmulas W3C que o navegador implementa, então combinam até arredondamento (±1 por canal). Se houver discrepância, geralmente é porque o navegador mescla em sRGB linear e esta ferramenta usa sRGB com gama; W3C permite ambos.
- E background-blend-mode?
- Mesmas fórmulas, aplicação diferente: mix-blend-mode mescla um elemento contra o que está atrás; background-blend-mode mescla as múltiplas camadas de fundo de um elemento entre si. O resultado calculado aqui aplica a ambos — basta colar o nome do modo na propriedade que usar.
Ferramentas relacionadas
Simulador de Daltonismo
Veja como sua imagem se parece para pessoas com cada um dos 8 tipos de deficiência visual cromática (CVD).
Gerador de CSS Box Shadow
Desenhe box-shadow CSS visualmente em várias camadas, com pré-visualização ao vivo e saída CSS / Tailwind pronta para copiar.
Conversor de Formatos de Cor
Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.
Gerador de Gradientes CSS
Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.
Gerador de Paleta de Cores
Crie paletas harmoniosas a partir de uma cor base em seis esquemas.
Verificador de Contraste de Cor
Verifique o contraste texto/fundo nos níveis WCAG AA e AAA.