Color Mixer

Mix two colors with any blend ratio. See the result in HEX, RGB, and HSL formats with a live preview. Free online color mixer.

Mixed Color
HEX
#A855A4
RGB
HSL

How It Works

  1. Pick your first color using the color picker or type a HEX code into the input field.
  2. Choose the second color the same way.
  3. Drag the blend ratio slider to set the mix — try 50% for an even blend or adjust for more of one color.
  4. Watch the mixed color appear instantly in the live preview alongside HEX, RGB, and HSL values.
  5. Copy the color code you need and paste it straight into your design tool or code editor.

Example

Input: Color 1: #FF0000 (red), Color 2: #0000FF (blue), blend ratio 50/50
Result: HEX: #800080 | RGB(128, 0, 128) | HSL(300°, 100%, 25%)

FAQ

The tool linearly interpolates the RGB values of both colors based on the chosen blend ratio. At 50/50, each channel value is the average of the two input values, giving you a perfectly balanced mix.

Absolutely. All processing happens entirely client-side in your browser. No data is ever sent to any server, so your colors and inputs remain completely private.

You can enter colors as HEX codes or select them visually with the color picker. The result is always displayed in HEX, RGB, and HSL formats simultaneously.

Yes, the Color Mixer is 100% free with no sign-up or subscription required.

Digital mixing uses the additive RGB color model, while physical paints use a subtractive model. This means that mixing red and blue digitally gives purple, which may differ from what you see when mixing actual paints.