Color Mixer

How to use it

1. Set Color A as the base and Color B as the blend color. Both fields accept #abc, #aabbcc, rgb(12, 34, 56) and hsl(210 50% 40%), and the color picker stays in sync with the text you type.
2. Choose a Blend mode: normal, multiply, screen, overlay or difference. Each mode is computed per channel on the raw RGB values.
3. Drag Blend ratio. At 0% you see color A untouched; at 100% you see the full blend. Anything in between interpolates between the two.
4. Read the result in the swatch, then copy the HEX, RGB or HSL value, or the whole CSS block. Use Swap to reverse the two colors without retyping them.

Common use cases

• Building a hover or pressed state - darken a brand color with multiply at a low ratio instead of guessing a second hex by hand.
• Checking contrast against a tinted background - mix the surface color with the overlay, then compare the result with your text color.
• Making a gradient stop - pick two endpoints and take the midpoint at 50%.
• Translating between notations - type a value in one notation and read the same color in the other two.

Why it stays private

All color math runs in your browser. Nothing is uploaded, so brand palettes and design tokens you paste stay on your device.

FAQ

Q: Why does the result differ from what my design tool shows? A: Blend modes are computed on sRGB channel values here, without color management or alpha compositing. Tools that work in a different color space or blend against a layered backdrop can produce a slightly different value.

Q: Can I mix more than two colors? A: Not in one pass. Mix two, copy the resulting hex, then paste it back as color A and mix with the next color.

Q: Does the ratio accept values other than whole percent? A: The slider steps by one percent, which is precise enough for picking colors by eye. The CSS output records the exact ratio you used so you can reproduce it later.