justyourpaletteColor Mixer
Blend two colors in any ratio and copy the result.
- 100% Free
- No Sign Up
- Works in Your Browser
Color mixer
Mix two colors and see every step between them
More Color Tools
View all tools- Shades generatorTints, shades and tones of any color
- Tailwind color generatorMake a 50-950 Tailwind color scale from one color
- Palette generatorGenerate color palettes and lock the ones you like
- Color pickerPick a color and copy it as hex, RGB or HSL
- Contrast checkerCheck text and background contrast against WCAG
- Hex to RGBConvert hex color codes to RGB values
- Palette from imageExtract a color palette from any photo
- Image color pickerClick any pixel in a photo to get its color code
- Color wheelFind color harmonies on an interactive wheel
Every everyday color tool, right in your browser.
No software. No uploads. No signup.
Browse all 28 tools- Color tools
- 28
- Named colors
- 139
- Curated palettes
- 216
How to use the color mixer
Three steps, all in your browser.
- 1
Pick a base color
Type a code or use the picker to set the starting color.
- 2
Set the steps
Choose the steps or the mix ratio. The colors update instantly.
- 3
Copy the codes
Copy any color code in one click, or share the page link.
Color Mixer: what to know
The color mixer blends two colors in any ratio and shows the steps between them. Choose the mixing space: sRGB, which matches older CSS and most design tools, or OKLab and OKLCH, which mix in a way that tracks human perception and avoid the dull, grayish middles RGB blends are known for.
Screen colors mix like light, not like paint. Blue and yellow paint make green because pigments absorb light; averaging blue and yellow light gives a gray or pale tone. So a digital mixer won't reproduce what you'd get on a palette knife, and that's expected.
Modern CSS can do this live with color-mix(), for example color-mix(in oklab, #DB2777 40%, white). Mixing here in the same space shows you what that CSS will produce before you paste it into a stylesheet.
Popular uses
- Finding a midpoint between two brand colors
- Making tinted backgrounds by mixing a color with white
- Building smooth gradient stops
- Exploring how two colors blend in different spaces
Tips for the best result
- Mix with white or black for tints and shades, or with gray for tones.
- Compare sRGB and OKLab mixes of opposite hues to see the difference.
- Use color-mix() in CSS so blends update when your base colors change.
Read how JustYourPalette works, browse named colors and curated palettes, and see our privacy details. Colors you enter and images you open are processed in your browser and are never sent to our server.