Color mixer
Mix two colors online and get the blend as HEX, RGB, OKLCH and a ready CSS color-mix() line. Set how much of each color goes in and choose the color space the mixing happens in. Nine steps from one color to the other come with it. Free, in your browser.
How to mix two colors
- 1Type or pick the "First color" and the "Second color"
- 2Drag "Share of the second color" to the blend you want
- 3Choose a color space under "Mix in"
- 4Copy the HEX, RGB, OKLCH or CSS value of the mix
- The mixed color, with its values and nine steps between
What comes out
- Ready for CSS.The mix also comes as color-mix(in oklab, #2563eb 50%, #f59e0b), to paste into a stylesheet
- Five color spaces.OKLab, OKLCH, CIE Lab, sRGB and linear sRGB each blend differently, and you can compare them
- Nothing is sent anywhere.The colors are mixed by your browser, on your own device
What you can do
- Mix two colors typed as #hex, rgb(), hsl(), lab(), oklch(), a CSS color name or a Tailwind name, or chosen with the color picker
- Set the share of the second color from 0 to 100 %, starting at an even 50 %
- Mix in "OKLab (even steps to the eye)", OKLCH, CIE Lab, "sRGB (like most design tools)" or "Linear sRGB (like mixing light)"
- Copy the mix as HEX, RGB, OKLCH or as a CSS color-mix() expression
- See nine steps from the first color to the second, at 0, 13, 25, 38, 50, 63, 75, 88 and 100 %, each with a copy button
Good to know
- This is light on a screen, not paint. Blue and yellow mixed in sRGB give gray, #808080, not green
- The color space changes the result. #2563EB and #F59E0B at 50 % give #938EA4 in OKLab and #8D817B in sRGB
- The mixing follows CSS color-mix(): in OKLCH the hue takes the shorter way round the color wheel
- Only two colors at a time. For a run through more colors, use the gradient palette generator
Questions
How do I mix two colors online?
Type or pick both colors, drag the share to the blend you want, and copy the result. The mix shows as HEX, RGB, OKLCH and a CSS color-mix() line.
Why don't blue and yellow make green?
Paint mixes by taking light away, a screen by adding it. Mixed as light in sRGB, #0000FF and #FFFF00 give gray. In OKLab they give a light blue, #6CABC7.
Which color space should I mix in?
OKLab, the preset, gives steps that look even to the eye. sRGB matches most design tools, and linear sRGB behaves like two lights shining together.
Can I use the result directly in CSS?
Yes. Copy the color-mix() line and the browser mixes the same way, or copy the HEX value if you want a fixed color.
Are my colors sent anywhere?
No. The mixing happens in your browser on your own device. No request is made with your colors.
More tools in Web & code
That page doesn't exist. Search or drop a file below to find the tool you need.
One site for every file job. What’s yours?
Stop hopping between converter sites. Pick from 410+ tools, or a recipe that chains several.
- Files Stay On Your Device
- No watermark
- Works offline
Drop a file here
A pasted file works too.
or search for a tool
Open an app
From “ugh, this file” to done, in three steps.
- Drop it, or pick a task
No file? Search for what you need. Files are processed on your device, not uploaded for processing.
- Pick what you want
Smaller, another format, signed, merged. One click, no settings to study first.
- Make it a recipe
Need three steps in a row every week? Chain them once and run the same recipe next time.
One approved toolbox for the whole team.
In offices, on building sites and in agencies, teams handle sensitive files all day. ToolRecipe gives everyone the same tools and the same recipes, and the files are processed on each person's own computer.
- Files are processed on the employee's device
- Company recipes everyone runs the same way
- One place instead of ten converter sites