Lighten Color
Enter a color and this tool will give you lighter shades of color, download color codes in different formats.
Blend Colors
Online Color Blend is a user-friendly tool that makes it easy to mix and blend two colors for use in web design, graphics, or any creative project. Simply choose two colors using the interactive color picker or manually enter the color codes, and the tool will generate a perfectly blended result.
The blended color is displayed in four widely used formats: Hex, RGB, HSL, and HSV, so you can use it directly in your CSS, graphics software, or other digital projects. This makes it simple to integrate the resulting color wherever it’s needed.
Color 1
Color 2
Blended color
Color 1
Blended color
Color 2
50% is an even blend of both colors, which is the average of their red, green and blue values.
Blended color in different formats
Color palette between Color 1 & Color 2
Select a color to use that mix. Copy all gives you one HEX code per line.
Everything is worked out in your browser. The address of this page updates so you can share or bookmark your blend.
How to use it
The online color blend tool is very easy to use, just follow the following steps to blend two colors together:
- Pick Color 1Select the first color by clicking on the color or entering the hex code in the input.
- Pick Color 2Select the second color by clicking on the color or entering the hex code in the input.
- Fine tune themIf you need to make some minor adjustments, alter the numbers in the ‘R’, ‘G’ and ‘B’ boxes.
- See the blendThe blended color will automatically be updated with different formats available.
- Copy itCopy your preferred format by clicking on the Copy button.
Good to know
Not just 50/50
Move the mix slider to favour one color. At 0% you get Color 1, at 100% you get Color 2.
Build a gradient
The palette lists evenly spaced steps between your two colors. Copy all gives you the list to use as gradient stops.
Share your blend
The address of the page changes with your colors, so you can bookmark it or send it to someone.
Frequently asked questions
How are two colors blended?
The red, green and blue values of both colors are averaged. For example, rgb(23, 189, 237) and rgb(245, 21, 76) give rgb(134, 105, 157). With the mix slider, the average is weighted towards one of the two colors.
Why does blending two bright colors look dull?
Averaging RGB values moves the result towards the middle, so opposite colors such as blue and orange end up as a muted grey. This is how screens mix light. It is different from mixing paint.
What is the palette for?
It shows evenly spaced colors from Color 1 to Color 2, including both ends. You can use them as the stops of a CSS gradient or as a set of in-between tones.
Can I type a short color code?
Yes. A short code such as #06f is read as #0066ff. The # is optional.
Are my colors stored or sent anywhere?
No. Everything is worked out in your browser. The colors are only added to the address of the page so you can bookmark or share them.
Related tools
Darken Color
Enter a color and this tool will give you darker shades of color, download color codes in different formats.
Invert Color
Use this online tool to get the inverted color of an entered shade. Different color code formats available.
Color Converter
Simple to use tool to find out different codes for a color you enter. Also displays complementary colors that might be useful.
Sponsors
Check Shortened URLs
Expand shortened URLs to view the destination link.
Copy Paste List
Copy and paste or download lists in your preferred format, including plain text, PDF, or HTML.
Unicode Characters & Emojis
Search all Unicode characters and emojis plus other tools.
Advertise Here
Advertise your company and products here!