Color Mixer

Mix colors visually with measuring cups. Pick colors, adjust amounts, and see the blended result in RGB, HSL, and HEX.

Mixing Station

Glass 1

5

Glass 2

5

Mixing Result

Input Proportions

50%

RGB Breakdown

Red: 142 (35.9%)

Green: 114 (28.8%)

Blue: 140 (35.4%)

Blended Color

Color Details

HEX

#8E728C

RGB

rgb(142, 114, 140)

HSL

hsl(304, 11%, 50%)

Color Mixer – How It Works

Why Color Mixing Works

Color can be mixed in two main ways:

Additive color mixing is used by screens and light-based systems. When colored light overlaps, the light adds together. Red + Green = Yellow, Red + Blue = Magenta, and Green + Blue = Cyan. When all three are combined at full strength, the result is white.

Subtractive color mixing is used by paint, ink, and pigments. Materials absorb some wavelengths and reflect the rest. The main subtractive colors are Cyan, Magenta, and Yellow (CMY). When they are mixed heavily, the result moves toward black.

This tool uses the additive RGB model, which is the standard for digital screens and web design.

The RGB Color Model

RGB defines a color with three channels:

Red (R): 0–255
Green (G): 0–255
Blue (B): 0–255

Each pixel on a screen contains red, green, and blue sub-pixels. By changing the intensity of each channel, a display can produce more than 16.7 million colors ( $256^3 = 16{,}777{,}216$ ).

Common Color Formats

Format	Example	Description
HEX	#FF6B35	A 6-digit hexadecimal format commonly used in CSS
RGB	rgb(255, 107, 53)	Red, green, and blue values written as decimals
HSL	hsl(16, 100%, 60%)	Hue, saturation, and lightness, often easier to adjust visually

How the Mixer Calculates the Result

The mixer blends colors by taking a weighted average of each RGB channel. If there are $N$ input colors with amounts $a_1, a_2, \ldots, a_N$ and RGB values $(r_i, g_i, b_i)$ , the result is:

R_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot r_i}{\sum_{i=1}^{N} a_i}

G_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot g_i}{\sum_{i=1}^{N} a_i}

B_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot b_i}{\sum_{i=1}^{N} a_i}

In simple terms, colors with higher levels have more influence on the final result.

For example, mixing 3 parts red (#FF0000) with 1 part blue (#0000FF):

R = \frac{3 \times 255 + 1 \times 0}{4} = 191

G = \frac{3 \times 0 + 1 \times 0}{4} = 0

B = \frac{3 \times 0 + 1 \times 255}{4} = 64

The blended color is about #BF0040, a deep reddish purple.

Practical Uses

Web Design & UI

Use color mixing to build palettes, test transparent overlays, and create accent colors from a base color.

Education

It is a simple way to learn how light, human color perception, and color math work together.

Digital Art

It helps artists predict how colors will combine on-screen in illustration, design, and photo editing.

Tips for Better Color Mixing

Start with primary colors — Red, green, and blue are the foundation of RGB mixing.
Adjust the levels — Higher levels give a color more influence in the final blend.
Compare the output formats — Use HEX, RGB, or HSL depending on whether you are working in CSS, design tools, or code.
Equal RGB values create gray — If red, green, and blue are equal, the result is a neutral gray.

Frequently Asked Questions

What's the difference between additive and subtractive color mixing? Additive mixing uses light and gets brighter as colors are added, ending in white. Subtractive mixing uses pigments and gets darker as colors are added, moving toward black.

Why don't the mixed colors look like paint mixing? Because this tool uses RGB light mixing, not paint mixing. On a screen, red + blue creates magenta. With paint, pigments absorb light, so the result looks different.

Can I use the resulting color codes in CSS? Yes. The HEX, RGB, and HSL values can be used directly in CSS and most design tools.

What does the "level" on each glass represent? It shows the relative amount of that color in the mix. A glass at level 8 contributes twice as much as the same color at level 4.