DocomintColor Mixer
Blend two colors together at any ratio and see the resulting hex, RGB, and HSL values.
Averages two colors' RGB channels at whatever ratio you choose — 50/50 for an even blend, or skewed toward one side for a subtler nudge. Useful for finding a transitional color between two brand hues, or previewing what an overlay tint does to a background before committing it to CSS.
Example: Mixing indigo (#4f46e5) and pink (#ec4899) 50/50 lands on a muted purple around #9d719c — sliding the ratio to 75% toward the pink shifts the result noticeably warmer.
How it works
- Pick Color A and Color B
- Drag the ratio slider toward whichever should dominate
- The blended result updates live, computed on your device
Frequently asked questions
Is this the same as CSS's color-mix() function?
Conceptually yes — both blend two colors at a ratio — but CSS's color-mix() runs live in the browser and can mix in several color spaces (srgb, oklch, and others). This tool always mixes in plain RGB space and gives you a static hex result to copy, which is simpler when you just need one fixed color rather than a dynamic CSS expression.
Why doesn't my mixed color look like mixing paint?
This averages RGB light values (additive mixing), while physical paint mixes pigments (subtractive mixing) — the two follow different rules, which is why mixing digital "paint-bucket" blue and yellow here won't necessarily produce the green you'd expect from a paint palette.
Is my color values uploaded anywhere?
No — Color Mixer runs entirely in your browser using JavaScript/WebAssembly. Your color values is never sent to a server.