🎨 Color Mixer

Blend up to 5 colors with adjustable ratios across RGB, pigment and HSL mixing modes. Copy results as HEX, RGB or HSL.

Mix Mode
Colors
Result
Add colors above and click Mix Colors.
HEX —
RGB —
HSL —
Mix Visualization

About This Color Mixer

What is a Color Mixer?

A color mixer blends two or more colors together using weighted ratios, producing a mathematically accurate result in HEX, RGB and HSL formats. This color mixer supports RGB additive mixing, pigment subtractive mixing and HSL perceptual mixing — with up to 5 colors and adjustable blend ratios.

This color mixer is a browser-based tool that calculates weighted color blends across three mixing models client-side, with no data uploaded. The tool accepts any hex color and produces a blended output the moment you change a color, weight or mode. Results are available in HEX, RGB and HSL — the three formats required by most design tools and CSS workflows.

Three mixing modes cover the primary use cases for color blending in digital work. RGB mode averages the red, green and blue channels directly — the most accurate model for screens and digital UI. Pigment mode applies a simplified Kubelka-Munk subtractive algorithm that simulates physical paint mixing, where combining yellow and blue produces green rather than a washed-out grey. HSL mode blends in the hue-saturation-lightness space, producing perceptually smoother transitions between colors in the same hue family — useful for gradient midpoints and palette interpolation.

The weight slider on each color input controls how much influence that color has over the final blend. Adding a third or fourth color shifts the balance across all inputs, with weights auto-normalizing to 100% so the blend ratios always remain mathematically consistent. The mix visualization bar shows each color's proportional contribution at a glance alongside the final result.

How to Use This Color Mixer

How the Color Mixer Works

  1. Select your base colors using the color pickers or type hex values directly into the hex input fields
  2. Adjust the weight slider for each color to control its contribution to the final color blend
  3. Choose a mixing mode — RGB for digital screen colors, Pigment for paint-like subtractive results, HSL for perceptual blending between similar hues
  4. Add up to 5 colors using the Add Color button, each with its own picker and weight
  5. Copy the result in HEX, RGB or HSL format using the copy buttons in the result panel

Use RGB mode when working on digital interfaces where colors will be rendered on screen. Pigment mode is more appropriate for packaging, print or illustration work where color blending follows physical paint behavior. HSL mode is the best choice when interpolating between two nearby shades on the same hue — for example, finding the midpoint between two blues for a gradient step or a hover state transition.

Use our Contrast Checker to verify the accessibility of your mixed color against text or background values once you have your result.

Who Uses a Color Mixer

This color mixer is built for professionals who need precise color blend calculations rather than visual approximations. Unlike picking a color by eye in a design tool, this mixer produces mathematically consistent results that can be documented and reproduced from the same inputs.

  • UI designers — Blending brand colors to produce intermediate palette values for gradients, overlays and hover state transitions
  • Artists and illustrators — Simulating paint color mixing digitally using Pigment mode before committing to physical materials
  • Front-end developers — Calculating midpoint colors for CSS animation keyframes and smooth color transitions between states
  • Brand designers — Creating intermediate shades between two primary brand colors for design system documentation and token sets
  • Accessibility reviewers — Producing blended colors for overlays and opacity layers, then verifying contrast against background values

Explore all our Color Tools for the full suite of color utilities — from palette generation to contrast checking and tint-shade scales.

Frequently Asked Questions

A color mixer is a browser-based tool that blends two or more colors together using weighted ratios, producing a mathematically accurate result in HEX, RGB and HSL formats. This color mixer supports RGB additive mixing, pigment subtractive mixing and HSL perceptual mixing — with up to 5 colors and adjustable blend ratios, all processed client-side with no data uploaded.
The color mixer calculates a weighted average of each color's channel values based on the selected mode. RGB mode averages red, green and blue channels directly. Pigment mode applies a simplified Kubelka-Munk subtractive model to simulate paint mixing. HSL mode averages hue, saturation and lightness with correct hue wrap-around handling at the 0/360 degree boundary.
RGB mixing is additive — it averages the light channels directly, which is accurate for screens and digital design. Pigment mixing is subtractive — it simulates how physical paints absorb light, so mixing yellow and blue produces green rather than grey. Pigment mode is more realistic for work involving physical materials such as print, packaging and illustration.
Yes. This color mixer supports up to 5 colors simultaneously. Click the Add Color button to add another input with its own picker and weight slider. Weights auto-normalize to 100% so the blend ratios remain proportionally correct. You can remove any color with the × button on each row — the minimum is 2 colors.
The weight slider controls each color's contribution to the final blend. A higher weight means that color has more influence on the result. Weights are automatically normalized to sum to 100%, so adjusting one slider redistributes proportionally across the others. Two colors at 50/50 produce an equal blend; a 75/25 split weights the first color three times more heavily.
HSL mixing blends colors in the Hue-Saturation-Lightness color space rather than raw RGB channels. This produces more perceptually smooth results when mixing similar hues — such as two blues or two greens — because it respects how human vision perceives color. Hue wrap-around is handled correctly at the 0/360 boundary so blends that cross from red through purple remain accurate.
After mixing, the result HEX code appears in the result panel below the color inputs. Click the Copy button next to HEX to copy it to your clipboard, or use Copy All to copy the HEX, RGB and HSL values together. The result updates automatically whenever you change a color, slider or mixing mode — no need to click Mix Colors each time after the first run.

Related Color Tools

🎨 Color Picker 🔄 Color Converter 🎭 Color Palette Generator ♿ Contrast Checker 🎚️ Tint & Shade Generator 🌈 CSS Gradient Generator