🎨Color Mixer

How to Use

1. 1

   Choose two colors

   Use the color picker or type a HEX code directly (e.g. #FF0000) for each of the two colors.

2. 2

   Adjust the blend ratio

   Drag the slider to change the mix ratio between the two colors. Far left is 100% Color 1; far right is 100% Color 2.

3. 3

   Copy the result

   Copy the blended color as HEX or RGB. The 5-step gradient preview shows intermediate steps at 0%, 25%, 50%, 75%, and 100%.

FAQ

How is the color mixing calculated?

For physically accurate results, the tool converts sRGB values to linear RGB (proportional to actual light energy), takes a weighted average, then converts back to sRGB. This gives more natural midpoints than simply averaging raw RGB byte values.

Can I type a HEX code directly?

Yes. Type a 6-digit HEX code with a # prefix (e.g. #1D3D5E) into the text field. It syncs with the color picker in real time.

Can I use this for CSS gradients?

The 5-step gradient preview shows blended colors at 0%, 25%, 50%, 75%, and 100%. For full CSS gradient code generation, try the CSS Gradient Generator tool.

Does it support alpha / transparency mixing?

Currently only opaque RGB colors are supported. Alpha channel (transparency) blending is not available in this tool.