Color Mixer
Blend two colors with adjustable ratio in RGB, HSL, or OKLCH space.
Color A
#A857C5
rgb(168, 87, 197) · hsl(284, 49%, 56%)
Blend Mode
Color B
Blend Steps
How to Use the Color Mixer
- 1.Pick Color A and Color B using the color pickers or by typing HEX values directly.
- 2.Drag the ratio slider to control the mix — 0% is 100% Color A, 100% is 100% Color B.
- 3.Switch between RGB, HSL, and OKLCH blend modes to see how each produces a different result.
- 4.Adjust the steps (5, 7, 9, or 11) to see a full gradient between the two colors. Click any step to copy it.
- 5.Click "Copy Mixed Color" to copy the blended result as a HEX value.
What is Color Mixing and Why Does Blend Mode Matter?
Color mixing is the process of interpolating between two colors to produce an intermediate value. While this sounds simple, the result differs significantly depending on which color space the interpolation happens in. This tool offers three options — RGB, HSL, and OKLCH — each with different characteristics.
RGB interpolation is the most common and what CSS transitions use by default. Mixing red and green in RGB produces a muddy brown at the midpoint, because the eye perceives the intermediate RGB values as a de-saturated color. HSL interpolation travels around the hue wheel, often producing vivid intermediate hues — mixing red and blue through HSL will pass through violet and purple. OKLCH interpolation is perceptually uniform, meaning the middle value looks equidistant between the two endpoints to the human eye, which often produces the most natural and visually balanced result.
The steps preview is particularly useful for generating gradient color stops, creating smooth tint-to-shade transitions, or building intermediate palette values between two anchor colors in a design system.
Frequently Asked Questions
Which blend mode should I use?
For general design work, OKLCH typically produces the most visually natural midpoints. Use RGB if you need to match browser default interpolation. Use HSL if you want to travel through vivid intermediate hues, such as for a rainbow gradient.
Can I use this to generate CSS gradient stops?
Yes. Set the steps to 5 or 7, choose your preferred blend mode, and click each step to copy the HEX values. Use them as color stops in a linear-gradient() for smooth, perceptually consistent gradients.
Why does mixing red and green not produce yellow?
In RGB (additive color mixing on screens), red + green does produce yellow. But in the RGB blend mode here, you are mixing the color channels numerically at 50%, which produces a muted brownish result because neither red's nor green's luminance is at maximum. To get vivid yellow from red and green, use the HSL blend mode which travels through the hue wheel.