How does color mixing work?

This tool uses RGB (additive) color mixing. Each color channel (Red, Green, Blue) is linearly interpolated between the two input values based on the mix ratio. At 50/50, each channel is the average of the two input values. This matches how CSS color-mix() works in the sRGB color space.

What is the difference between RGB mixing and paint mixing?

Paint mixing is subtractive -- mixing red and blue paint gives purple. RGB mixing is additive -- mixing red and blue light gives magenta. This tool uses additive mixing, which matches how screens display color and how CSS gradients work.

How do I create a color palette from two colors?

Select your two endpoint colors, then click a step count (5 or 7 recommended). The tool generates evenly-spaced colors between them. Copy each color's HEX value to build your palette. This is great for creating a monochromatic or two-tone design system.

Can I mix more than two colors?

This tool mixes two colors at a time. To mix three or more colors, mix the first two, then use the result as Color 1 and your third color as Color 2. Repeat for additional colors.

What color space is used?

Mixing is performed in sRGB (the standard web color space). For perceptually uniform mixing, LAB or OKLAB color spaces produce better results, but sRGB is the most widely used and matches CSS behavior.

Can I use the gradient steps as CSS colors?

Yes. Each step outputs a standard HEX color value that works in any CSS property. Click a swatch to copy the HEX value. You can use these values to build a CSS gradient, design token scale, or custom color palette.

Why does 50/50 mix not always look like the midpoint?

Human color perception is nonlinear. A mathematical 50/50 mix in sRGB may not appear visually centered to your eyes. For perceptually balanced midpoints, mixing in OKLAB or HCL color space is more accurate -- but sRGB is the industry default.

Can I save my palette?

Currently you can copy individual HEX values. Use Ctrl+Shift+C (Copy All) to copy all step colors at once. Paste them into a CSS variables file or design tool for reuse.

CSS & Design

Color Mixer

Mix two colors together at any ratio. Generate intermediate color steps for gradient palettes. View HEX, RGB, and HSL values.

100% free
No sign-up
No limits
Instant results

Color 1

Color 2

Mix ratio50% Color 2

100% Color 1100% Color 2

Mixed color

HEX: #8E5C81RGB: rgb(142, 92, 129)HSL: hsl(316, 21%, 46%)

Gradient steps

What this tool does

Mix any two colors with adjustable ratio
Visual color pickers for both colors
HEX, RGB, and HSL values for mixed result
Gradient steps mode: 3, 5, 7, or 10 intermediate colors
Click any swatch to copy its value
100% client-side -- no server calls

Want the whole picture? Run 240+ checks on your site — free, 30 seconds, no signup.Run a free audit

The short version

What is Color Mixer?

A color mixer blends two colors together to create a new color.

By adjusting the mix ratio, you control how much of each color contributes to the result. The Steps mode generates a series of evenly-spaced intermediate colors between your two picks -- perfect for creating gradient palettes, design systems, or color scales. All mixing is done in RGB color space with real-time preview.

Step by step

How to use Color Mixer

1
Pick two colors
Use the color pickers or type HEX values for Color 1 and Color 2. These are the two endpoints of your mix.
2
Adjust the ratio
Drag the mix ratio slider. At 0% you see pure Color 1, at 100% pure Color 2, and at 50% an equal blend. The gradient track shows the full spectrum between your colors.
3
View the result
The mixed color appears in the center with its HEX, RGB, and HSL values. Click the swatch to copy the HEX value.
4
Generate gradient steps
Click a step count (3, 5, 7, or 10) to generate evenly-spaced intermediate colors between your two picks. Each step swatch is clickable to copy its color.

What's inside

Everything this tool
does for you

Visual color pickers for both input colors
Adjustable mix ratio with gradient slider track
Mixed result displayed in HEX, RGB, and HSL formats
Gradient steps mode with 3, 5, 7, or 10 intermediate colors
Click any color swatch to copy its HEX value
Full gradient strip preview showing the color transition
Live update as you adjust colors or ratio
100% browser-based -- no server calls or data uploads

Keep going

Related free tools

All CSS & Design tools

CSS Gradient Generator

Create beautiful linear, radial and conic CSS gradients with live preview. Copy CSS or Tailwind code.

CSS & Design

CSS Box Shadow Generator

Build layered box shadows visually with offset, blur, spread and color controls. Copy CSS instantly.

CSS & Design

CSS Border Radius Generator

Design custom border-radius shapes with independent corner controls and live preview.

CSS & Design

CSS Flexbox Generator

Visual flexbox layout builder. Configure direction, wrap, alignment and gap with live preview.

CSS & Design

CSS Grid Generator

Visual CSS grid builder with rows, columns, gap and named areas. Copy CSS and HTML code.

CSS & Design

CSS Text Shadow Generator

Create beautiful text shadows with offset, blur and color. Multiple layers and live preview.

CSS & Design

Questions

Frequently asked questions

This tool fixed one thing.
Now fix the whole site.

Our scanner runs 240+ checks across 10 audit areas, ranks every issue by the score points it costs, and hands you the code to paste.

Run a free audit

240+ checksResults in 30sNo signup

What is Color Mixer?

How to use Color Mixer

Pick two colors

Adjust the ratio

View the result

Generate gradient steps

Everything this tooldoes for you

Related free tools

CSS Gradient Generator

CSS Box Shadow Generator

CSS Border Radius Generator

CSS Flexbox Generator

CSS Grid Generator

CSS Text Shadow Generator

Frequently asked questions

How does color mixing work?

What is the difference between RGB mixing and paint mixing?

How do I create a color palette from two colors?

Can I mix more than two colors?

What color space is used?

Can I use the gradient steps as CSS colors?

Why does 50/50 mix not always look like the midpoint?

Can I save my palette?

This tool fixed one thing.Now fix the whole site.

Everything this tool
does for you

This tool fixed one thing.
Now fix the whole site.