Loading…

How to use Color Blend Mode Calculator

Pick two colors and a blend mode (multiply, screen, overlay, and more), and the tool computes and previews the blended result.

Frequently asked questions

What are blend modes?

Formulas that combine a base and blend color per channel — the same math Photoshop and CSS mix-blend-mode use for layers.

How does multiply differ from screen?

Multiply darkens (channels multiplied, so white keeps the base and black forces black); screen lightens (the inverse, so black keeps the base).

Is overlay order sensitive?

Yes — overlay uses the base color to decide between multiply and screen, so swapping base and blend can change the result.

More Color Tools

RGB Percentage Converter
Convert HEX to percentage rgb(), 0–1 float and 8-bit integer forms
Color Picker
Pick colors visually and get HEX, RGB, HSL, HSV, CMYK values
Color Format Converter
Convert between HEX, RGB, HSL, HSV, CMYK, LAB and CSS names
Color Contrast Checker
Check WCAG AA/AAA contrast ratios for text and backgrounds
WCAG Color Compliance
Test all WCAG 2.1 text size requirements with pass/fail badges
Color Mixer
Blend two colors with a ratio slider and preview the mix
Tints & Shades Generator
Generate a complete range of tints and shades from any color
Gradient Color Steps
Generate N evenly-spaced colors between two endpoints
Color Harmonies
Generate complementary, triadic and analogous palettes
Random Palette Generator
Generate beautiful random color palettes with one click
Color Opacity / RGBA
Add alpha transparency to any color and get rgba() values
Image Color Extractor
Upload an image to extract its dominant color palette

← View all Color ToolsBrowse all 1,100+ tools →