Color blender
Mix two colors by ratio (0–100%) or blend them with 8 modes such as multiply, screen, overlay and difference, with a live preview and contrast info.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Preview
A, B and the blended result from left to right, with the result color as text below
Result formats
#800080
#800080FFrgb(128, 0, 128)#FFFFFF9.42:1 · normal text AAA · large text AAA2.23:1 · normal text Fail · large text FailWhat this tool does
- Create a transition color for buttons and tags: mix your brand color with a second one at 50% instead of hunting for a middle value in a color picker.
- Reproduce overlay effects by choosing a blend mode — multiply darkens, screen lightens — and see the color the design actually renders.
- Check legibility: the result’s contrast against white and black is computed, so you can tell instantly whether it clears the WCAG AA thresholds of 4.5 for body text and 3 for large text.
- Transparent colors work too: the top layer’s alpha joins the source-over compositing, which is what you need to verify the color a translucent overlay really produces.
Example
Input
Color A #3366FF (bottom), color B #FF0000 (top), mix ratio 50%
Output
#993380, also written rgb(153, 51, 128); relative luminance 0.107; contrast 6.69 on white and 3.14 on black; recommended text color #FFFFFF
Mixing by ratio interpolates every channel linearly: R goes from 51 to 255 giving 153, G from 102 to 0 giving 51, B from 255 to 0 giving 128. Switching to multiply with the same pair gives #330000.
Frequently asked questions
How is mixing by ratio different from a blend mode?
Mix by ratio is a plain linear interpolation — 0% is A, 100% is B — so the result always sits between the two colors and works well for transition shades. A blend mode applies the W3C blend formulas per channel (multiply takes the product, screen is the inverted product of the inverses) and then composites with source-over using alpha, so the result can be darker or lighter than both inputs.
What contrast ratio is good enough?
WCAG 2.x asks for 4.5:1 (AA) or 7:1 (AAA) for body text, relaxing to 3:1 and 4.5:1 for large text. The tool reports the result against both white and black with pass/fail labels, so picking a text color is a direct comparison.
Why is the result sometimes an eight-digit hex value?
Hex output is uppercase six-digit by default, but if either input carries alpha (say #3366FF80) the result alpha drops below 1 and #RRGGBBAA is emitted so nothing is lost. Alpha is kept in the 0–1 range and written back as two hex digits.
What if I mistype a color?
#RGB, #RGBA, #RRGGBB and #RRGGBBAA are all accepted, with or without the leading # and in any case; anything else reports an unrecognised color. It does not parse rgb(), hsl() or named colors — convert those to hex with the color converter first.
Does the result match what design software shows?
It should. The formulas come from W3C Compositing and Blending Level 1 and channels are rounded to integers. The only likely divergence is a design tool applying its own gamut or gamma settings, which shifts values by one or two.
Keywords：colorblendmixmultiplyscreenoverlay颜色混色混合模式正片叠底滤色调色对比度