Two-Color Blender & Mixer
Local ProcessingBlend two colors together using linear interpolation across customizable percentage ratios.
How It Works & Processing Standards
Blend two colors together using linear interpolation across customizable percentage ratios.
Tool processing runs in your browser. If you create a calculator or conversion share link, its values are included in the URL. See the privacy policy for account, analytics and advertising data.
Current Limits
- Maximum input length: 100,000 characters
Set color A, color B and B’s share (0–1) and each RGB channel is blended by that ratio, shown as HEX, RGB, HSL and more. Handy for gradient midpoints and hover colors.
What You Can Do
- Ratio blending
- 0 is color A, 1 is color B, and anything between is a mix.
- Several notations
- The result in HEX, RGB, HSL, HSV and CMYK.
How to Use Two-Color Blender & Mixer
- 1Pick two colorsChoose color A and B.
- 2Set the ratioHow much B to mix in, from 0 to 1.
- 3CopyCopy the mixed color code.
Examples
Red + blue, half and half
Input: #ff0000 + #0000ff, 0.5
Result: #800080, rgb(128, 0, 128)
White with 25% black
Input: #ffffff + #000000, 0.25
Result: #bfbfbf, rgb(191, 191, 191)
Common Use Cases
- Deriving hover or disabled colors from a base color
- Finding a color between two brand colors
Frequently Asked Questions (FAQ)
Does it mix like paint?
No. It mixes screen light (RGB), so red + green gives a dark yellow rather than brown.