Color Blend Calculator
Mix two hex colors at any ratio.
50 = even mix
Results update as you type.
How it works
Blending two colors is a common task in design and development, and this calculator mixes any two hex colors at a ratio you choose. You enter two colors in hexadecimal notation and the percentage weight of the first color, and it returns the resulting blended color in hex along with its red, green, and blue values. The calculation is a linear interpolation performed separately on each of the three color channels: for red, green, and blue, the result is the first color's channel times your ratio plus the second color's channel times the remaining fraction. A ratio of 50 percent produces an even mix, a value like black and white blending to gray, while shifting the ratio weights the result toward one color or the other. This is useful for creating intermediate shades between two colors, generating color gradients and palettes, tinting or shading a base color by blending toward white or black, and finding a midpoint color for design systems. Hexadecimal is the standard way to specify colors on the web, with two hex digits each for red, green, and blue, and the calculator also gives the RGB values, which are handy for other contexts. Note this performs a simple linear blend in RGB space, which is straightforward and widely used, though perceptual color spaces can produce smoother-looking gradients for some color pairs. Enter two hex colors and a ratio to find the blended color.
channel = c1 × ratio + c2 × (1 − ratio), for R, G, B
Each color's red, green, and blue channels are mixed independently. The blended value of a channel is the first color's value times the ratio plus the second color's value times one minus the ratio. Combining the three blended channels gives the resulting color in hex and RGB.
Source:Color interpolation
We review all our tools from time to time to ensure accuracy.
Worked example
How to use this calculator
- 1
Enter your values
Enter color 1 (hex) and color 2 (hex).
- 2
Adjust the options
Adjust percent of color 1 if they apply — sensible defaults are already set.
- 3
Read your result
Blended color (hex) updates instantly as you type — no button to press.
Frequently asked questions
How do you blend two colors?
Blend each color channel separately. For red, green, and blue, take the first color's value times your chosen ratio plus the second color's value times the remaining fraction, then combine the three results. A 50 percent ratio gives an even mix. The calculator does this and returns the blended color in hex and RGB.
What does the ratio control?
The ratio is the percentage weight of the first color in the mix. At 50 percent the two colors blend evenly; at 100 percent the result is the first color, and at 0 percent it is the second color. Values in between shift the blend toward one color, letting you create any intermediate shade along the line between them.
What is hexadecimal color notation?
Hex color notation specifies a color with six hexadecimal digits, two each for red, green, and blue, often prefixed with a hash, like #FF8800. Each pair ranges from 00 to FF (0 to 255 in decimal). It is the standard format for colors on the web, and the calculator accepts and returns colors in this notation.
What can I use color blending for?
Color blending helps create intermediate shades between two colors, build gradients and color palettes, tint a color toward white or shade it toward black, and find midpoint colors for design systems and data visualizations. It is a core operation in graphic design, web development, and any work involving smooth color transitions.
Does this blend in RGB or a perceptual color space?
This calculator blends linearly in RGB space, mixing the red, green, and blue channels independently, which is simple and widely used. For some color pairs, blending in a perceptual color space like LAB or using gamma correction produces gradients that look smoother to the eye. For most everyday mixing, the straightforward RGB blend works well.