Skip to content

Blend · RGB interpolation

Color mixer

Linear mix in RGB between two picks — the same thing a lot of graphics apps do when you drag a midpoint on a gradient without the gradient. Useful when you want “50% between these two brand colors” without debating color spaces at midnight.

50%

Why RGB mixing exists here

Perceptually smooth blends live in other spaces. This tool exposes literal channel interpolation so you can match Sass mix(), old crossfade tricks, or “split the difference between these two brand blues” without pretending it is perceptually uniform.

How to use it

  1. Pick color A and color B with the native inputs.
  2. Drag the ratio slider — watch the preview swatch update in real time.
  3. Copy HEX from the output when the midpoint looks right for hover or divider lines.
  4. Re-check contrast if either endpoint barely passed — mixed colors are new colors.

Use gradients or ramps when…

You need multi-stop transitions or token-quality spacing. Try the gradient generator or CSS variables tool instead of a single midpoint.

When we reach for this

  • Hover states between two flat brand colors.
  • Quick “split the difference” in a Slack thread.
  • Teaching why screen-space mixes differ from OKLCH ramps.

Related tools

Pick endpoints, check contrast, export CSS.

Color picker Dial A and B with numeric precision before mixing. Contrast checker Validate mixed fills against your text color. Gradient generator Multi-stop CSS when a single midpoint is not enough.

FAQ

Is this the same as lightening in HSL?

No — HSL lightness changes hue perception differently. RGB mix is literally channel math; faster, less subtle.

Can I paste HEX manually?

Use the color inputs or type into the output after picking — the tool is small on purpose; heavy editing belongs in your IDE.

Does it support alpha?

Not here — opaque stops only. Transparency mixes need a different pipeline.

Is 50% always the right hover color?

Midway RGB is a quick default, not a contrast guarantee. After you pick a blend, paste both endpoints into the contrast checker against your text color — especially for small targets.