Designer

Color Mixer

Mix two colors by any ratio and get the blended color, a blend scale, and CSS color-mix().

Designer

Why Use the Color Mixer?

This color mixer blends Color A and Color B in whatever proportion you set with the mix percentage slider, then shows the result as a copyable color. Along with the single mix, you get a 9-step blend scale running between the two inputs and the equivalent modern CSS color-mix() line, so the browser can reproduce the blend directly. It is handy for designers hunting for an in-between shade, developers replacing hard-coded hex values with live mixes, and anyone curious how digital colors combine.

How to Use the Color Mixer

  1. Set Color A and Color B with their pickers or by typing HEX, rgb(), hsl() or name values.
  2. Drag the mix percentage slider to change the proportion of the two colors and watch the mixed result update.
  3. Look along the 9-step blend scale to find intermediate colors between A and B, and click any step to copy its HEX.
  4. Copy the mixed color, or copy the color-mix(in srgb, ...) line so the browser calculates the blend in your CSS.

Best For

  • Finding a midpoint between two brand colors for a third chart series or illustration detail.
  • Softening a color by mixing it with white or with the page background color.
  • Building a stepped scale between two colors for a heat map, rating bar or progress indicator.
  • Replacing a hard-coded hover color with a color-mix() expression tied to your brand variable.

Pro Tip

Mixing in sRGB, which this tool and its color-mix(in srgb, ...) output use, can make the middle of a blend between distant hues look dull. If a midpoint looks muddy, edit the copied CSS to use in oklab for perceptually smoother steps, or in oklch to keep saturation up by travelling around the hue wheel instead of through gray. Mixing with a variable, such as color-mix(in srgb, var(--brand) 80%, white), is also an easy way to derive a hover state that updates whenever the brand color changes.

FAQ

Color Mixer FAQ

How do you mix two colors digitally?

Digital mixing usually interpolates each RGB channel: mixed = A × p + B × (1 - p), where p is the share of color A. Mixing red rgb(255, 0, 0) and blue rgb(0, 0, 255) half and half gives about rgb(128, 0, 128), a purple. This mixer applies that calculation to all three channels at once.

Why does mixing blue and yellow make gray instead of green?

Paint mixing is subtractive: blue and yellow pigments together absorb most light except green. Screens add light instead, and averaging blue rgb(0, 0, 255) with yellow rgb(255, 255, 0) gives roughly rgb(128, 128, 128), a neutral gray, because the two are opposites on the RGB wheel. To get green digitally, mix in a green or choose a blue and yellow that both lean toward it.

What is CSS color-mix()?

color-mix() is a CSS function that blends two colors in a chosen color space, for example color-mix(in srgb, #ff0000 30%, #0000ff). The percentage sets the share of the first color and the second color gets the remainder. It is supported in all current major browsers and works with CSS variables, so mixes update along with your theme.

Can I mix more than two colors?

This mixer combines two colors at a time. To blend three, mix two of them first, then enter that result as Color A and mix it with the third. In CSS you can do the same thing by nesting one color-mix() inside another.

Learn more

Guides for the Color Mixer

Color Theory

Tints, Shades, and Tones: What They Are and How to Use Each

Tints, shades, and tones explained: how each maps to HSL lightness and saturation, how to build UI color scales, and how to stop dark shades looking muddy.

Read Guide

Related tools

Keep Exploring Color Tools

Browse all 34 free color tools

Color Picker Pick any color and instantly get HEX, RGB, HSL, HSV, and CMYK codes plus the nearest color name. Image Color Picker Upload an image and click anywhere to get the exact HEX and RGB color of that pixel. Color Wheel Tool See where your color sits on the color wheel along with its complement and triadic partners. Random Color Generator Generate random colors with HEX, RGB, and HSL codes for instant inspiration. Glassmorphism CSS Generator Generate frosted glass UI effects with transparency, backdrop blur, and copy-ready CSS. Button Color Generator Generate hover, active, focus, and disabled button colors with accessible text. Image to Palette Extractor Upload an image to extract its dominant color palette, processed privately in your browser. Color Name Finder Find the closest CSS color name for any HEX or RGB code, with the top 5 matches.
Copied