Color Mixer & Tint/Shade Blender

Blending two colours looks like simple arithmetic until you try it in different programs and get different answers. A gradient from red to blue passes through a dull purple in one tool and a bright magenta in another, and nobody changed the inputs. The difference is the colour space in which the mixing happens. This page lets you blend in three spaces, compare them directly and then generate lighter, darker and greyer versions of the first colour for a palette.

Three ways to average

sRGB is the encoding most files and design tools use. Its numbers are gamma-encoded, so averaging them is a shortcut that darkens midpoints. Linear light first converts to proportional intensities, averages those and converts back; the midpoint is brighter and corresponds to how two lights add on a screen. OKLab is built from perceptual data so that equal steps look equal to the eye, which keeps midpoints from looking muddy or from changing hue.

A worked example

Press Sample: first colour #ff0000, second #0000ff, mix 50%. In sRGB the midpoint is #800080, a dark purple, because each stored channel is halved. In linear light the midpoint is #bc00bc, a much brighter magenta. In OKLab it is #8c53a2, a medium purple that is visibly lighter than the sRGB mix. The nine-step sRGB ramp reads #ff0000, #df0020, #bf0040, #9f0060, #800080, #60009f, #4000bf, #2000df and #0000ff.

Tints, shades and tones

Below the mixer, pick a variant type and a step count. For the red #ff0000 in sRGB, five tints, mixed toward white, are #ff2b2b, #ff5555, #ff8080, #ffaaaa and #ffd5d5. Five shades toward black are #d50000, #aa0000, #800000, #550000 and #2b0000. Five tones toward grey run from #ea1515 to #956b6b. The steps are evenly spaced between the colour and the target, and the target itself is not included, which is why pure white is not on the tint list. One step gives the midpoint.

Picking the space

Use sRGB when you must match what a design tool or a CSS color-mix(in srgb, ...) would give. Use linear light when you simulate light, such as overlapping translucent coloured beams, or when you want brighter midpoints. Use OKLab for ramps meant to look even, for example in data visualisation or for generating hover states that should differ by a predictable amount. If you reproduce a result in CSS, name the space explicitly, for example color-mix(in oklab, ...), so the browser mixes the way you tested.

Edge cases

Mixing complementary colours in sRGB passes close to grey. Alpha is not part of the mixer; blend opaque colours. A mix at 0% returns the first colour exactly and 100% returns the second.

Limits

This is screen arithmetic, not pigment simulation: mixing blue and yellow paint gives green, but mixing the two lights or hex values does not. Hue interpolation in cylindrical spaces such as HSL or OKLCH is not offered. Inputs accept hex, rgb(), hsl() and oklch(), and everything is calculated in your browser.

Using the variants in an interface

The three variant types map neatly onto interface states. A tint of the brand colour makes a soft background for a notice or a selected row. A shade is a natural choice for a hover or pressed state, because it darkens the colour without changing its hue. A tone, which is the colour mixed with grey, gives a muted version for secondary buttons and disabled text. Generate five of each from your main colour, copy the comma-separated list below the swatches, and pick the steps that keep enough contrast with the text placed on them.

Related tools

• Color Converter translates the mixed value into other notations.
• CSS Gradient Generator builds a gradient from the same two colours.
• Tailwind Color Scale Generator makes a full 50 to 950 scale.
• Color Palette Generator suggests harmonious partners.