Mixing two colors
Interpolates directly between two specific colors you choose. The result depends on the starting colors and the ratio: ideal when you already have two fixed colors and need the midpoint.
Color Mixer
Blend two colors and adjust the ratio to get the perfect in-between tone.
#
#
50%
Color A 50% · Color B 50%
background: linear-gradient(90deg, #E65817 0%, #7F7F80 50%, #17A6E8 100%); /* from #E65817 → #7F7F80 @ 50% → #17A6E8 */
Color Conversion
What mixing two colors is for
The color mixer blends two colors in the ratio you choose and calculates the exact resulting tone, while also generating the CSS gradient between them automatically. It is different from exploring harmonies from a single base color, that is what the color wheel does, because here you start from two defined colors and look for the midpoint, or the gradient that connects them.
It is especially useful in three common situations: finding a transition tone between two brand colors that do not combine well directly, generating a ready-to-copy background: linear-gradient() in CSS without calculating percentages by hand, or simply experimenting with color blends without trial and error in a graphic editor.
How to use the tool
Pick Color A and Color B with the eyedropper, a code, or the swap icon to invert them. Adjust the ratio with the slider to decide how much weight each color has in the mix, from 0% (all Color A) to 100% (all Color B). The tool calculates the result in real time, showing the intermediate tone in Hex, RGB, HSL and OKLCH, and generates the full CSS gradient code, ready to copy and paste into your stylesheet.
The difference between mixing and generating harmonies
Generating harmonies
Calculated mathematically from one color’s position on the color wheel (analogous, complementary, triadic…). It builds a full palette, not an intermediate tone between two given colors.
Frequently asked questions
The tool linearly interpolates between the two chosen colors according to the ratio you set, calculating the intermediate value in each color channel.
Yes. Besides the exact intermediate color, the tool automatically generates the full linear-gradient() code between both colors, ready to copy into your CSS.
The color wheel calculates related colors from a single base color using color-theory rules. The mixer combines two specific colors you choose and calculates the midpoint between them, not a full palette.
Yes. The swap icon exchanges Color A and Color B, and vice versa, while keeping the ratio, useful for viewing the gradient in the opposite direction.
Set the slider to 50%. The tool will calculate the exact midpoint between both colors at that percentage.
Yes. The result is shown simultaneously in Hex, RGB, HSL and OKLCH, and you can copy any of them with one click.