What color do red and blue make?

Mixed 50/50 as screen colors: #8c53a2 in OKLab, which is rgb(140, 83, 162) and hsl(283, 32%, 48%); #800080 in sRGB; and #bc00bc in linear light.

Why does each mode give a different color?

Each averages different numbers. sRGB averages the stored 0 to 255 values, so midpoints are darker and duller than the light they stand for; linear light averages the light itself and comes out brighter; OKLab keeps lightness and saturation closer to what the eye sees. White and black at 50% give #808080, #bcbcbc and #636363.

How do I write the mix in CSS?

Copy the CSS color-mix() line: red and blue at 50% in OKLab is color-mix(in oklab, #ff0000 50%, #0000ff). CSS gives the share of the first color, so with the slider at 25% (25% Color 2) in linear light the line is color-mix(in srgb-linear, #ff0000 75%, #0000ff).

How do I make a darker or lighter shade of a color?

Set Color 2 to black or white and move the slider to the share you want. #2193b0 with 20% black in OKLab gives #166c82, and with 20% white gives #5ca8c0. The darker shade also fixes contrast: #2193b0 is 3.58:1 on white and fails AA for normal text, while #166c82 is 5.99:1 and passes.

Can I mix three or four colors?

Yes. Add color brings in a third and a fourth color, and each color gets a weight slider from 0 to 100. Weights are relative, so 1:1:2 and 25:25:50 give the same mix. Red, blue and green at 1:1:2 in OKLab give #7dae83, and the CSS line nests two-color mixes: color-mix(in oklab, color-mix(in oklab, #ff0000 50%, #0000ff) 50%, #00ff00). At equal weights the three give #869290. A color at weight 0 is left out.

Copy shareable URL puts color1, color2, ratio, blendMode (perceptual, srgb or linear-light) and s (steps, 2 to 20) in the link, plus color3, color4 and the weights w1 to w4 when you mix more than two. An older link with blendMode=linear opens in sRGB, the gamma-encoded mixing it used to mean.

Color Mixer

Mix two to four hex colors by weight in OKLab, sRGB or linear light: red and blue at 50% give #8c53a2 in OKLab. Copy HEX, RGB, HSL, OKLCH or CSS color-mix(). How it works

Color 1 (hex)

Color 2 (hex)

Mix ratio: 50% Color 1, 50% Color 2

Left: 100% Color 1Right: 100% Color 2

Blend in

OKLab (perceptual) mixes in the OKLab colour space, which keeps lightness and saturation closer to what the eye sees.

Gradient steps (5)

Presets

Mixed color

#8c53a2

vs White

5.42:1

AA: passAAA: failAA Large: pass

vs Black

3.87:1

AA: failAAA: failAA Large: pass

Gradient as code

:root {
  --color-1: #ff0000;
  --color-2: #c6496d;
  --color-3: #8c53a2;
  --color-4: #5147d2;
  --color-5: #0000ff;
}

About the Color Mixer

Red #ff0000 and blue #0000ff mixed 50/50 give #8c53a2 in OKLab, #800080 in sRGB and #bc00bc in linear light. The color mixer blends two hex colors at any ratio from 0 to 100%, or up to four colors by relative weight, in the space you pick and gives the result as HEX, RGB, HSL, OKLCH and a CSS color-mix() line, with its contrast against white and black. The gradient between colors 1 and 2 copies as CSS variables, an SCSS map, Tailwind colors, JSON or a hex list.

50/50 mixes in the three spaces

Color 1	Color 2	OKLab	sRGB	Linear light
#ff0000	#0000ff	#8c53a2	#800080	#bc00bc
#ffffff	#000000	#636363	#808080	#bcbcbc
#ff0000	#00ff00	#d0a800	#808000	#bcbc00
#ffff00	#0000ff	#6cabc7	#808080	#bcbcbc
#ffcc00	#0066ff	#8ea7b7	#809980	#bca3bc
#ff7e5f	#feb47b	#ff9a6d	#ff996d	#ff9c6e
#2193b0	#6dd5ed	#4ab4ce	#47b4cf	#52b8d1
#134e5e	#71b280	#427f71	#42806f	#538c71

The last three pairs are the Sunset, Ocean and Forest presets. Close colors give close results in every space; the spaces differ most for colors far apart.

Red to blue in 5 steps (OKLab)

Share of Color 2	Hex
0%	#ff0000
25%	#c6496d
50%	#8c53a2
75%	#5147d2
100%	#0000ff

White and black at 50%: contrast of the mix

Space	Mix	On white	On black
OKLab	#636363	6.00:1	3.49:1
sRGB	#808080	3.94:1	5.31:1
Linear light	#bcbcbc	1.89:1	11.05:1

Ratios are truncated to two decimals, not rounded, so a pair never shows a pass it does not have.

Frequently asked questions

What color do red and blue make?: Mixed 50/50 as screen colors: #8c53a2 in OKLab, which is rgb(140, 83, 162) and hsl(283, 32%, 48%); #800080 in sRGB; and #bc00bc in linear light.
Why does each mode give a different color?: Each averages different numbers. sRGB averages the stored 0 to 255 values, so midpoints are darker and duller than the light they stand for; linear light averages the light itself and comes out brighter; OKLab keeps lightness and saturation closer to what the eye sees. White and black at 50% give #808080, #bcbcbc and #636363.
How do I write the mix in CSS?: Copy the CSS color-mix() line: red and blue at 50% in OKLab is color-mix(in oklab, #ff0000 50%, #0000ff). CSS gives the share of the first color, so with the slider at 25% (25% Color 2) in linear light the line is color-mix(in srgb-linear, #ff0000 75%, #0000ff).
How do I make a darker or lighter shade of a color?: Set Color 2 to black or white and move the slider to the share you want. #2193b0 with 20% black in OKLab gives #166c82, and with 20% white gives #5ca8c0. The darker shade also fixes contrast: #2193b0 is 3.58:1 on white and fails AA for normal text, while #166c82 is 5.99:1 and passes.
Can I mix three or four colors?: Yes. Add color brings in a third and a fourth color, and each color gets a weight slider from 0 to 100. Weights are relative, so 1:1:2 and 25:25:50 give the same mix. Red, blue and green at 1:1:2 in OKLab give #7dae83, and the CSS line nests two-color mixes: color-mix(in oklab, color-mix(in oklab, #ff0000 50%, #0000ff) 50%, #00ff00). At equal weights the three give #869290. A color at weight 0 is left out.
Can I share a mix?: Copy shareable URL puts color1, color2, ratio, blendMode (perceptual, srgb or linear-light) and s (steps, 2 to 20) in the link, plus color3, color4 and the weights w1 to w4 when you mix more than two. An older link with blendMode=linear opens in sRGB, the gamma-encoded mixing it used to mean.

Hover shades, color ramps and color-mix()

A hover or pressed state is often the brand color pushed part of the way toward white or black: #2193b0 with 20% white in OKLab is #5ca8c0. For chart series that read as one family, mix two brand colors and set the gradient strip to 5 steps and copy them as CSS variables, an SCSS map, Tailwind colors, JSON or a hex list. Or let the browser blend: the CSS color-mix() line names the same space and share. The contrast panel checks the mix against white and black for WCAG AA, AAA and AA Large.

How the mix is worked out

The slider is the share of Color 2, t. Both colors are converted to the chosen space, mixed as Color 1 × (1 − t) + Color 2 × t, and converted back to hex.

Mix up to four colors, each with its own weight slider. Weights are relative, so 1:1:2 equals 25:25:50: red, blue and green at 1:1:2 in OKLab give #7dae83. The CSS line nests two-color mixes: color-mix(in oklab, color-mix(in oklab, #ff0000 50%, #0000ff) 50%, #00ff00).

OKLab mixes lightness and the two color axes of OKLab.
sRGB averages the stored red, green and blue numbers.
Linear light mixes each channel in linear light.

Example: red #ff0000 and blue #0000ff at 50% give #8c53a2 in OKLab, #800080 in sRGB and #bc00bc in linear light. The OKLab mix is rgb(140, 83, 162), hsl(283, 32%, 48%), oklch(53.9% 0.133 315.9) and color-mix(in oklab, #ff0000 50%, #0000ff). CSS names the share of the first color, so 25% on the slider is written 75%.

The gradient strip shows 2 to 20 evenly spaced steps, each mixed in the same space as the main result. Contrast ratios are truncated to two decimals: #8c53a2 is 5.42:1 on white and 3.87:1 on black, so it passes AA on white but only AA Large on black.

Fun Fact: Björn Ottosson published the Oklab color space in December 2020. CSS has since adopted it as oklab() and oklch().

Related Tools

View all tools

Dev

RGB to Hex

Convert RGB to a hex color code and back: rgb(255, 136, 0) is #FF8800. Paste #abc, ff8800 or 255,136,0; each channel is a whole number 0 to 255.

Dev

Color Picker

Pick a color or type a HEX, RGB or HSL value to get the other two, the CSS and CMYK forms, and its WCAG contrast ratio on white, black or a second color.

CSS

Hex to RGBA Converter

Convert hex to rgba(): #007BFF is rgba(0, 123, 255, 1). Reads 3, 4, 6 and 8-digit hex or rgb()/rgba(), sets the opacity, and gives hsla() and 8-digit hex.

CSS

Color Contrast Checker

Enter a text and a background color, with opacity, to get the WCAG contrast ratio and AA and AAA pass or fail for normal and large text.

CSS

Color Palette Generator

Make a 5-color palette from one hex color: monochromatic, complementary, analogous, triadic or split-complementary, with WCAG contrast for each swatch.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.