Blend Mode Simulator
Preview how two colors interact under Multiply, Screen, Overlay and 13 other blend modes
About Blend Mode Simulator
Places a blend layer color over a base color and previews the result in 16 blend modes side by side, from Normal and Multiply to Hue and Luminosity, each with its resulting HEX value and a short explanation. Both layers are solid, fully opaque colors picked with a color picker or typed as 6-digit HEX. Handy for comparing modes before using mix-blend-mode or background-blend-mode in CSS.
Category: Color.
Frequently asked questions
Which blend modes are included?
▾
All 16 standard CSS blend modes: Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion, Hue, Saturation, Color and Luminosity. Each one is shown as a swatch with its HEX value and a one-line description of what it does.
What is the difference between Multiply and Screen?
▾
Multiply darkens — white is transparent and black stays black, like stacking transparencies. Screen brightens — black is transparent and white stays white, like projecting light. Screen is Multiply applied to the inverted colors and inverted back, so the two are complements rather than inverses.
What does Overlay do?
▾
Overlay combines Multiply and Screen based on the base color: channels darker than 50% are multiplied with the blend color and lighter ones are screened. This increases contrast while preserving the base layer's highlights and shadows.
Do the results match CSS mix-blend-mode?
▾
For opaque colors, the per-channel modes from Multiply to Exclusion follow the W3C Compositing and Blending formulas, and Color and Luminosity match the spec closely. Hue and Saturation are computed through HSL instead of the spec's luminosity-preserving method, so they can differ noticeably from what browsers or Photoshop render.