Color Mixer
Blend two colors and adjust the mix ratio.
Ad
+
HEX
#804595
RGB
rgb(128, 69, 149)
HSL
hsl(284, 37%, 43%)
Ad
Frequently Asked Questions
What is the difference between RGB and HSL color mixing? +
RGB mixing interpolates each red, green, and blue channel linearly, which can produce muddy midtones when mixing complementary colors. HSL mixing interpolates hue, saturation, and lightness separately, often producing more visually pleasing results by traveling around the color wheel rather than through gray.
Why does mixing blue and yellow in RGB not produce green? +
RGB is an additive color model (light-based), not subtractive (paint-based). Mixing blue (#0000FF) and yellow (#FFFF00) in RGB produces gray (#808080) because the channels average out. In paint, blue and yellow make green through subtractive mixing. Use HSL mixing mode for results closer to what you'd expect from paint mixing.
How does the CSS color-mix() function compare to this tool? +
The CSS color-mix() function works similarly, blending two colors by a given percentage. It supports multiple color spaces including srgb, hsl, lch, and oklch. This tool previews the result visually so you can find the right blend before writing the CSS. The generated values can be used directly in your stylesheets.
Ad