Blend any two colors at your chosen ratio — instantly.
Quick Presets
Color Inputs
Mixed Color
How mixing works: Each RGB channel is linearly interpolated independently. At 50/50, each channel is averaged. The result is identical to what CSS color-mix() produces in the sRGB color space.
The Color Mixer lets you blend any two colors at a precise ratio and instantly see the result. Enter hex codes or use the color picker, drag the mix slider, and get the output in HEX, RGB, and HSL formats — ready to copy straight into your CSS or design tool. Perfect for designers, developers, and anyone working with color palettes.
Each RGB channel (red, green, blue) is linearly interpolated between the two input colors at the chosen ratio. This is the same method CSS color-mix() uses in the sRGB color space, producing smooth, accurate in-between shades.
Yes. Drag the mix ratio slider anywhere from 0% to 100%, or click the quick-ratio buttons (25:75, 50:50, 75:25, etc.). A ratio of 0% gives you pure Color A, and 100% gives you pure Color B.
The mixed color is shown in HEX (#RRGGBB), RGB (rgb(r, g, b)), and HSL (hsl(h, s%, l%)) formats. A copy button lets you grab all three values at once.
No. The Color Mixer runs entirely in your browser with no downloads, sign-ups, or software required. It works on any modern device.