Aqeeb Studio

Gradients & Mixing

Color Mixer

Pick two colors and drag the slider to blend them. At 50%, pure red #FF0000 and pure blue #0000FF mix to #800080, a purple.

This tool mixes light (sRGB values), the way a screen blends colors. It does not predict how paint or ink would mix.

Steps from A to B

Your colors and images stay in your browser. Nothing is uploaded or stored on our servers.

How to use the Color Mixer

  1. Choose color A and color B with the pickers or by typing any HEX, rgb() or hsl() value.
  2. Drag the ratio slider: 0% is all color A and 100% is all color B.
  3. Read the mixed color's HEX, RGB and HSL, and copy what you need.
  4. Choose how many steps to show between A and B, then copy or export them.

Examples

Red and blue

At 50%, #FF0000 and #0000FF give #800080, which is rgb(128, 0, 128).

Making a tint

Mix red with white at 25% and you get #FF4040, a lighter red that is a quarter of the way to white.

Two brand colors

Royal blue #4169E1 and #E5484D mixed equally give #935997, a muted purple halfway between them.

Tips

  • To lighten a color, mix it with white; to darken it, mix it with black.
  • Use the gradient generator if you want the in-between colors as a CSS gradient.

Questions about the Color Mixer

Is this how paint mixes?

No. The tool mixes light the way a screen does, by averaging sRGB values. Blue and yellow paint make green, but a screen blend of #0000FF and #FFFF00 is the gray #808080.

What does the ratio slider do?

It sets how much of color B is in the blend. At 0% the result is color A, at 100% it is color B and at 50% it is an equal mix.

How are the steps calculated?

The path from A to B is divided into equal parts. Seven steps give color A, five colors between and color B.

Can I mix more than two colors?

Not in one go. Mix two colors, then use the result as color A or B with a third.

Gradient Generator

Build linear and radial CSS gradients with multiple color stops.

Tints, Shades & Tones Generator

Create lighter tints, darker shades and muted tones of any color.

Color Palette Generator

Generate harmonious palettes and export them as CSS, JSON, SVG or PNG.

Color Picker

Pick any color and copy its HEX, RGB, HSL and CMYK values.