AZ Tools

Color Mixer

Color

Pick two colors and a mix ratio (0–100%). The tool interpolates between them in your chosen color space — RGB for the simplest math, HSL for hue-preserving blends, or CIELAB for perceptually uniform transitions — and shows the result plus an 11-step gradient strip. Useful for picking midpoint accent colors, generating color stops for gradients, or seeing why two colors look muddy in the middle (usually because their RGB midpoint isn't perceptually halfway).

—

Result

#8033B3

11-step blend

0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

LAB gives the most perceptually even gradient. RGB and HSL are faster but may look uneven in the middle.

How to use

  1. Set color A and color B (hex or color picker).
  2. Choose RGB, HSL, or LAB blending.
  3. Slide the ratio or read off the 11-step strip.

Frequently asked questions

Why do RGB blends look muddy in the middle?
RGB averages the channel values directly. Going from saturated red to saturated blue passes through a low-saturation purplish-gray midpoint because the green channel stays at 0. Try HSL or LAB to keep saturation higher in the middle.
When should I use LAB?
LAB is perceptually uniform — equal numerical steps look like equal perceptual steps. Best for gradient design when smoothness matters. CSS `color-mix(in lab, …)` does the same thing in modern browsers.
What happens to hue with HSL when the two colors are opposite?
HSL takes the shorter arc around the color wheel. Mixing red (0°) and cyan (180°) is ambiguous — the tool picks one direction; if the result surprises you, try LAB instead.
Why is my 50% mix not exactly halfway visually?
Only LAB will give you a perceptually halfway result. RGB and HSL halfway points are mathematically halfway, which is often perceptually closer to the darker of the two endpoints.

Related tools

Color Blindness Simulator

See how your image looks to people with each of 8 types of color vision deficiency (CVD).

Color00

CSS Box Shadow Generator

Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.

Color00

Color Format Converter

Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.

Color00

CSS Gradient Generator

Build linear or radial CSS gradients with multi-stop colors and copy the code.

Color00

Color Palette Generator

Build harmonious color palettes from a base color in six schemes.

Color00

Color Contrast Checker

Check text/background contrast against WCAG AA and AAA levels.

Color00