# Colour Mixer & Blender

> Blend two colours and generate the intermediate steps between them.

To mix two colours, pick both and choose how many intermediate steps you want. RGB blending matches what CSS gradients do by default, while HSL blending travels around the colour wheel and keeps the middle steps vivid rather than washing out to grey.

**URL:** https://convertto.tech/t/color-mixer
**Category:** Color Tools (https://convertto.tech/c/color-tools)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

- **Privacy:** Runs entirely in your browser — nothing is uploaded
- **Cost:** Free, unlimited, no sign-up

## How to use

1. Pick the colour a.
2. Pick the colour b.
3. Set the steps.
4. Choose the blend in.
5. The result appears immediately — copy or download it.

## FAQ

### Why does mixing blue and yellow not give green here?

Because screens mix light, not pigment. Additive mixing of blue and yellow light gives white or grey; the green you expect comes from subtractive mixing, which is how paint behaves.

## Related tools

- [Colour Converter](https://convertto.tech/t/color-converter): Convert any colour to HEX, RGB, HSL, HSV, CMYK, LAB and native code — with contrast, tints and harmonies.
- [CSS Gradient Generator](https://convertto.tech/t/gradient-generator): Build linear, radial and conic CSS gradients and copy the code.
- [Colour Blindness Simulator](https://convertto.tech/t/color-blindness-simulator): See how a colour appears to people with protanopia, deuteranopia and tritanopia.
- [Colour Palette Generator](https://convertto.tech/t/color-palette-generator): Build harmonious palettes — complementary, triadic, analogous and monochromatic.
- [Colour Tints & Shades Generator](https://convertto.tech/t/color-shades-generator): Generate lighter tints and darker shades of any colour, with hex values.
- [Tailwind Colour Shade Generator](https://convertto.tech/t/tailwind-shade-generator): Generate a full 50–950 Tailwind colour scale from a single brand colour.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [Glassmorphism CSS Generator](https://convertto.tech/t/glassmorphism-generator): Create frosted-glass CSS with backdrop blur, transparency and a subtle border.