The slider is the amount of B
At 0% the result is exactly Color A; at 100% it is Color B. At 50% both contribute equally within the selected mixing model.
ONELESS / COLOR
Color Mixer
Two colors can meet at many points between their endpoints. Color Mixer puts both sources and the result in view while you choose how much of the second color to add. Switch between encoded sRGB and linear sRGB to understand why a simple channel average and an average of light can produce different middles.
Open Color Mixer. JavaScript powers the workspace; the full guide is available below.
UNDERSTAND THE RESULT
Color, with a little context.
Two clearly named spaces
sRGB averages the stored channel values. Linear sRGB removes the transfer curve, averages linear light values, then encodes the result again. Neither option simulates subtractive paint or ink.
Swap preserves the mixture
Swapping exchanges A and B and replaces the B amount with its complement. A 25% B mix becomes 75% B after the inputs exchange places, preserving the same result.
HOW TO USE IT
From a starting point to a usable result.
- Enter two opaque 3- or 6-digit HEX colors.
- Set Amount of B from 0 to 100 percent. Choose sRGB or Linear sRGB and compare the visible result.
- Copy HEX to export the rounded 8-bit result. Use Swap to reverse the source order or Reset to return to the sample.
A WORKED EXAMPLE
The middle of black and white
At equal amounts, encoded sRGB produces #808080. Linear sRGB produces #BCBCBC because half the light is brighter than the midpoint of the encoded channel numbers.
EVERYDAY USES
Make the next small decision easier.
Find an intermediate token
Mix two existing tokens at a documented ratio and copy a third value for a draft design.
Understand a transition
Compare mixing spaces before choosing a midpoint for a transition or illustration. Test the exported color in its actual context.
LOCAL WORKSPACE
Your work stays in this browser.
The tool processes color values locally. It does not upload the input to a processing server or save it in browser storage. Leaving or reloading the page clears the working state. Copying places the selected result on your clipboard; sharing sends only the page address without your working values.
These tools describe sRGB colors. Browser decoding, color management and the display can affect what you see; they are not an ICC proofing workflow or a print-color guarantee. Read the site privacy policy for information about the surrounding website.
KEEP IT NEARBY
One less search next time.
Press Ctrl + D on Windows or Command + D on Mac to bookmark this page. Your browser may also offer Create shortcut or Add to Home Screen. Shortcuts open the tool; they do not include your colors or images.
Choose a shortcut icon
Soft Coral
Warm Peach
Sunset Orange
OneLess Blue
Rose PinkQUESTIONS, ANSWERED
A few useful details.
Will yellow and blue behave like paint?
No. These models mix digital RGB values and light, not pigments.
Does mixing preserve transparency?
This tool accepts opaque HEX only. It avoids silently choosing an alpha-compositing rule.
Why does switching space change the result?
Encoded sRGB channels are nonlinear with respect to light. The linear option decodes that curve before averaging.
Why is a result rounded?
The final HEX stores whole 8-bit channels. Calculations keep precision until the final conversion, then round to the nearest byte.
What do 0%, 50% and 100% mean on the mix control?
The percentage is the contribution of color B. At 0% you get A, at 100% B, and at 50% an equal mixture in the selected mixing space.
Does swapping A and B change the mixture?
Swap also complements the mixing percentage so the same blend is preserved. It changes which color is considered A or B.
Can I copy the mixed color for another tool?
Yes. Copy the resulting value and use it as a new base in Color Picker, a palette tool or a contrast checker. The original inputs remain separate from the result.
REFERENCES
ANOTHER SMALL STEP
Keep the next tool close.
Ready for a little more color?
Find the point where two colors meet.
Return to Color Mixer ↑