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: #683A84RGB: rgb(104, 58, 132)HSL: hsl(277, 39%, 37%)

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 full picture?

This tool fixes one thing. Our scanner runs 240+ checks across 10 SEO pillars and hands you a prioritised fix list — plus a savage AI roast.

Run a free audit

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.

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.

Features

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

Related tools

CSS Gradient Generator

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

Open tool

CSS Box Shadow Generator

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

Open tool

CSS Border Radius Generator

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

Open tool

CSS Flexbox Generator

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

Open tool

CSS Grid Generator

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

Open tool

CSS Text Shadow Generator

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

Open tool

See all CSS & Design tools

Frequently asked questions

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.

What is Color Mixer?

How to use Color Mixer

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.

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.

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.

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.

Features

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

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?

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?

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?

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.