Hex Color Mixer: Blend Two Colors and Get the Code

Enter two hex colors and set the mix percentage. You get the blended color as hex, RGB and HSL, plus an evenly spaced scale of the colors in between.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Mixed colour (50%)

#a45d7e

Blend scale

13%

25%

38%

50%

63%

75%

88%

100%

Values

Mixed HEX: #a45d7e
Mixed RGB: rgb(164, 93, 126)
Mixed HSL: hsl(332, 28%, 50%)
From: #4f46e5
To: #f97316
Readable text: White

CSS gradient between them

.element {
  background: linear-gradient(90deg, #4f46e5, #f97316);
}

Quick answers

How do I find the color between two hex colors?: Enter both hex codes and leave Mix at 50%. The tool averages the red, green and blue values of the two colors and returns the midpoint. For #4f46e5 and #f97316 the color halfway between is #a45d7e.
What color do red and blue make?: Purple. Mixing pure red #ff0000 and pure blue #0000ff in equal parts gives #800080, which is the standard web color named purple. At 25% toward blue the mix is the crimson #bf0040 and at 75% it is the violet #4000bf.
What color do blue and yellow make?: On a screen, gray. Equal parts of pure blue #0000ff and pure yellow #ffff00 average out to #808080, because the two are opposites in RGB. Green from blue and yellow happens with paint or ink, which absorb light and follow different rules.
What color do red and green make?: Mixing pure red #ff0000 and pure green #00ff00 at 50% gives #808000, a dark yellow known as olive. Two full strength red and green lights added together make bright yellow, but an even blend halves each one, so the result is a dimmer yellow.
How do I make a color lighter or darker by mixing?: Mix it with white #ffffff for a lighter tint or with black #000000 for a darker shade, and use the Mix slider to set how far to go. #4f46e5 mixed 10% toward white is #6159e8, and mixed 20% toward black it is #3f38b7.
Is mixing colors on screen the same as mixing paint?: No. Screens add light, and this tool averages RGB values. Paint and ink subtract light, so pigments combine differently and usually come out darker. Red with yellow or with white behaves much as you would expect, but opposite colors go to gray here instead of brown or green.

About Color Mixer

This hex color mixer blends two colors the way a screen does: it takes the red, green and blue values of each color and moves each one the same percentage of the way from the first color to the second. At 50% the result is the exact midpoint, so red #ff0000 and blue #0000ff give purple #800080. Drag the Mix slider to weight the blend toward either color, and set Steps to show to get between 3 and 15 evenly spaced colors from one to the other. Because this is light mixing and not paint mixing, some answers differ from the art room: blue and yellow give gray #808080 here, not green.

Color mixing chart: what two colors make at 50%

Each result is the tool's output for the two hex codes with Mix at 50%.

First color	Second color	50% mix	Looks like
Red #ff0000	Blue #0000ff	#800080	Purple
Red #ff0000	Yellow #ffff00	#ff8000	Orange
Red #ff0000	White #ffffff	#ff8080	Light red, salmon pink
Red #ff0000	Black #000000	#800000	Maroon
Red #ff0000	Green #00ff00	#808000	Olive
Blue #0000ff	Yellow #ffff00	#808080	Mid gray
Blue #0000ff	White #ffffff	#8080ff	Light periwinkle blue
Blue #0000ff	Green #00ff00	#008080	Teal
Yellow #ffff00	Green #00ff00	#80ff00	Chartreuse
Yellow #ffff00	White #ffffff	#ffff80	Pale yellow
Orange #ffa500	Blue #0000ff	#805380	Dusty purple
Pink #ffc0cb	Blue #0000ff	#8060e5	Violet blue
Pink #ffc0cb	Purple #800080	#c060a6	Orchid pink
Purple #800080	Green #008000	#404040	Dark gray
Black #000000	White #ffffff	#808080	Mid gray

Green #00ff00 is the bright web color lime. The darker web color named green is #008000, and it gives darker mixes: with yellow it makes #80c000.

The formula for mixing two RGB colors

mixed channel = first + (second - first) x mix / 100

The formula is applied separately to red, green and blue, and each result is rounded to a whole number from 0 to 255. Take #4f46e5, which is rgb(79, 70, 229), and #f97316, which is rgb(249, 115, 22), at 25%. Red is 79 + (249 - 79) x 0.25 = 121.5, rounded to 122. Green is 70 + 45 x 0.25 = 81.25, rounded to 81. Blue is 229 + (22 - 229) x 0.25 = 177.25, rounded to 177. That is rgb(122, 81, 177), or #7a51b1, which is what the tool shows. A CSS linear-gradient between the same two colors uses this same calculation by default, so the Blend scale matches what the gradient passes through.

Mixing at different ratios and step counts

Quarter, half and three quarters

First colour #4f46e5, Second colour #f97316, Mix 25%, then 50%, then 75%

#7a51b1 at 25%, #a45d7e at 50%, #cf684a at 75%

Five step scale from red to blue

First colour #ff0000, Second colour #0000ff, Steps to show 5

#ff0000, #bf0040, #800080, #4000bf, #0000ff (labeled 0%, 25%, 50%, 75%, 100%)

A very light tint for a background

First colour #2563eb, Second colour #ffffff, Mix 80%

#d3e0fb

With Steps to show at 6 the scale is #2563eb, #5182ef, #7ca1f3, #a8c1f7, #d3e0fb, #ffffff.

Ten percent tints of one color

First colour #4f46e5, Second colour #ffffff, Steps to show 11

#4f46e5, #6159e8, #726bea, #847eed, #9590ef, #a7a3f2, #b9b5f5, #cac8f7, #dcdafa, #ededfc, #ffffff

One third

First colour #ff0000, Second colour #0000ff, Mix 33%

#ab0054

The Mix slider moves in whole percentages, so an exact third is not available. With Steps to show at 4, the scale gives the true thirds #aa0055 and #5500aa.

Why the middle of a blend can look dull or dark

Averaging RGB numbers is simple and predictable, and it matches how CSS gradients, image editors in normal blend mode and most design tools interpolate by default. It has one well known weakness. When the two colors are far apart on the color wheel, the midpoint loses saturation: blue and yellow meet at flat gray, and purple #800080 with green #008000 lands on dark gray #404040. The stored RGB numbers are also not proportional to actual light output, so numeric midpoints tend to look a little darker than the eye expects.

If the midpoint looks muddy, you have three options. Pick endpoints that are closer in hue. Add a hand picked middle color and blend in two halves. Or, for gradients on a web page, ask the browser to interpolate in a perceptual space by writing linear-gradient(in oklch, #0000ff, #ffff00), which travels around the color wheel instead of cutting through gray. This tool always uses plain RGB averaging, so its swatches show the default behavior.

What you can do with a two color mix

Find a border or divider color that sits between two neighboring surface colors.
Build a sequential chart scale: set Steps to show to the number of classes you need and take the swatches in order.
Make tints and shades of a brand color by mixing it with white or black at fixed steps of 10%.
Preview the middle of a gradient before using it. The CSS gradient output uses the same two colors.
Pick a text color for the result: the Readable text row tells you whether black or white text suits the mixed color as a background.

Using Color Mixer

1
Enter the First colour as a hex code or pick it with the color swatch.
2
Enter the Second colour the same way.
3
Drag Mix to the percentage you want. 0% is the first color, 50% is the midpoint and 100% is the second color.
4
Set Steps to show from 3 to 15 to control how many swatches appear in the Blend scale. Each swatch is labeled with its percentage and has a copy button for its hex code.
5
Read Mixed HEX, Mixed RGB and Mixed HSL in the Values panel, or copy the CSS gradient between the two colors.

Questions people ask

Can I mix three or more colors?

Not in one go. The tool blends exactly two colors. To combine three, mix the first two, copy the Mixed HEX into one of the fields and mix it with the third. For roughly equal thirds, mix the first two at 50% and then mix that result 33% toward the third.

Can I use this to predict paint or ink mixing?

No. It models light on a screen, not pigment. Real paint mixtures depend on the pigments themselves and generally turn out darker and duller than an RGB average. Use the results for digital work such as web pages, interfaces and charts.

What does the Mix percentage mean?

It is how far the result sits from the first color toward the second. 0% returns the first color unchanged, 100% returns the second, and 30% means 70% of the first color and 30% of the second. The slider moves in steps of 1%.

Why do some step labels show 13% or 38%?

The scale divides the range evenly and rounds the label to a whole number. With the default 9 steps the real positions are 0, 12.5, 25, 37.5 and so on, which display as 0%, 13%, 25%, 38%. The swatch colors are calculated from the exact positions.

Does the mix use RGB, HSL or a perceptual color space?

RGB. Each of the red, green and blue values is blended in a straight line. The HSL value shown in the results is just the mixed color converted for convenience. There is no option to blend in HSL, LAB or OKLCH.

What formats can I enter and copy?

Enter 3-digit or 6-digit hex codes, with or without the # sign. The result is given as a 6-digit lowercase hex code, an rgb() value and an hsl() value, along with a ready to paste CSS linear-gradient from the first color to the second.

Is the result the same as the CSS color-mix() function?

It matches color-mix(in srgb, first, second) for opaque colors, allowing for rounding. Writing color-mix(in srgb, #ff0000, #0000ff 25%) describes the same blend as Mix 25% here, #bf0040. Other spaces such as oklab or oklch give different results.