Color Blend Calculator
Mix two hex colors at a chosen proportion.
Tool inputs stay in your browser · optional AI search sends your query
Good to know: Linear interpolation of encoded sRGB channel values, rounded to integers. This is not linear-light physical mixing, subtractive paint mixing or alpha compositing over arbitrary backgrounds.
How to use it (step by step)
- 1Fill in the boxes: “First color”, “Second color”, “Second color contribution (%)”. Example numbers are already there so you can see how it works; replace them with yours.
- 2The result updates instantly as you type (on a phone it is below the boxes).
- 3The bold line is the main answer. Tap Copy next to any value to copy it.
Words to know
- Hex / binary
- Other ways of writing numbers. Binary uses only 0 and 1; hex uses 0–9 and A–F.
- Hex color code
- A color written as # and 6 characters, like #2563EB (blue). Design apps understand it.
- Percentage
- A part out of 100. 25% of 200 = 50.
- RGB channels
- Red, green and blue are the three light channels in a screen image. Each grayscale export shows the intensity of one channel.
More in Design & Color
Color Contrast CheckerWCAG contrast ratio for text and background colors.CSS Gradient GeneratorLinear and radial gradients with copy-ready CSS.PX to REM ConverterPixels to rem/em and back for CSS.Aspect Ratio CalculatorSimplify a ratio and scale width or height to match it.CSS Box Shadow GeneratorCreate a CSS box-shadow from offsets, blur and opacity.Fluid Typography CSS Clamp GeneratorInterpolate font size between two viewport widths.