Color Blend Modes
Blend two colors with multiply, screen, overlay, hard-light, soft-light, color-burn, color-dodge, difference, and exclusion.
Beyond Averaging Two Colors
The Color Mixer tool interpolates between two colours (the CSS color-mix() function, in sRGB, linear sRGB, OKLab, OKLCH or HSL), which is the right operation when you want a midpoint or a gradient. Photoshop, Figma, and CSS all support a richer set of blend modes that combine colors using non-linear math, each producing a distinctive visual effect. Multiply darkens the result by multiplying corresponding channels, which is what happens when light passes through two layers of stained glass. Screen lightens by inverting and multiplying, which is what happens when two projector beams overlap. Overlay combines multiply and screen depending on whether the base color is dark or light, which is the workhorse for contrast-boosting in photo editing. Hard light is overlay applied to the top color instead of the base, and soft light is a gentler version of overlay that does not push extremes to pure black or white. Color burn and color dodge are the contrast-extreme variants. Difference and exclusion produce inverted-looking outputs useful for visual effects. This tool covers eleven separable modes: those nine plus darken and lighten, which keep the darker or lighter value of each channel. CSS supports all of them via the mix-blend-mode property, which means you can apply blend modes to entire elements rather than just static pixels.
How to Use Each Blend Mode in Practice
Pick a base color (the bottom layer) and a blend color (the top layer) in any CSS format. The tool renders the result of all eleven blend modes side by side so you can see the differences at a glance. Click any mode to copy its hex value and select it; the CSS line below then shows the matching mix-blend-mode declaration with a Copy button. Alpha is ignored: both inputs are treated as opaque. The most common workflow is multiply for darkening tints and shadows, screen for lightening highlights and glows, and overlay for contrast pop on hero images. Hard light and soft light are useful for layered noise textures and watermarks where you want subtle interaction with the underlying color. Color burn and color dodge produce more dramatic effects and are typically used sparingly. Difference is the standard pick for color inversions and certain alignment-checking workflows. Exclusion is the gentler cousin of difference and produces softer inverted-looking results. The blend formulas are the ones in the W3C Compositing and Blending Level 1 specification (culori 4.0.2, MIT, only parses the input colours). We checked 440 results (11 modes, 40 colour pairs including black and white extremes) against Chrome's own canvas blending: all within 1/255 except exclusion, within 2/255, where the tool equals the spec formula and Chrome rounds slightly differently.
CSS mix-blend-mode vs Manual Color Math
Two ways to use blend modes in production exist. The first is the CSS mix-blend-mode property, which applies a blend mode to an entire element relative to whatever sits below it. This is the right tool for dynamic content like overlaying text on a hero image or applying a tint to user-uploaded photos. The second is computing a single output color from two input colors and using that color statically in CSS, which is the right tool for design tokens, theming, and any case where the inputs are known at design time. This calculator computes the second case: it gives you the exact hex value that results from blending two specific colors, ready to paste into a stylesheet as a static color declaration. If you need both inputs to vary at runtime, switch to mix-blend-mode in CSS instead. The math is identical; only the application point differs.
Frequently Asked Questions
Built by Derek Giordano · Part of Ultimate Design Tools