🎨 Color Mixer: Blend Two Colors and Get the Hex Code

What is the Color Mixer?

Mixing colors on a screen is not the same as mixing paint. Paint is subtractive: pigments absorb light, so combining many of them drives the result toward a muddy brown or black. Screens are additive, working in the RGB model where each pixel emits red, green, and blue light. This tool blends in RGB space, which is the natural model for anything you will display digitally, and it matches how CSS, browsers, and most design tools mix by default.

The blend itself is a straight linear interpolation done one channel at a time. For each of the red, green, and blue channels, the result is the Color A value scaled by one minus the mix amount, plus the Color B value scaled by the mix amount, then rounded to a whole number from 0 to 255. With the ratio in the middle you get the exact halfway point between the two colors. Slide it toward one end and the result leans toward that color; at the extremes you get one of the original colors back unchanged.

Because the mix is a weighted average, the ratio is fully continuous. A 25 percent setting means the result is three parts Color A to one part Color B, which is exactly how you build a tint or a subtle wash. Repeating the blend at evenly spaced ratios (for example 0, 25, 50, 75, 100 percent) gives you the intermediate stops of a two-color gradient or a small palette ramp, so the mixer doubles as a quick way to generate a color scale by hand.

There is one honest caveat about pure RGB averaging. Standard hex and RGB values are gamma-encoded (sRGB) rather than linear light, and the human eye is more sensitive at the dark end of the range. As a result the numeric midpoint (128) only produces roughly 20 percent of full luminance, not 50 percent, so the middle of a blend between two vivid colors can look a touch darker or duller than a perfectly perceptual mix. Advanced tools sidestep this by converting to linear RGB or OKLab, blending there, and converting back. For everyday design work, palette steps, hover states, and tint or shade estimates, plain RGB mixing is fast, predictable, and more than accurate enough, and it is the behavior most other software produces too.

To lighten a color, mix it toward white; to darken it, mix it toward black; to desaturate or tone it down, mix it toward a neutral grey. Setting one input to a near-neutral and nudging the ratio is the simplest way to derive a whole family of tints and shades from a single brand color, all of which stay mathematically consistent with the original.

When to use it

• Finding a color halfway between two brand shades to use as an accent, border, or hover state.
• Creating tints and shades by mixing a base color with white or black at different ratios.
• Generating the intermediate steps of a two-color gradient or a small palette ramp by hand.
• Toning down a loud color by blending a small amount of neutral grey into it.
• Deriving a readable "muted" variant of a color for disabled buttons or secondary text.
• Checking what two colors average to before committing them to a design system.

How to use the Color Mixer

1. Set Color A using the swatch picker or by typing a hex code.
2. Set Color B the same way, or use white or black to make tints and shades.
3. Drag the mix ratio slider toward Color B to control the balance of the blend.
4. Read off the resulting hex and RGB value and check the live swatch.
5. Press Copy hex to paste the mixed color into your CSS or design tool.

Formula & method

Worked examples

Mixing red (#FF0000) toward blue (#0000FF) at different ratios

Common two-color blends at a 50% ratio

Building tints and shades of blue (#0066CC)

Common mistakes to avoid

• Expecting screen mixing to match paint. Mixing blue and yellow light on a screen gives a grey, not green, because screens add light rather than subtract pigment. If you are trying to reproduce a physical paint result, RGB mixing will not match it.
• Assuming the midpoint looks like the visual average. A plain RGB midpoint can appear slightly darker or duller than expected because the values are gamma-encoded (sRGB). The number is correct, but trust your eye for fine palette work and nudge the ratio if needed.
• Typing an invalid hex code. A hex color needs exactly three or six hex digits (0 to 9 and A to F), optionally with a leading hash. Something like #12 or #GGGGGG will not parse, so the result will not update.
• Forgetting the ratio direction. The slider measures how much of Color B is in the mix. At 0% you get Color A, at 100% you get Color B. Sliding the wrong way gives you the opposite balance of what you intended.
• Using pure black or white to tint when you wanted a warmer result. Mixing toward pure white or black shifts lightness but can flatten a color. For a warmer tint, mix toward a warm off-white; for a richer shade, mix toward a very dark version of the same hue instead of black.

Glossary

Hex code

A six-digit color value written as a hash followed by red, green, and blue pairs in base 16, such as #FF8000.

RGB

The additive color model used by screens, describing a color by its red, green, and blue components, each from 0 to 255.

Linear interpolation

Blending two values in a straight proportion; here, mixing each color channel by the chosen ratio.

Mix ratio

The fraction of Color B in the blend, from 0 (all Color A) to 100 percent (all Color B).

Tint

A lighter version of a color, made by mixing it with white.

Shade

A darker version of a color, made by mixing it with black.

Additive mixing

Combining colored light so channels add together, the model screens use; red plus green light gives yellow.

Gamma (sRGB) encoding

The non-linear way hex and RGB values map to light, which is why a numeric midpoint can look darker than the true perceptual average.

Frequently asked questions

Sources

• W3Schools: HTML Color Mixer ,
• LearnOpenGL: Gamma Correction ,