Color Mixer
Mix two colors and explore the full gradient between them. Adjust ratio to get the exact blend you need.
About This Tool
The Color Mixer blends two hex colors in RGB space, producing a smooth mix at any ratio between 0% and 100%. The gradient scale shows 7 evenly-spaced steps from one color to the other, giving you a complete range of blended values.
RGB blending is the same operation a browser performs when compositing colors β mathematically exact and predictable. The mixed color at 50% is the true midpoint between both colors in RGB space.
How to Use
- Pick two colors using the color pickers or type hex codes directly.
- Use the preset buttons to try classic color combinations.
- Drag the ratio slider to adjust the mix. 0% gives Color 1; 100% gives Color 2.
- Click any gradient swatch or the Copy HEX button to copy a color.
Use Cases
UI designers blend a brand primary with white or black to generate accessible state colors for hover, active, and disabled states. Motion designers pick intermediate colors for keyframe animations between two brand colors. Artists explore how pigment-like blends look digitally. Frontend developers generate gradient stops without reaching for a graphics editor.
FAQ
- Is this the same as CSS gradient? β Yes. CSS linear-gradient also blends in sRGB by default. The steps shown here correspond exactly to the intermediate points a CSS gradient passes through.
- Why does mixing red and blue not give purple? β In RGB, red (#ff0000) and blue (#0000ff) at 50% gives #7f007f (dark magenta). A vibrant purple requires mixing red with a violet-blue like #8000ff.
- Can I get more gradient steps? β The scale always shows 7 steps. Use the ratio slider to inspect any specific intermediate point.
- Does this support alpha/transparency? β No, this tool works with solid hex colors only.