Color Mixer
Pick two colors, set how many steps and how the balance should lean, and get the full gradient strip as copyable hex codes or a CSS gradient — no signup.
Perceptually uniform — best for natural-looking mids
Mix Result — 7 colors
When to Use a Color Mixer
The most common use is generating a tint-to-shade range between a brand color and white or black — but the tool is more useful than that. Blend two brand colors to find a plausible third that sits naturally between them. Mix a foreground and background color to produce accessible intermediate tones for hover states or disabled elements. Generate a gradient strip for a CSS background without manually calculating stop values.
Unlike a general palette generator that picks harmonious but unrelated hues, a mixer always produces colors that are mathematically related to your two inputs — which means the result looks intentional even to viewers who can't articulate why.
LCH vs LAB vs RGB Blending
The blend mode changes how intermediate colors are computed, which becomes most visible in the center of the strip. RGB interpolation is the simplest: it adds equal amounts of each channel per step. The problem is that RGB is not perceptually uniform — equal steps in channel values do not look equally different to the eye, so the midpoint often looks dull or muddy even when the endpoints are vibrant.
LAB and LCH fix this by interpolating in color spaces calibrated to human vision. LCH goes one step further than LAB by preserving chroma (colorfulness) during the blend, which means vivid colors stay vivid through the transition rather than passing through a grey center. For most design use cases, LCH is the best default. LAB is a reasonable alternative when you want slightly more neutral mids. Use RGB when you need to match what CSS or a design tool would compute natively.
| Mode | Midpoint character | Best for |
|---|---|---|
| LCH | Vivid, perceptually even | Design palettes, UI gradients, brand work |
| LAB | Neutral mids, no hue drift | Photography, print design, accessible UI |
| RGB | Raw channel blend, may look muddy | CSS output matching, technical exact-value work |
Practical Uses for Mixed Palettes
Specific scenarios where a computed mix is more useful than a manually chosen color:
Button hover / focus states
Mix your primary button color with white at 2–3 steps — the intermediate shades give you natural-looking hover, active, and disabled states without guessing.
Chart and data visualization
Mix two brand colors across 5–9 steps to produce a sequential color scale for heatmaps, bar charts, or choropleth maps — each band is visually distinct and all are on-brand.
Gradient backgrounds
Use 'Copy CSS' to get a linear-gradient() with exact stop positions. Adjust steps to control how smooth or banded the transition looks.
Tint and shade scales
Mix your brand color with #FFFFFF (full white) for tints, or #000000 for shades — 9 steps gives you the same density as a Tailwind shade scale.
Frequently Asked Questions
What is color mixing in this context?
This tool blends two colors by interpolating between them in a chosen color space (LCH, LAB, or RGB), producing a gradient strip of intermediate shades. Each swatch in the strip is an exact color value you can copy — it's not a screenshot or a CSS trick, it's real computed hex codes at evenly-spaced intervals along the blend.
What is the difference between LCH, LAB, and RGB blending?
LCH (lightness, chroma, hue) and LAB (lightness, a*, b*) are perceptually uniform color spaces — a step of equal size looks equally different to the human eye regardless of where it sits on the scale. This means LCH and LAB mixes tend to produce mids that look naturally in-between, without the muddy or desaturated center that often appears when mixing two vivid colors in RGB. RGB simply interpolates the three channel values independently, which can produce unexpected results (mixing red and green in RGB passes through a muddy brown/olive mid, while LCH often stays more vibrant). Use LCH or LAB for design palettes; RGB for technical applications that need predictable channel-level control.
What does the Balance slider do?
The balance slider shifts where the 50/50 midpoint sits in the gradient. At the default center position (50%), the mid-strip swatch is exactly halfway between the two colors. Dragging toward Color A means the first half of the strip is compressed into Color A territory — more steps cluster near A, fewer near B. This is useful when one color is more dominant in your design and you want more nuance in its range rather than a perfectly even blend.
How many steps should I use?
For a Tailwind-style shade scale (50 through 950) you'd typically want 9–11 steps. For a simple 3-swatch palette accent, 3–5 is enough. The strip always includes the two endpoint colors regardless of step count, so increasing steps adds more intermediate values between them — the ends never change.
Can I use the output as a CSS gradient?
Yes — the 'Copy CSS' button generates a linear-gradient() declaration with percentage stop positions matching the strip, ready to paste into any stylesheet. For a more flexible gradient, copy the hex codes individually and build your own gradient with custom stop positions in CSS or your design tool.