Colour Mixer Calculator
Enter two hex colours and a blend share to get the mixed colour as hex, RGB, and HSL — using the same linear sRGB formula as the CSS color-mix() function.
Mixed colour (hex)
#800080
- Mixed colour (RGB)
- rgb(128, 0, 128)
- Mixed colour (HSL)
- hsl(300, 100%, 25%)
- Red channel
- 128
- Green channel
- 0
- Blue channel
- 128
Linear sRGB mix: each channel = (1 − t) × A + t × B, where t = 0.50 is the share of colour 2.
How to use this calculator
Enter two colours as hex codes (3- or 6-digit, with or without the leading #). Set the blend slider to choose how much of colour 2 to mix in — 0 returns colour 1 unchanged, 100 returns colour 2 unchanged, and 50 is an even mix. The result shows the mixed colour in hex, RGB, and HSL.
How the calculation works
The calculator uses the W3C standard linear sRGB blend used by CSS color-mix(). Each red, green, and blue channel is averaged independently: mixed_channel = (1 − t) × channel1 + t × channel2, where t is the blend share (0 to 1). The result is rounded to the nearest 0-255 integer and reassembled into a 6-digit hex code. HSL is derived from the mixed RGB using the standard hue/saturation/lightness conversion from the CSS Color spec.
Worked example
Mixing pure red (#ff0000 → R 255, G 0, B 0) with pure blue (#0000ff → R 0, G 0, B 255) at a 50/50 share gives R = 0.5×255 + 0.5×0 = 127.5 (rounded to 128), G = 0, and B = 0.5×0 + 0.5×255 = 128. The mixed colour is rgb(128, 0, 128), hex #800080 — classic purple. Push the slider to 75% and you get rgb(64, 0, 191) = #4000bf, a violet leaning toward blue.
Frequently asked questions
Does this match CSS color-mix() in the browser?
Yes — when CSS color-mix() is called with the sRGB interpolation space (color-mix(in srgb, …)), the formula is identical to this calculator: a per-channel linear weighted average of the 0-255 RGB values. Note that color-mix() also supports other spaces (oklch, lab, hsl) which produce different intermediate hues; this calculator implements the simplest and most widely used sRGB variant.
Is sRGB averaging the same as how light or paint actually mixes?
No. Real light mixing follows linear-light addition — convert sRGB to linear light, sum, then convert back — which tends to look brighter in the middle. Paint mixes subtractively in the CMYK or pigment-Kubelka-Munk model, which gives darker, muddier midtones. sRGB averaging is a useful, fast approximation widely used on the web and in design tools, but for photo-realistic rendering use a linear-light or perceptual (Oklab) blend instead.
Why is my 50/50 mix of yellow and blue not green?
Because sRGB linear mixing is not the same as pigment mixing. Yellow #ffff00 and blue #0000ff in sRGB produce R 128, G 128, B 128 — a neutral grey, not green. Pigment-based yellow + blue makes green because pigments absorb different wavelengths and what is left in the middle of the spectrum is green. To simulate pigment mixing, use a subtractive RYB or Kubelka-Munk model — this calculator implements the additive sRGB convention that matches digital displays and CSS.
What blend value should I use for a tint, shade, or tone?
A tint is a colour mixed with white — set colour 2 to #ffffff and pick a low blend (10-30%) to gently lighten colour 1. A shade is a colour mixed with black — set colour 2 to #000000 and pick 10-40% to darken. A tone is mixed with grey — try #808080 for colour 2. Going further than ~60% generally washes out the original colour, so for subtle tints stay below 40%.
Why are my values rounded to integers?
Standard 24-bit colour uses 8 bits per channel (0-255), so each channel is a whole number. The calculator computes the blended value in full precision and rounds to the nearest integer for display, which can introduce a sub-1/255 difference — invisible to the eye. If you need higher precision (HDR, 10- or 16-bit colour) use the unrounded RGB values shown in the workings.
How do I get a specific named colour like teal or coral?
Look up the CSS named colour — teal is #008080, coral is #ff7f50 — and paste it as colour 1 or 2. To find a mixed colour that lands on a named hue, set the named colour as colour 1, the colour you want to blend toward as colour 2, and slide the blend until the output hex matches. The calculator also reports HSL, which is the easiest space to nudge hue/saturation/lightness toward a target.