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 existing Color Mixer tool blends two colors by averaging their channels, which is the right operation when you want the midpoint or a gradient of intermediate values. 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. CSS supports all nine 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 each of the nine blend modes side by side so you can see the differences at a glance. Click any mode to copy the resulting hex value, or click the CSS output panel to copy a ready-to-use mix-blend-mode declaration. 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. All math runs through culori at version 4.0.2 under the MIT license, which means the values you see in the preview are identical to what the browser will render when applying the same blend mode through CSS.
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