How is the blended color calculated?

The tool uses linear RGB interpolation: each channel (R, G, B) is computed as R_A + (R_B - R_A) * ratio, where ratio ranges from 0 (Color A) to 1 (Color B). This is a straight blend of the sRGB values, the same math as CSS color-mix(in srgb, A, B).

Why does the 50% blend sometimes look darker than expected?

Linear RGB interpolation operates in gamma-encoded sRGB space. Mixing in linear light (gamma-corrected) space would appear slightly brighter at the midpoint. The sRGB blend matches CSS color-mix(in srgb, …) and the midpoint of a linear-gradient between two hex colors. Blending in linear light or OKLab gives a brighter, more even midpoint.

How do I copy a color from the gradient strip?

Click on any of the five swatches in the gradient strip. The hex value for that swatch is copied to your clipboard and a confirmation message appears briefly.

Can I use this to generate CSS gradient code?

The tool focuses on color blending. To generate a CSS gradient from the two colors, use the Gradient Generator tool on this site.

Does this work on mobile?

Yes. The layout is fully responsive. The color pickers and slider work on touch screens. Tap the swatch or hex value to copy on mobile.

Why do blue and yellow make gray instead of green?

Paint mixes by absorbing light, and blue and yellow pigments both reflect some green. Screen colors are light, and the average of #0000FF and #FFFF00 is the neutral #808080. For a greener result, mix a green-leaning blue such as #0080FF with yellow (#80C080 at 50%), or pick the green directly.

Can I mix more than two colors?

Not in one step. Mix the first two, copy the result hex, then use it as Color A with the third color. Each step blends at the ratio you set.

Color Mixer

Pick two colors, drag the ratio slider, and instantly see the blended color with hex and RGB values plus a 5-step gradient strip.

Pick two colors and drag the slider.

Color A

Hex value

Color B

Hex value

Blend Ratio

50%

A B

0% (pure A) 50% 100% (pure B)

Mixed Color

Hex

#9a7b86

RGB

154, 123, 134

Gradient Strip — Click any swatch to copy

25%

50%

75%

100%

Copied!

Quick answer

Pick two colors and drag the slider. The tool blends each RGB channel, so 50% red #FF0000 and 50% white #FFFFFF gives #FF8080. Screen colors mix like light, not paint, so blue and yellow give gray here instead of the green you get from paint.

Examples

Color A	Color B	50% mix
Red #FF0000	White #FFFFFF	#FF8080 (pink)
Red #FF0000	Yellow #FFFF00	#FF8000 (orange)
Red #FF0000	Blue #0000FF	#800080 (purple)
Black #000000	White #FFFFFF	#808080 (gray)
Blue #0000FF	Yellow #FFFF00	#808080 (gray, not green)

Pick two colors to blend.

Summary

The Color Mixer lets you blend any two colors together using a simple ratio slider. Adjust the mix from 0% (pure Color A) to 100% (pure Color B) and watch the result update in real time. The tool shows the blended color as a large preview swatch with its hex and RGB values. A 5-step gradient strip from Color A to Color B gives you the full range at a glance. Click any swatch to copy its hex value.

How it works

Pick Color A using the first color picker.
Pick Color B using the second color picker.
Drag the ratio slider to set the blend — 0% is pure Color A, 100% is pure Color B.
The large preview swatch updates instantly to show the blended color.
The hex and RGB values of the blend are displayed below the swatch.
Click the swatch or the hex value to copy it to your clipboard.
The 5-step gradient strip shows the blend at 0%, 25%, 50%, 75%, and 100%.
Click any strip swatch to copy that step's hex value.

Use cases

Find the exact midpoint between two brand colors.
Generate intermediate palette steps between two hues.
Test how a color transitions into a background shade.
Prototype accessible tint or shade ramps for a design system.
Quickly explore color harmonies by blending complementary pairs.
Produce intermediate colors for data visualization gradients.

Frequently Asked Questions

Last updated: 2026-05-28 · Reviewed by Nham Vu