Color Mix Calculator
Two brand colors rarely meet in the middle the way you expect, and guessing the blend wastes rounds of design revisions. This color mix calculator blends any two colors at any ratio and shows the result as you drag: the mixed swatch, its hex, RGB and HSL values, and a seven-step strip of every shade between your two starting points.
Set each color with the picker, a hex code, or both. There is no Calculate button because there is nothing to wait for: every keystroke and every slider move remixes the color instantly.
This is screen mixing: the math of light in sRGB, not paint. Pigments mix subtractively and land somewhere else, so treat the result as a starting point for physical media.
Quick Answer
Key takeaways
- The blend is a weighted average of the two colors, channel by channel. The ratio slider is the only weighting control, and 50% is the plain midpoint.
- Hex and RGB are the same color written two ways. HSL adds the reading designers actually adjust: hue, saturation and lightness.
- The seven-step strip is the fastest way to lift intermediate shades for gradients, hover states and palette ramps: hover any swatch to read its hex.
- Screen blends can go dull between complementary colors. That is sRGB averaging, not a bug, and the limits section below explains when a perceptual mixer serves you better.
- Quick Answer
- How to mix two colors with this tool
- The blending formula, channel by channel
- Reading the seven-step gradient strip
- Hex, RGB and HSL: three readings of one color
- Tints, shades and tones from a single mix
- Why midpoints can look muddy, and when it matters
- Light mixing is not paint mixing
- What competing color mixers miss
- Frequently Asked Questions
How to mix two colors with this tool
Pick or type the first color, then the second, then drag the ratio until the big swatch looks right. That really is the whole workflow, but three details save time.
Enter colors the way you already have them. Design files give hex codes, so type them. Starting from a photo or a brand sheet, the native picker is faster. The two stay in sync: typing a valid hex moves the picker, and picking a color rewrites the hex.
Drag the ratio, watch the label. The label always states the split, such as 50% Color 1 + 50% Color 2, so a screenshot of the tool documents its own recipe.
Read all three formats. The result box gives hex for design tools, RGB for code that wants channels, and HSL when you plan to lighten or darken the mix by hand.
Copy the result. Copy my results puts the hex, RGB and HSL lines on your clipboard, ready for a stylesheet or a design token file.
The blending formula, channel by channel
Each of the three RGB channels is blended independently with the same weights, then rounded to the nearest whole number. Nothing else happens: no hidden color management, no gamma tricks.
| Channel | Color 1 (#FF0000) | Color 2 (#0000FF) | 50/50 blend | Rounded |
|---|---|---|---|---|
| Red | 255 | 0 | 255 x 0.5 + 0 x 0.5 | 128 |
| Green | 0 | 0 | 0 x 0.5 + 0 x 0.5 | 0 |
| Blue | 0 | 255 | 0 x 0.5 + 255 x 0.5 | 128 |
RGB (128, 0, 128) is #800080 in hex, and converting it to HSL gives a hue of 300 degrees (squarely in the magenta-purple sector of the color wheel), 100% saturation, and 25.1% lightness. The formula line under the result repeats this arithmetic with your actual numbers, so you can audit any blend instead of trusting it.
Reading the seven-step gradient strip
The strip under the result shows seven evenly spaced blends stepping from Color 2 on the left to Color 1 on the right, in sixths: 0%, 17%, 33%, 50%, 67%, 83% and 100% Color 1. The swatch nearest your current ratio gets a dark outline. Hover any swatch and its hex code appears as a tooltip.
This is the part of the tool that earns its keep in real projects. A two-color CSS gradient with a muddy middle usually needs one intermediate stop, and the strip hands you six candidates with exact codes. Button hover states are the same job in miniature: the 67% or 83% swatch toward your darker color is a hover shade that provably belongs to the same family, instead of a lightness guess typed into a color panel.
Hex, RGB and HSL: three readings of one color
Hex and RGB describe identical information. #800080 is simply 128, 0, 128 written in hexadecimal, two digits per channel. If a tool gives you one, you already have the other, and this calculator shows both so you never convert by hand.
HSL answers different questions. Hue (300 degrees for our purple) tells you where the color sits on the wheel, which is what you change when a mix feels too red or too blue. Saturation tells you how gray it is: drop saturation and any color slides toward gray without changing its lightness. Lightness is the dial for tints and shades. When a stakeholder says “same color, but lighter”, they are asking for an HSL lightness change, and reading the HSL line tells you how far you moved.
Modern CSS can do this blend natively: the MDN reference for CSS color values documents the color-mix() function, which mixes two colors in a chosen color space right in the stylesheet. This calculator stays useful alongside it because it shows the numeric result, the HSL reading and the intermediate steps that a one-line CSS function hides.
Tints, shades and tones from a single mix
Three classic variations of any color come from mixing it with white, black and gray, and all three are one ratio change away here.
| Variation | Recipe with #800080 | Result | Hex |
|---|---|---|---|
| Tint (add white) | 80% purple + 20% #FFFFFF | rgb(153, 51, 153) | #993399 |
| Shade (add black) | 80% purple + 20% #000000 | rgb(102, 0, 102) | #660066 |
| Tone (add gray) | 80% purple + 20% #808080 | rgb(128, 26, 128) | #801A80 |
Design systems are built out of exactly these moves: a base color, a tint ramp for backgrounds, a shade ramp for text and borders. Build the ramp in the strip first (it already shows six steps between two endpoints), then spot-check the exact ratio you ship.
Why midpoints can look muddy, and when it matters
Straight sRGB averaging has a known weakness: blends between complementary colors pass through a dull middle. Yellow #FFFF00 and blue #0000FF average to #808080, a flat gray, because each channel lands at half strength. Perceptual color spaces such as OKLCH and OKLab, which several newer mixers use, space colors the way human vision does, so their midpoints stay more vivid and more evenly lit.
Neither answer is wrong; they answer different questions. If your mixed value has to agree with a stylesheet, a design tool or a half-opacity overlay, sRGB averaging is the correct match, because that is the arithmetic those systems perform. If you are art-directing a brand gradient and the middle looks dead, a perceptual blend will likely please you more. This tool is deliberately the sRGB kind, and it says so on the card.
Light mixing is not paint mixing
On screen (additive)
- Red + green + blue light = white
- Red + blue = purple #800080
- Yellow + blue light = grayish white
- This is the model this calculator uses
In paint (subtractive)
- Each pigment absorbs (subtracts) wavelengths
- Red + blue paint = a darker, less pure purple
- Yellow + blue paint = green
- Results depend on the actual pigments and brand
So a screen mix is a planning aid for physical paint, never a recipe. If you are choosing a wall color from a screen blend, order a sample pot and judge it on the wall in your own light. Once you have a color you trust, measuring the room comes next: the bathroom area calculator works out wall and floor areas for a small room, and the carpet area calculator does the same for flooring, so the quantity you buy matches the space you are covering. Those are the only two companion tools this topic genuinely calls for.
What competing color mixers miss
The established mixers each give up something. CalculatorDoc takes hex codes and a 0 to 1 ratio but shows only the single result. The Softonic color blender builds even steps nicely, then stops at hex with no HSL reading. W3Docs generates a long fixed ramp of 17 swatches but fixes the step count and offers no ratio control. Newer tools such as 66colorful and the ArtInContext mixer add perceptual spaces and even paint simulation, at the cost of a much heavier interface for a two-color job.
This page keeps the focused job complete: picker and hex input that stay in sync, a ratio slider with a plain-language label, hex, RGB and HSL in one result, a seven-step strip with hover hex codes, the actual formula printed under the result, and copy and share buttons. For a quick two-color blend that has to match CSS, that is the whole task, done without an account or a sidebar of unrelated tools.
Frequently Asked Questions
Purple. #FF0000 and #0000FF at a 50/50 ratio give rgb(128, 0, 128), which is #800080, in screen (additive) mixing. More red pushes it toward magenta-red (#BF0040 at 75% red); more blue pushes it toward violet.
Blend each RGB channel separately with the same weights: mixed = Color 1 x ratio + Color 2 x (1 – ratio), rounded to a whole number. At 50% the result is the plain average of the two colors; at 100% you get Color 1 unchanged.
Yes. Type 3 or 6 hex digits, with or without the # sign: #FF0000, FF0000 and f00 are all accepted. The color picker and the preview swatch update to match as soon as the code is valid.
None in meaning. Hex is RGB written in base 16, two digits per channel, so #800080 is exactly rgb(128, 0, 128). Use whichever format your design tool or stylesheet expects.
Hue is the position on the color wheel in degrees, saturation is how vivid or gray the color is, and lightness is how dark or light it is. Purple #800080 reads hsl(300, 100%, 25.1%). HSL is the practical format for adjusting a mix: change lightness to lighten it, saturation to mute it.
Screens mix light additively: red, green and blue light add up toward white. Paint mixes pigments subtractively: each pigment absorbs wavelengths, so red and blue paint give a darker purple than #800080 and yellow plus blue paint gives green. Use this tool for screen colors, and test physical paint with a sample.
Mix it with white for a tint or black for a shade. 80% #800080 with 20% white gives the tint #993399; 80% with 20% black gives the shade #660066. Mixing with gray (#808080) instead gives a tone, #801A80.
Yes. The strip shows seven blends stepping from Color 2 on the left to Color 1 on the right, and hovering any swatch shows its hex code as a tooltip. The swatch matching your current ratio is outlined.
Yes. Copy my results copies the mixed hex, RGB and HSL lines, ready to paste into a stylesheet, a design token file or a message to a developer.
Add This Calculator to Your Website
References
- MDN Web Docs, the CSS <color> data type reference: hex, RGB, HSL, HWB, Lab and OKLCH notations, and the color-mix() function for mixing colors in CSS. MDN: CSS color values. Accessed October 2026.
- MDN Web Docs, the CSS color property reference, covering keyword, hex and functional color notations as used in stylesheets. MDN: CSS color property. Accessed October 2026.