Color Mixer
Blend two colors by any ratio and get the result as HEX, RGB and HSL. Mixes in linear light, so the blend does not come out muddy.
What this tool does
Pick two colors, slide the ratio, and see what they make. Both are shown either side of the result so you can judge the blend against what went into it. The mixing happens in linear light by default, which is the part most mixers get wrong: colors on screen are stored in a way that is not proportional to actual brightness, so averaging the stored numbers makes the midpoint come out darker and muddier than your eye expects. Mixing red and green that way gives a murky olive, while mixing them as light gives the bright tone you were picturing. The plain sRGB mode is there too, for when you need to match what CSS color-mix or another tool produced. It accepts hex, rgb and hsl, and gives you the result in all three.
What you can use it for
- Find the midpoint between two brand colors for a gradient stop.
- Soften a strong accent by mixing a little of it into a neutral.
- Build a tint by blending a color toward white, or a shade toward black.
- Work out a hover state that sits partway between two existing colors.
How to use it
- Set your two colors, by picker or by typing a value.
- Slide the ratio to choose how much of the second color goes in.
- Switch between linear light and sRGB if you need to match another tool.
- Copy the result as HEX, RGB or HSL.
Everything runs inside your browser. No file is uploaded to any server. See more tools in this field.
Related tools
DesignColor Converter: HEX, RGB, HSL
Convert colors between HEX, RGB and HSL online. Paste any format and get the others instantly. Free, no upload and in your browser.
Color Palette Generator
Generate harmonious color palettes from any base color: analogous, complementary and more. Free and in your browser, ready to copy.
Color Contrast Checker (WCAG)
Check WCAG color contrast between text and background, with live previews, pass or fail grades and accessible color suggestions. In your browser.
CSS Gradient Generator
Build CSS gradients online with a live preview: linear, radial and conic. Copy the code for your background, free and in your browser.
Frequently asked questions
Why are there two mixing modes?
Because they answer different questions. Linear light mixes the colors the way light actually mixes, which is what your eye expects and what you want for gradients and blends. The sRGB mode averages the stored values directly, which is what CSS color-mix in srgb and most other online mixers do. If you are trying to match a result from somewhere else, use sRGB; otherwise linear will look better.
Which one should I use?
Linear light, unless you have a specific reason not to. It is the default because it produces brighter, cleaner blends. The classic tell is mixing black and white: linear gives you a middle grey that actually looks like the middle, while sRGB gives you one that reads as noticeably dark.
What color formats can I paste in?
Hex, rgb and hsl, in the same forms the color converter accepts, including alpha. The result is given back as hex, rgb and hsl at once so you can take whichever your code needs.
What happens to transparency?
Alpha is blended straight across in both modes. Transparency is not stored in the same non-proportional way that color is, so there is nothing to correct for.