Color Mixer Guide
How to blend two colors precisely — with a live ratio slider, full RGB interpolation and visual feedback.
What Is Color Mixing?
Color mixing is the process of blending two colors to produce a new color. On screens, mixing happens in RGB color space — each of the three channels (red, green, blue) is interpolated independently.
Mixing 50% red (#FF0000) and 50% blue (#0000FF) produces purple (#800080).
The Math of Color Mixing
To mix two colors at ratio t (0 = color 1, 1 = color 2):
Mixed R = R1 × (1 - t) + R2 × t
Mixed G = G1 × (1 - t) + G2 × t
Mixed B = B1 × (1 - t) + B2 × t
Each channel is rounded to nearest integer (0-255)Example: mixing #FF0000 and #0000FF at 50%
R = 255 × 0.5 + 0 × 0.5 = 127.5 → 128
G = 0 × 0.5 + 0 × 0.5 = 0
B = 0 × 0.5 + 255 × 0.5 = 127.5 → 128
Result: rgb(128, 0, 128) = #800080 (purple)How to Use the Color Mixer
- Enter two HEX colors — Color 1 and Color 2
- Adjust the mix ratio slider (0-100%)
- The mixed color appears in the swatch and value fields
- Below the result, see the interpolation strip — 10 intermediate steps
- Click any step to copy its HEX
Ratio Interpretation
- 0%: Pure Color 1
- 25%: Mostly Color 1, hint of Color 2
- 50%: Equal mix (midpoint)
- 75%: Mostly Color 2
- 100%: Pure Color 2
Uses of Color Mixing
Finding intermediate colors
Between two brand colors, what color sits at the midpoint? Mix them to find out. Useful for extended palettes and gradient stops.
Smoothing transitions
CSS animations and transitions benefit from intermediate colors. Mixing two colors produces natural midpoints that look smooth.
Blending for accessibility
If a text color is too dark or too light, blend it with a nearby color to find an accessible middle value.
Testing color relationships
Understanding what two colors produce when mixed helps you understand their relationship — for example, whether they are complementary (resulting in neutral gray) or analogous (resulting in intermediate hue).
Color gradients
For smooth CSS gradients, mixing colors generates intermediate stops. The mixed colors between brand color and background color are the ones you see in a gradient.
RGB vs Other Mixing Models
Different color models mix differently:
- RGB: Additive light mixing — what OmniColor uses
- CMYK / RYB: Subtractive pigment mixing — what paint uses
- HSL: Mixing in hue-space — not directly supported by this tool but often useful
Mixing red and blue gives purple in RGB. In RYB (traditional painter's color wheel), red and blue give violet. In CMYK, mixing magenta and cyan produces a similar violet.
Best Practices
Test accessibility
Mixed colors may not pass WCAG contrast. Test the mix against any background it will be used on.
Use RGB mixing for screens
RGB mixing matches how screens blend colors. For print, use CMYK mixing instead.
Interpolate through the shortest path
Some tools interpolate through the color wheel to produce more natural transitions (for example, blending red and blue through magenta instead of through gray). OmniColor uses simple RGB interpolation.
Mind the gamut
Very saturated colors mixed together may produce colors outside the visible gamut on some displays. Test on target devices.
Common Mistakes
Expecting intuitive mixes
RGB mixing does not always produce colors that feel "intuitive." Mixing yellow and blue in RGB produces gray, not green. Mixing them in traditional pigment produces green. This is because RGB is additive light, not subtractive pigment.
Not testing accessibility
Mixed colors often fail contrast when used as text. Test with a contrast checker.
Using pure interpolation for gradients
Simple two-color interpolation produces an intermediate color that may look muddy. For smoother gradients, add intermediate stops manually.