Skip to content

Color Blender

DesignDesign Utilities
Blended colour —
RGB
—
HSL
—
CSS color-mix()
—

Enter two hex colours and choose how much of the second one to use. The blender averages the red, green and blue channels at that ratio: #FF0000 and #0000FF at 50% give #800080, rgb(128, 0, 128). It also lists evenly spaced shades between the two, ready to copy into CSS.

About this tool

Designers often need the colour halfway between a brand primary and its accent, a hover state slightly closer to white, or a five-step ramp for a chart legend. This blender takes two hex codes, accepts the three-digit shorthand, and returns the mix as hex, RGB and HSL, along with the matching CSS color-mix() expression. A table lists the in-between shades at equal spacing, so a whole ramp comes out of one pair of colours. The mix is a straight average in sRGB, the same arithmetic browsers use for color-mix(in srgb). That is not how paint or light perceptually blends: midpoints between complementary colours can look muddy or darker than expected, and a perceptual space such as OKLCH gives smoother ramps.

How to use it

  1. Enter both colours

    Type a hex code for colour A and colour B, with or without the #, in six-digit or three-digit form.

  2. Set the ratio

    Move the slider to choose how much of colour B goes into the mix; 0% is pure A and 100% is pure B.

  3. Choose the number of shades

    Use the − and + buttons to set how many in-between shades the table lists, from 0 to 20.

  4. Copy the values

    Take the hex, RGB, HSL or color-mix() line for your stylesheet, or the shade table for a palette.

Examples

Red and blue, 50/50

Colour A (hex)
#FF0000
Colour B (hex)
#0000FF
Amount of colour B
50
In-between shades
3

Result Blended colour: #800080
RGB: rgb(128, 0, 128)
HSL: hsl(300, 100%, 25%)
CSS color-mix(): color-mix(in srgb, #FF0000 50%, #0000FF)

  1. Colour A = rgb(255, 0, 0), colour B = rgb(0, 0, 255), share of B = 50%.
  2. Each channel = A + (B − A) × 0.5, rounded to a whole number.
  3. Result = rgb(128, 0, 128) = #800080.

Averaging each channel gives 128 red and 128 blue, the CSS named colour purple.

Black and white, shorthand hex

Colour A (hex)
#000
Colour B (hex)
#FFF
Amount of colour B
50
In-between shades
1

Result Blended colour: #808080
RGB: rgb(128, 128, 128)
HSL: hsl(0, 0%, 50%)
CSS color-mix(): color-mix(in srgb, #000000 50%, #FFFFFF)

  1. Colour A = rgb(0, 0, 0), colour B = rgb(255, 255, 255), share of B = 50%.
  2. Each channel = A + (B − A) × 0.5, rounded to a whole number.
  3. Result = rgb(128, 128, 128) = #808080.

Three-digit hex codes are expanded first, and the midpoint lands on #808080 grey.

How it is calculated

C = A + (B − A) × t, for each of the red, green and blue channels

A, B
channel values of the two colours, 0 to 255
t
share of colour B, from 0 to 1 (the slider value ÷ 100)
C
channel value of the blend, rounded to a whole number

Each hex code is split into red, green and blue values from 0 to 255. Every channel is interpolated linearly at the chosen share and rounded, then turned back into hex and converted to HSL. In-between shades use shares of 1 ÷ (n + 1), 2 ÷ (n + 1) and so on, so both end colours appear in the table as well.

When not to use it

  • For perceptually even gradients, blend in OKLCH or Lab instead of sRGB.
  • For mixing physical paint or ink, subtractive pigment behaviour differs from screen averaging.

Common mistakes

  • Expecting yellow and blue to make green; an sRGB average of those two gives grey.
  • Reading the slider as the share of colour A when it sets the share of colour B.

Frequently asked questions

Why does blue and yellow give grey instead of green?

Screen colours add light. #0000FF and #FFFF00 average to rgb(128, 128, 128), a neutral grey, because each channel meets in the middle. Green from blue and yellow is a paint effect, where pigments subtract light.

Does it match CSS color-mix()?

Yes, for the sRGB space. The result equals color-mix(in srgb, A, B) with the same percentages, apart from rounding each channel to a whole number for the hex code.

Can I use three-digit hex codes?

Yes. A code such as #F80 is expanded to #FF8800 before blending, the same way browsers read the shorthand.

What do the in-between shades show?

They are evenly spaced blends from colour A to colour B. With 3 shades you get mixes at 25%, 50% and 75%, plus both end colours, which makes a five-step ramp.

Why do some midpoints look darker than both colours?

Linear sRGB averaging does not follow how the eye perceives lightness, so mixes of saturated opposite hues lose chroma and can look dull. A perceptual space like OKLCH keeps the lightness steadier.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 23). Color Blender. Tools Directory. Retrieved October 28, 2026, from https://tools.milunir.com/design/design-utilities/color-blender/

MLA

Tools Directory Editorial Team. “Color Blender.” Tools Directory, 23 Oct. 2026, https://tools.milunir.com/design/design-utilities/color-blender/. Accessed 28 Oct. 2026.

Chicago

Tools Directory Editorial Team. “Color Blender.” Tools Directory. Last modified October 23, 2026. Accessed October 28, 2026. https://tools.milunir.com/design/design-utilities/color-blender/.

Link<a href="https://tools.milunir.com/design/design-utilities/color-blender/">Color Blender – Tools Directory</a>