Color Mixer

A color mixer blends two colors into a new one and shows you the result in HEX, RGB, and HSL. You give it a first color and a second color in any common syntax (a hex code like #4466EE, an rgb() or hsl() value, or a CSS name like coral), choose how much of the second color to fold in, and it computes the mixed color instantly. It also builds a gradient of intermediate steps between the two colors, so you can see the whole transition rather than a single midpoint.

The gradient strip doubles as a color mixer chart. Enter #FF0000 and #0000FF, set Gradient steps to 3 and press Mix Colors: the strip shows five swatches, #FF0000, #BF0040, #800080, #4000BF and #0000FF, and the mixed result at a 50% ratio is #800080. As a primary color mixer it mixes light, not paint. Red and yellow give orange #FF8000, but blue and yellow give gray #808080 rather than the green a paint box would give. There is no color wheel mixer view, only the two colors you enter and the steps between them.

The straightforward mix is a weighted average: at a 50 percent ratio each color contributes equally, and the tool interpolates each red, green, and blue channel linearly between the two inputs. Slide the ratio toward 0 and you keep the first color; slide it toward 100 and you land on the second. This is the same math CSS uses for a two-stop gradient, which is why the midpoint of a red-to-blue gradient is the purple this tool reports.

Beyond a plain blend, the mixer offers six separable blend modes defined in the W3C Compositing and Blending specification (multiply, screen, overlay, darken, lighten and difference) plus a simple average. These are the same operations that image editors like Photoshop and GIMP apply between layers. Multiply always darkens (red times blue is black), screen always lightens (red on blue is magenta), and difference gives you the channel-by-channel distance between two colors. The ratio then acts like layer opacity, controlling how strongly the blended result is applied over the first color.

Everything runs client-side in your browser. The colors you enter never leave the tab, and because the color math is plain arithmetic, the tool works offline once the page has loaded. Designers reach for a mixer to find a color halfway between a brand primary and a neutral, to build tint and accent scales, or to preview how two layers will combine before committing in a design file. Developers use it to generate gradient stops, compute hover states, and translate a mixed result straight into a HEX or HSL value they can paste into CSS.