Color Mixer
Pick two colors, slide the ratio and see the mixed color instantly with its HEX, RGB, HSL and OKLCH codes. Compare perceptual mixing with classic blend modes and grab every in-between step.
Steps from A to B
Click a step to use that ratio, or its code to copy it.
How to use the Color Mixer
- Choose color A and color B with the pickers or type HEX codes.
- Pick a mixing method: OKLab for smooth, natural-looking mixes, sRGB to match most design tools, or a blend mode.
- Move the slider to set how much of color B goes into the mix.
- Press Mix colors (the result also updates live) and click any code to copy it.
- Use the steps row to see the whole gradient between A and B and copy every step.
Mixing formulas
With t as the share of color B (0 to 1) and channel values from 0 to 255:
| Method | Formula | #ff0000 + #0000ff at 50% |
|---|---|---|
| sRGB | C = A + (B − A) × t on the stored values | #800080 |
| Linear RGB | Decode sRGB gamma, mix, encode again | #bc00bc |
| OKLab | Mix L, a and b in the OKLab perceptual space | #8c53a2 |
| OKLCH | Mix lightness and chroma, rotate hue the short way | #b200b8 |
| HSL | Mix hue (short way), saturation and lightness | #ff00ff |
The differences are biggest for complementary or very different colors. For two similar colors, every method gives nearly the same result.
Blend mode formulas
For blend modes the values are scaled to 0–1, B is the top layer and the slider is B's opacity: result = A + (blend(A, B) − A) × opacity.
- Multiply: A × B. Example: #ff8000 × #808080 = #804000.
- Screen: 1 − (1 − A)(1 − B). Example: #ff8000 screen #808080 = #ffc080.
- Overlay: 2AB if A ≤ 0.5, otherwise 1 − 2(1 − A)(1 − B).
- Darken / Lighten: min(A, B) / max(A, B) per channel.
- Color dodge / burn: A ÷ (1 − B) and 1 − (1 − A) ÷ B, clipped to 0–1.
- Difference / Exclusion: |A − B| and A + B − 2AB.
Tips
- Need a hover or pressed shade? Mix your color with black (#000000) at 10–20% for darker states and with white at 10–20% for lighter tints.
- Building a gradient? Copy the steps generated in OKLab or OKLCH to avoid the gray "dead zone" that sRGB gradients get between complementary colors.
- Matching a design file? Use sRGB mixing and the blend modes, which follow the same formulas as Figma, Photoshop and CSS.
Frequently asked questions
What color do red and blue make?
It depends on how you mix. Averaging the sRGB numbers of #ff0000 and #0000ff gives #800080, a dark purple. Mixing in linear light gives a brighter #bc00bc, and OKLab gives #8c53a2, a soft violet that looks halfway between the two. Paint behaves differently again, because pigments absorb light.
Which mixing method should I use?
OKLab is the best general choice: the steps look evenly spaced and the middle does not turn muddy or too dark. Use sRGB if you need to match Photoshop layers, CSS opacity or most design tools, and linear RGB to simulate mixing colored lights.
Is this the same as mixing paint?
No. Screens mix light additively, while paint mixes subtractively. Blue and yellow light make gray or white, but blue and yellow paint make green. The multiply blend mode is the closest digital stand-in for layering transparent inks.
How do blend modes work here?
Color B is treated as a layer on top of color A, and the slider sets B's opacity. Each channel is combined with the W3C compositing formulas, for example multiply = A × B and screen = A + B − A × B, using values from 0 to 1.
Can I use the result in CSS?
Yes. Copy the HEX or RGB code, or use the generated color-mix() expression, which modern browsers support in srgb, srgb-linear, oklab, oklch and hsl.
How is the halfway sRGB color calculated?
Each channel is averaged: for #ff8800 and #0088ff the red channel is (255 + 0) ÷ 2 = 127.5, rounded to 128 (hex 80), green is 136 (88) and blue is 128 (80), giving #808880.