Skip to main content
WebColorTools

Color Mixer

Blend colors with weighted OKLCH mixing. Vivid, natural results — export to CSS. Free, in your browser.

Instant 100% Private Free Forever
Color Mixer Blend Colors OKLCH Design CSS

Mixed result

Composition
HEX —
RGB —
HSL —
OKLCH —

Blend mode

Input colors

Tap a swatch to edit color · up to 10 with independent weights.

#2424DB
#DBDB24

Export mixed color

How to use the Color Mixer

Four steps from input swatches to export-ready blended color.

  1. 1

    Set your input colors

    Use the swatch picker or type a HEX code for each color. Start with two; add up to ten with Add color.

  2. 2

    Adjust weights

    Drag each weight slider. Equal weights mean equal contribution. Higher weight pulls the result toward that swatch.

  3. 3

    Choose a blend mode

    Try OKLCH (default) for vivid, natural mixes. Switch to RGB, HSL, or LAB to compare how the color space changes the outcome.

  4. 4

    Copy or export

    Copy HEX, RGB, HSL, or OKLCH from the result panel. Export the mixed color — and optionally all inputs — via the export modal.

What is a color mixer?

A color mixer answers one of the most common design questions: what color do I get when I blend these? Paint on canvas mixes pigments; on screen we mix light. The math depends on the color space you choose. Averaging red and green channels in RGB often yields a dull brown-gray. Mixing the same hues in OKLCH — a perceptually uniform space — keeps the result brighter and more faithful to how your eye expects colors to combine. That is why this tool defaults to OKLCH: it is the same advantage modern CSS oklch() workflows aim for.

WebColorTools lets you add up to ten input colors, each with an editable HEX value and a weight slider. Weights are relative: two colors both at 100% produce a 50/50 mix; three at 100% split evenly. Pull one weight higher and the result shifts toward that swatch. Set a weight to zero to exclude a color temporarily. Switch blend modes to compare RGB (channel average), HSL (cylindrical interpolation with shortest-path hue), CIELAB (device-independent), and OKLCH (polar OKLab). The large result swatch updates instantly with copy-ready HEX, RGB, HSL, and OKLCH rows.

Who uses a color blender? Brand designers testing what happens when primary and accent colors overlap; UI developers prototyping color-mix() outcomes before writing CSS; illustrators finding midpoint tones between palette stops; students comparing why naive RGB mixing looks muddy. Search terms like color mixer, blend colors online, mix two colors, and color blender tool describe exactly this workflow. Pair results with our Palette Generator to build full schemes, the Color Wheel for harmony partners, or the Gradient Generator for multi-stop backgrounds.

Export the mixed color through the same modal used across WebColorTools — CSS custom properties, Tailwind config, SCSS variables, JSON, plain lists, or Figma-ready RGB floats, in Hex, RGB, HSL, OKLCH, or CMYK. Optionally include every input swatch in the export batch. Everything runs client-side in your browser: no upload, no account, no API. Whether you are settling a brand tint, debugging a theme token, or teaching why color space matters, a weighted OKLCH color mixer turns subjective eyeballing into precise, copy-ready values in seconds.

Frequently asked questions

What is a color mixer?
A color mixer (or color blender) combines two or more colors into one result. Unlike simply averaging hex digits, a good mixer lets you control how much each input contributes via weights, and which color space the blend happens in — RGB, HSL, LAB, or OKLCH. That matters because naive RGB mixing often produces muddy browns and grays.
Why blend in OKLCH instead of RGB?
OKLCH is a perceptually uniform space: equal steps look equally different to the human eye. When you mix vivid hues in OKLCH, the result stays brighter and more natural than the same mix in RGB, which tends to darken and desaturate toward gray. This tool defaults to OKLCH for that reason — it is our quality edge over basic mixers.
How do color weights work?
Each input has a weight slider from 0–100%. Weights are relative, not absolute: two colors both at 100% blend 50/50; three at 100% blend in equal thirds. A color at 75% versus one at 25% contributes three times as much. Set a weight to 0 to exclude a swatch without removing it.
Can I mix more than two colors?
Yes. Start with two colors and click Add color to build up to 10 inputs. Adjust each weight independently — useful for tinting a brand blue with a splash of accent yellow, or prototyping multi-stop palette midpoints.
Can I export the mixed color?
Yes. Click Export to open the shared palette export dialog. Copy the result as CSS variables, Tailwind config, SCSS, JSON, a color list, or Figma-ready values in Hex, RGB, HSL, OKLCH, or CMYK. Optionally include all input colors in the export.

Related tools

More free tools — all run in your browser.

Palette Generator

Generate beautiful color palettes instantly. Lock colors, explore schemes, export to CSS.

Color Wheel

Explore color harmonies on an interactive wheel. Complementary, triadic, analogous, and more — export to CSS.

Gradient Generator

Create beautiful CSS gradients visually. Linear, radial, conic — copy the code instantly. Free, in your browser.

Color Converter

Convert between HEX, RGB, HSL, HSV, CMYK, and OKLCH.