Color mixing 101 for UI (without the muddy middle)
Blend two paints on a palette and you get mud. Blend two hex codes in software and you can get the same — unless you know what the mixer is actually doing.
Overlays, disabled states, and “slightly tinted surface” often come from mixing a brand color with white or black. Do it in the wrong space and you get dusty purple instead of a clean tint.
Start with a purpose
Are you making a hover state, a glass panel, or a chart fill? Hover usually wants the same hue, different lightness. Glass wants low chroma. Name the job before you drag sliders.
Use a mixer you can trust
The color mixer on ChromaXP shows the result as you blend — copy HEX when it looks right, then verify contrast if text sits on top. For systematic tints, the tint and shade generator beats one-off mixes.
Opacity is mixing too
rgba() over a surface is real mixing — the background matters. Check contrast on the combined result, not on the semi-transparent layer alone.