ProToolBox

Blend two HEX colors with one slider

Set A and B, drag mix balance, and read the in-between swatch with HEX, rgb(), and hsl(). Tap Copy color results for notes or CSS. No signup—runs in your browser.

Blend two colors

Slide Mix balance to sample shades between two HEX codes—good for UI fills, gradients, or quick brand midpoints (straight RGB blend).

1 Set A & B · 2 Drag mix · 3 Read panel · 4 Copy color results

Your result

Starts red + blue at 50/50. Try #FF0000 + #FFFF00 for orange. Using the mix behind text? Check contrast.

50% color A + 50% color B (linear RGB)

Updates as you drag.

Move the slider—HEX, rgb(), and hsl() refresh below.

Next: Contrast · Palette · Gradient · All design tools · All tools

  • Runs in your browser—nothing uploads
  • Free, no account
  • HEX values stay on your device

When to use it

When you need a midpoint between two brand HEX codes without jumping into a design app.

  • Hover or pressed states between two solids
  • Quick gradient stop ideas (then refine in CSS)
  • Pasting mixed values into tickets or tokens

Linear RGB is predictable for handoff—not the same as “looks halfway” to every eye.

Bookmark when you tune ramps—midpoints stay one slider away.

Overview

We blend each red, green, and blue channel between A and B in sRGB. At 50% you get equal parts on every channel—handy for engineering-style mixes; use HSL tools if you need perceptual steps.

How to use it

  1. Set A and B with the pickers or HEX boxes.
  2. Drag Mix balance—left is more A, right is more B.
  3. Read mixed HEX, rgb(), and hsl() in the panel.
  4. Tap Copy color results for Slack, Notion, or CSS notes.

Privacy: Mixing stays in your browser—we never see your HEX.

FAQ

  • Why linear RGB? Simple channel math—easy to explain to devs.
  • Does 50% look halfway? Not always; eyes aren’t linear. Use HSL when steps must feel even.
  • Phone? Yes—sliders and pickers work when stacked.

Save the page for the next theme or client palette.

Tools in this category