Simulador de modos de mesclagem CSS
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
Pré-visualização de CSS color-mix()
Compare como a função moderna CSS color-mix() mistura duas cores em diferentes espaços de interpolação (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) — amostras ao vivo, hex computado, faixa de gradiente completa por espaço e CSS copiável.
Gerador de Gradientes CSS
Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.
Conversor de Formatos de Cor
Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.
Misturador de Cores
Interpole entre duas cores em RGB, HSL ou CIELAB. Veja uma faixa de gradiente com passos intermediários.
Simulador de Daltonismo
Veja como sua imagem se parece para pessoas com cada um dos 8 tipos de deficiência visual cromática (CVD).
Seletor de Cor HSL
Arraste sliders de matiz, saturação, luminosidade e alpha pra escolher cor — copie HEX, RGB, HSL ou valor arbitrário Tailwind.