Handitab

Color Mixer

Mix two colors in any ratio from 0 to 100 percent and get the blended color as HEX, RGB, and HSL codes, calculated channel by channel.

About Color Mixer

Color mixing here is linear interpolation in sRGB: each of the red, green, and blue channels of the result lies between the two input values, at the percentage you set. At 50 percent the result is the plain average of the channels. Many design tools mix this way by default, but it is not how paint mixes, and midpoints between vivid colors can look darker or greyer than expected.

Also known as: Blend Colors.

How to use Color Mixer

  1. Fill in "First color", "Second color" and "Share of second color".
  2. The result appears below and updates as you type.
  3. Copy the result with the copy button, or download it as a file where that is offered.

Questions about Color Mixer

Why does mixing blue and yellow give grey instead of green?

The tool averages light values per RGB channel, which is additive mixing. Pure blue and pure yellow average to a neutral grey. Paint mixes subtractively by absorbing light, which is why pigments give green.

Runs in your browser. Page last updated .

More css and color tools

All 39 css and color tools
Color PickerPick a color with the color picker built into your browser and copy its code in HEX, RGB, or HSL for use in CSS or a design tool.Color Shades GeneratorGenerate 3 to 15 shades of one base color from light to dark, keeping its hue and saturation, with a HEX code and swatch for each step.CSS Animation GeneratorGenerate a CSS keyframe animation such as fade, slide, zoom, bounce, pulse, shake, or spin with duration, delay, and easing options.CSS Background Pattern GeneratorGenerate a repeating CSS background pattern (stripes, dots, grid lines, checkerboard, or diagonal lines) from two colors and a size.CSS Checkbox GeneratorGenerate CSS for a custom styled checkbox with your own size, corner radius, and colors that still uses a real, accessible input element.CSS Clip Path GeneratorPick a shape such as a triangle, hexagon, star, arrow, or circle and get the matching CSS clip-path value with a live preview.