Color Blender
Blend two colors to generate in-between shades. Control balance and midpoints—copy hex from any swatch instantly.
Shift the blend toward Color 1 or Color 2 — lower % clusters toward Color 1, higher % toward Color 2.
- 1Pick two colors using the swatches or type in hex codes directly.
- 2Drag the Balance slider to shift the blend weight toward either color.
- 3Use the Midpoints slider — on larger screens you can also tap a number (1–18).
- 4Tap any swatch to copy its hex code.
- 5Use Export to open the export modal and copy or download in multiple formats.
Color Blender Guide
Mix two colors into palettes & gradients
RGB blending
This blender mixes colors in sRGB by averaging red, green, and blue channels. At 50% between #FF0000 and #0000FF, each channel becomes the midpoint: a purple around #800080.
Balance & curve
The balance slider shifts weight toward Color 1 or Color 2 without changing the endpoints. It uses a curve so small movements near the ends still produce visible change—handy for nudging a midpoint toward a brand primary while keeping the other anchor fixed.
Midpoints & gradients
Midpoints controls how many steps are generated between your two colors (plus the endpoints). More steps yield a smoother ramp for CSS gradients, design tokens, or illustration shading. The gradient strip and generated CSS update together with the palette row.
On larger screens you can jump to a specific step count with the number row; on small screens the slider and current value keep the control usable without horizontal overflow.
Copy & export
Tap a swatch to copy its hex, or use Copy gradient to grab a linear-gradient(...) string for CSS. The export flow in the palette row matches other tools on the site if you need multiple formats in one go.
Perception & color spaces
Simple RGB averaging is predictable for developers but not always perceptually even—two blends with the same numeric “distance” can look uneven in lightness or saturation. For art-directed ramps, designers often refine in OKLCH or HSL; this tool stays in sRGB for transparent, code-friendly math.
Accessibility
Mid-tone blends often fail as text on white and on black. Before shipping a gradient or token scale, paste candidate hex values into the Contrast Checker to verify WCAG AA or AAA for your real foreground/background pairs.