Color Mixer
Mix two colors together with an adjustable blending ratio to calculate interpolated, multiply, and screen color codes.
Run tool
This online color mixer blends two distinct color values using an adjustable mixing ratio. Enter your starting tones as hash-prefixed hexadecimal strings, such as three-digit or six-digit hex codes, or standard RGB syntax with non-negative integer channels. The mixing balance accepts numeric values from zero to one, where zero represents pure first color, one produces pure second color, and values in between blend each channel proportionally. When you process your inputs, the tool calculates the interpolated mixed shade and outputs the result in both six-digit lowercase hexadecimal and RGB notation. Along with the standard linear mix, the tool provides computed color codes for multiply and screen blend calculations. Channel values are rounded to the nearest integer and constrained within the valid display range. If you omit values, the tool starts with red and blue at an even midpoint balance, allowing fast experimentation for digital palettes, UI styling, and graphic design assets.
Instructions
- Enter the first color as a hex code like #ff0000 or an RGB value like rgb(255, 0, 0).
- Enter the second color using hex or RGB syntax.
- Set the blend ratio between 0.0 and 1.0, where 0.5 represents an equal midpoint.
- Run the tool to view the interpolated color, RGB values, and alternate blend variations.
Examples
- Mixing red (#ff0000) and blue (#0000ff) at a ratio of 0.5 produces the purple hex code #800080 and rgb(128, 0, 128), with multiply code #000000 and screen code #ff00ff.
- Blending dark green rgb(0, 100, 0) and pure yellow #ffff00 with a ratio of 0.25 leans toward green, producing #408b40 alongside calculated multiply and screen variants.
FAQ
What color formats can I enter into the mixer?
You can enter hash-prefixed hexadecimal strings, such as #f00 or #ff0000, as well as text formatted with an rgb pattern containing three non-negative integer channels, like rgb(255, 128, 0).
How does the blend ratio change the output?
A ratio of 0 produces the first color completely, a ratio of 1 outputs the second color, and 0.5 creates an even split. Values in between shift the channel proportions smoothly from the first tone toward the second.
What happens if an invalid color format is entered?
If an input cannot be recognized as a valid hex or RGB value, the tool returns an error message indicating that the color could not be parsed.
What blend variations are calculated alongside the mix?
In addition to the standard linear interpolation, the tool calculates multiply and screen blend modes, providing six-digit hexadecimal codes for both.