HH Color Lab
Color Mixer

Mix two colors and see what you get.

Pick any two colors, slide to choose the amount of each, and copy the result or any step in between.

Choose two colors

Mix them like paint. Move the slider to decide how much of each color goes in.

All AAll B

How should the colors blend?

Your mixed color

HEX
RGB
HSL

Every step in between

A vertical strip from Color A (top) to Color B (bottom). Tap a row to copy it.

Number of steps

How to use this tool (step by step)

Small steps, each with the reason behind it. Perfect for beginners, and a handy checklist for experts.

  1. Choose your two colors

    • Press the color square next to Color A and pick a color.
    • Do the same for Color B, or type HEX codes.
    • Press Swap if you want to reverse them.

    Why we do this: A mix needs two starting colors, just like paint on a palette.

  2. Decide how much of each

    • Move the slider left to use more of A.
    • Move it right to use more of B.
    • Leave it in the middle for an equal mix.

    Why we do this: Mixing 50/50 gives a very different color than 80/20. The slider gives you full control.

  3. Choose a blending style

    • Natural mixes light the way real light works and looks the most pleasing.
    • Simple (RGB) averages the numbers, as most design tools do.
    • Hue blend travels around the color wheel, so red and blue pass through purple.

    Why we do this: Different programs blend differently, so you can choose the one that matches what you need.

  4. Use the steps

    • Look at the vertical strip: it shows the whole journey from A to B.
    • Choose 5, 7, 9, 11 or 13 steps.
    • Tap any row to copy its HEX code, or copy all codes at once.

    Why we do this: A smooth set of steps is perfect for gradients, charts and color scales.

Questions people ask

Quick answers.

Why is blue + yellow not green here?

Screens mix light, not paint. Blue and yellow light together give a grayish tone. Paint mixing works differently because pigments absorb light. The Hue blend style lets you travel through green on the color wheel.

Which blending style should I use?

Natural is a great default. Use Simple (RGB) to match what most design software does, and Hue blend for colorful gradients.

Can I use the steps as a gradient?

Yes. Copy the first and last codes into a CSS gradient, or use the in-between steps for a custom color scale.

How many colors can I mix?

This page mixes two colors. To combine more, mix two, then mix the result with a third.