Free Color Mixer - Blend Two Colors Online
Pick two colors, drag the ratio slider, and instantly see the blended result in RGB, HSL, and OKLCH - the perceptually uniform color space used by Tailwind CSS v4.
Live Color Blender
Naive RGB or HSL mixing often produces dull, muddy in-between colors - mixing red and green in RGB gives a brownish tone, not the bright yellow you'd expect from paint. OKLCH mixing interpolates through a perceptual color space, producing smoother, more vibrant blends. Switch modes below to compare. All conversions run privately in your browser using the open-source culori library - no data leaves your device.
Quick answer: a color mixer blends two colors at an adjustable ratio and outputs the result as HEX, RGB, HSL, and OKLCH - so you can preview gradients, hover states, and tints, then copy the value straight into your CSS.
Mixing Mode
Mixed Result
50% #3B82F6 + 50% #4ADE80 (OKLCH)
Output
HEX
#00bfda
RGB
rgb(0, 191, 218)
HSL
hsl(184.74, 100%, 20.41%)
oklch()
oklch(0.712 0.185 206)
Related Developer Tools
Last updated: Jun 11 2026
Reviewed by QuickTooly Team
Color Mixing Guide
Why Mix Colors Online?
Designers, developers, and artists often need an in-between shade - a hover state halfway between two brand colors, a gradient stop, or a tint that bridges a light and dark theme. This color mixer blends two colors at any ratio and shows the result as HEX, RGB, HSL, and OKLCH so you can paste it straight into CSS.
- Adjustable ratio: Drag the slider to blend anywhere from 0% to 100% between Color A and Color B.
- Three mixing modes: Compare RGB, HSL, and OKLCH interpolation side by side to find the most natural-looking blend.
- Multiple output formats: Copy the mixed color as HEX, RGB, HSL, or OKLCH - ready for CSS, Tailwind, or design tools.
- Live preview: The result swatch and gradient track update instantly as you type or drag.
- Zero install: Works entirely in your browser - no extensions, plugins, or sign-up required.
RGB vs HSL vs OKLCH Mixing
The same two colors can produce very different blends depending on which color space the interpolation happens in:
- RGB mixing averages the red, green, and blue channels directly. It's simple and matches
color-mix(in srgb, ...)in CSS, but mixing complementary colors (like red and green) often produces a dull, muddy brown or gray midpoint. - HSL mixing interpolates hue, saturation, and lightness. It can produce more saturated midpoints than RGB, but the hue can swing through unexpected colors when the two hues are far apart on the color wheel.
- OKLCH mixing interpolates in a perceptually uniform space, so the lightness of the blend transitions smoothly and stays vivid. This is the same color space Tailwind CSS v4 uses for its palette, and is the mode CSS
color-mix(in oklch, ...)uses by default in modern browsers.
| Mixing Mode | 50% Red + Green | Result |
|---|---|---|
| RGB | #808000 | Dull olive/brown |
| HSL | #ffff00 | Vivid yellow |
| OKLCH | #f99500 | Vivid orange |
Common Use Cases for Color Mixing
- Hover and active states: Mix a brand color with black or white to generate consistent hover, focus, and active state shades.
- Gradient stops: Find a smooth midpoint color between two endpoints for CSS gradients and backgrounds.
- Theme tints and shades: Blend a base color toward white or black to build lighter and darker variants for light/dark themes.
- Design token generation: Derive intermediate values for design systems without manually eyeballing colors.
- Brand palette exploration: Test how two brand colors blend together before committing to a secondary palette.
How to Use This Color Mixer
- Set Color A and Color B - type a hex value or use the native color picker for each.
- Drag the ratio slider - 0% shows pure Color A, 100% shows pure Color B, and 50% is an even mix.
- Pick a mixing mode - switch between RGB, HSL, and OKLCH to compare how the blend changes.
- Copy the result - grab the HEX, RGB, HSL, or OKLCH value and paste it into your CSS or design tool.
Frequently Asked Questions
How do I mix two colors in CSS?
Modern browsers support the color-mix() function, e.g. color-mix(in oklch, #4ADE80 50%, #3B82F6). This tool lets you preview that exact blend and copy a static fallback value (HEX, RGB, HSL, or OKLCH) for browsers or tools that don't support color-mix().
What's the difference between RGB and OKLCH mixing?
RGB mixing averages red, green, and blue channel values directly, which can produce dull or muddy midpoints. OKLCH mixing interpolates in a perceptually uniform space, so the resulting blend keeps a more consistent, vivid lightness across the entire ratio range.
Why does mixing red and green in RGB look brown?
In RGB, red is (255, 0, 0) and green is (0, 128, 0). Averaging the channels gives a low-saturation olive/brown tone rather than the bright yellow you might expect from mixing paint. Switching to OKLCH or HSL mode usually produces a more intuitive result.
Is this data sent to any server?
No. All color parsing, interpolation, and formatting happens locally in your browser using the open-source culori library. Nothing is transmitted to any server.
Can I get the OKLCH mix value for Tailwind v4?
Yes. Set the mixing mode to OKLCH and copy the oklch() output - it's valid CSS Color Level 4 syntax and matches the format Tailwind CSS v4 uses for its built-in palette.
What ratio should I use for a hover or active state color?
A common pattern is to mix 10-20% of black or white into a brand color for hover and active states. Set Color A to your brand color, Color B to black or white, and move the ratio slider to around 15%.