Color Mixer
Blend two HEX colors at a chosen ratio in RGB or Lab color space and read the resulting mid color back as a swatch and copyable HEX value.
Color Mixer — Paste two colors as HEX, set how much of color B to mix in with the ratio slider, and pick whether to blend in plain RGB or perceptual Lab space — the result appears instantly as a preview swatch and a copyable HEX value. There are no presets to wait on and no button to press; the mix recalculates as you type or drag. Everything runs entirely in your browser, so your colors never leave your device.
What is Color Mixer?
Color Mixer is a free online tool that interpolates between two colors and gives you the in-between color. You enter Color A and Color B as HEX (the #rrggbb or #rgb shorthand both work), move the ratio control from 0% (all of Color A) to 100% (all of Color B), and choose the color space: RGB mixes the raw channels directly, while Lab mixes in a perceptual space that usually keeps the midpoint looking more natural and avoids muddy grays. Designers, front-end developers, and illustrators use it to find a midtone between two brand colors, build smooth two-color ramps, derive hover or border tints, or preview how two paints or gradient stops will meet in the middle. The result is shown as a large swatch above a read-only HEX field you can copy with one click.
How to use Color Mixer
- Type or paste your first color into the Color A (HEX) field, then your second into the Color B (HEX) field, using #rrggbb or #rgb format.
- Drag the Ratio slider (or type a number) to set how much of Color B is blended in: 0% gives Color A, 100% gives Color B, 50% is the even midpoint.
- Choose the blend space with the RGB / Lab switch — pick Lab for a more perceptually even mix, or RGB for a literal channel-by-channel average.
- Watch the preview swatch update live and read the mixed color's HEX value below it.
- Click the copy button next to the result to copy the mixed HEX to your clipboard.
Examples
Even RGB midpoint of red and blue
Input
A #ff0000, B #0000ff, ratio 50%, RGB
Output
#800080
Mostly toward white
Input
A #4f86f7, B #ffffff, ratio 75%, RGB
Output
#d3e1fd
Lab vs RGB on two saturated hues
Mix #00a000 with #d000d0 at 50%. In RGB you get a dull mixed tone, while switching to Lab produces a midpoint that better matches what the eye expects between the two hues — handy for two-color gradients that should not go muddy in the middle.
Frequently asked questions
- What is the difference between the RGB and Lab options?
- RGB blends the red, green, and blue channels independently, which is fast and exactly matches how CSS averages colors but can dip into dull grays for distant hues. Lab converts both colors into the perceptual CIELAB space, interpolates there, and converts back, which usually keeps the midpoint brighter and closer to what your eye expects. Both produce a #rrggbb result.
- What does the ratio control mean?
- The ratio is how much of Color B is in the mix. At 0% the result equals Color A, at 100% it equals Color B, and at 50% it is the even midpoint between them. You can drag the slider or type an exact percentage.
- Which color formats can I enter?
- Both inputs accept HEX in #rrggbb (six digits) or #rgb (three-digit shorthand) form. If either value is not a valid HEX color, an error message appears and no mix is shown until both are valid. The output is always a #rrggbb HEX value.
- Can I use the mixed color in a workspace chain?
- Yes. The result is exposed as an output port, so in a deftdeck workspace you can wire the mixed HEX straight into another tool, and it updates automatically whenever you change a color, the ratio, or the color space.
- Are my colors sent anywhere?
- No. All blending math runs locally in your browser, so your color values are never uploaded to a server. The tool works offline and keeps your palette private.
Related tools
Code to Image
Turn a code snippet into a polished, syntax-highlighted PNG card in your browser, with a theme, gradient or transparent background, and padding — no upload.
Color Contrast Checker
Check the WCAG contrast ratio between a foreground and background HEX color and see whether it passes AA and AAA for both normal and large text.
Color Shades Generator
Turn one base HEX color into a Tailwind-style 50-950 shade scale, mixing toward white and black, each step with a swatch and copyable HEX.
Colorblind Simulator
Upload an image and preview how it looks with protanopia, deuteranopia, tritanopia, or full color blindness, then download the simulated result.