Color Mixer
Blend two colors at any ratio in both RGB and HSL color space.
Pick two colors and a mix ratio to produce a blended color. The tool shows the result computed in both RGB (linear interpolation in screen space) and HSL (interpolation along the shortest hue path) so you can compare how each model behaves.
Common use cases
- Generate accent colors halfway between brand primary and secondary
- Build hover states by mixing a button color with white or black
- Create palette transitions between two existing tokens
- Compare RGB vs HSL mixing to choose the better-looking result
Frequently asked questions
Why do RGB and HSL mixes look different?▾
RGB mixing interpolates each channel linearly which often passes through grey. HSL interpolates hue, saturation and lightness independently and usually keeps colors more vivid.
Which mix should I use?▾
HSL is usually better for design palettes because it preserves perceived saturation. RGB is better when you need an exact average of two specific screen pixels.
Does it support alpha mixing?▾
Not directly — both inputs are treated as opaque. To mix transparency, layer the result with an alpha value in your CSS.
Related tools
🎨
Color Picker (HEX/RGB/HSL)
Pick a color and copy it as HEX, RGB, HSL or HSV.
🌈
CSS Gradient Generator
Build linear and radial CSS gradients with live preview.
🎨
Color Palette Generator
Generate harmonious color schemes from a base color.
👁
WCAG Contrast Checker
Check color contrast ratios against WCAG AA/AAA accessibility levels.