Color Mixer
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
LAB gives the most perceptually even gradient. RGB and HSL are faster but may look uneven in the middle.
How to use
- Set color A and color B (hex or color picker).
- Choose RGB, HSL, or LAB blending.
- 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
CSS color-mix() Preview (Interpolation Space Comparison)
Compare how the modern CSS color-mix() function blends two colors in different interpolation spaces (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) — live swatches, computed hex, full gradient strip per space, and copyable CSS for each.
Color Brightness Compare (HSL vs Lab L* vs WCAG vs HSP)
Compare seven different brightness metrics — HSL Lightness, HSV Value, WCAG Relative Luminance / LRV, CIE Lab L* perceived lightness, Rec. 709 Luma, HSP Perceived Brightness, and naïve (R+G+B)/3 — for one or two colors side by side, with deltas to show why a 'lighter' color can actually feel darker.
CMYK ↔ RGB Color Converter (Print Color Space)
Convert between RGB / hex screen colors and CMYK percentages for print, with simple, GCR (Gray Component Replacement) and UCR (Under Color Removal) black-generation strategies, channel separation preview, and a total ink coverage readout.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Lerp / Gradient Steps
Pick two hex colors, get N discrete intermediate steps — in sRGB, linear RGB, OKLab or HSL — with optional easing.
Conic Gradient Generator
Visual builder for CSS `conic-gradient()` — rotate angle, center position, color stops, shape preview. Useful for pie charts, ring charts, checkered patterns, color wheels.