Color Mixer — Blend Any Two Colors in Any Ratio
Pick two colors, instantly preview five blend ratios, and copy HEX, RGB, or HSL for every mix. Free, no sign-up required.
🧪 5 Blend Ratios
📋 Copy HEX / RGB / HSL
🎨 Live Preview
⚡ Instant Results
About the Color Mixer
The Color Mixer blends any two colors using RGB linear interpolation — the same algorithm used in CSS gradients, canvas drawing APIs, and every major image-processing library. Enter two HEX colors and instantly see five mathematically precise blend points: 10%, 25%, 50%, 75%, and 90% of Color A mixed with Color B.
This is the fastest way to create tints and shades: mix your brand color with white (#FFFFFF) to generate a tint ladder, or mix with black (#000000) to build shade variants for a complete design system scale. It is also ideal for finding the midpoint between two palette entries, verifying gradient stops, and exploring unexpected color combinations.
Every blend result is presented with its HEX, RGB, and HSL values — all one click from your clipboard. No accounts, no exports, no waiting.
Frequently Asked Questions
How does digital color mixing work? +
Digital color mixing uses RGB linear interpolation. Each channel — Red, Green, and Blue — is independently blended between the two input values based on the ratio. At 50/50, every channel is averaged. At 25/75, you get 25% of Color A's value plus 75% of Color B's value for each channel. This is the same algorithm used by CSS gradients, canvas APIs, and WebGL fragment shaders when they interpolate between two color stops.
Why is digital mixing different from paint mixing? +
Paint mixing is subtractive — pigments absorb light wavelengths, so mixing more pigments darkens and muddies the result. Mixing red and green paint produces a muddy brown. Digital RGB is additive — light is combined, so mixing red and green light produces yellow (#FFFF00). This is why digital mixing can look very different from what a painter expects. For realistic paint simulation, use this tool as a starting guide and adjust the hue and saturation toward the expected pigment result.
What blend ratio should I use? +
Use 10/90 or 90/10 to create a subtle tint or hint — ideal for hover states, disabled states, or very light background washes. Use 25/75 or 75/25 for a noticeable but asymmetric blend — useful for color scale steps in a design system. Use 50/50 for the exact midpoint between two palette entries, or to find the gradient stop that sits visually halfway between two brand colors.
How do I make tints and shades of a color? +
To create tints, set Color B to #FFFFFF (white) and vary the ratio — 10/90 gives a very light tint, 50/50 gives a pastel. To create shades, set Color B to #000000 (black) — 75/25 gives a dark variant, 90/10 gives a very dark near-black. This is how complete design system color scales (like Tailwind's 50–950 steps) are built from a single base hue.
What is the difference between mixing in RGB vs HSL? +
RGB mixing interpolates numeric channel values and can produce grey or desaturated mid-tones when mixing complementary colors — for example, mixing red and cyan produces grey. HSL mixing travels around the hue wheel and tends to produce more vivid intermediate colors. This tool uses RGB interpolation, consistent with how CSS gradients and most design-tool gradient engines work.
Can I mix transparent colors? +
This tool works with fully opaque 6-digit HEX colors. For transparency, CSS rgba() lets you alpha-composite manually: rgba(R1*t + R2*(1-t), G1*t + G2*(1-t), B1*t + B2*(1-t), alpha). Graphic editors like Figma handle transparent layer blending via layer opacity. For CSS gradient stops with transparency, the Gradient Maker tool supports rgba() values directly as gradient color stops.
How do I copy the mixed color value? +
Click any of the five blend swatches to copy that blend's HEX code to your clipboard. Clicking a swatch also opens the detailed output panel below, where HEX, RGB, and HSL are shown as clickable values. Click any value to copy it. Paste directly into Figma, your CSS file, Tailwind config, or any color input. All values update in real time as you change either input color.
How is color mixing used in design systems? +
Design systems build complete color scales by systematically mixing a primary brand color with white (tints at steps 50–400) and black (shades at steps 600–950). Each blend ratio creates one step in the scale. This tool lets you preview any individual blend point interactively. Combine the results with the Contrast Checker to verify each step meets WCAG AA (4.5:1) contrast when used with text.
