← All Tools
Color Blender Generator🔒 100% local
Blend two colors. Privacy-first, no server uploads, no tracking.
Related Tools
Takes two hex colours and an optional position from 0 to 100 and returns the linear sRGB interpolation at that position, in both hex and rgb(). It also prints the ten-step ramp between the endpoints in 10 percent increments, so you can read off a stop that is not the midpoint and lift it straight into a gradient. The defaults are the two endpoints only, with the mix at 50 percent.
How to use it
- Enter the two colours as six-digit hex values separated by commas, and the position as a third value if you want a mix other than the midpoint.
- Press Process.
- Copy the result line for a single colour, or lift any row of the ramp into a gradient definition.
Worked example
#FF0000, #0000FF, 50becomesBlend of #FF0000 and #0000FF at 50%:
Result: #800080 rgb(128, 0, 128)
Gradient stops (10% steps):
0% #FF0000
10% #E6001A
20% #CC0033
30% #B3004D
40% #990066
50% #800080
60% #660099
70% #4D00B3
80% #3300CC
90% #1A00E6
100% #0000FF
CSS: background: linear-gradient(90deg, #FF0000, #800080, #0000FF);Each channel is interpolated on its own, so red and blue at 50 percent give rgb(128, 0, 128) - a muted purple, because sRGB mixing averages light rather than pigment.
When to use it
- Finding the midpoint between a brand pair for a hover or selected state.
- Generating ten evenly spaced stops for a CSS gradient without leaving the browser.
- Checking what a 25/75 blend of two tokens looks like before you commit to it.
What it does not do
- Both colours must be full six-digit hex; three-digit shorthand, named colours and rgb() syntax raise an error.
- The mix is linear in sRGB, so obvious-looking pairs come out duller than expected - yellow blended with blue gives grey, not green.
- Two colours only: a multi-colour blend needs a gradient tool.
- The CSS line is a three-stop gradient through the blend you computed, not a smooth perceptual ramp between the endpoints.