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
Clear controls
Open and use

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
Runs in your browser -- no server calls

Want the whole picture? Run a free website audit for a score and prioritised issues. No signup needed to start.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.

Color Mixer showing a worked example — Mix two or more colors together. Blend in RGB, HSL or LAB color space. See intermediate shades. — Color Mixer with the built-in example loaded. Free, no sign-up, and the result appears as you type.

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

Beyond this tool

See the full picture for your website.

Enter your URL for a free audit across eight scored areas. See prioritised issues and clear next steps in one report.

Run a free website audit

Free to start · No signup required

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?

See the full picture for your website.

Everything this tool
does for you