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 produces a perceptually smooth blend in sRGB space.

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. For most design purposes the sRGB blend matches what CSS mix() and gradient midpoints produce.

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.

Color Mixer

Name: Color Mixer
Availability: InStock
Author: Nham Vu

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

Color A

Hex value

Color B

Hex value

Blend Ratio

50%

A B

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

Mixed Color

Hex

#8c5fc8

RGB

140, 95, 200

Gradient Strip — Click any swatch to copy

25%

50%

75%

100%

Copied!

Summary

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

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-06-09 · Reviewed by Nham Vu