Color Mixer
Blend two HEX colors, adjust the ratio, preview the steps between them, and copy the result.
Enter valid 3-digit or 6-digit HEX colors.
Blend Steps
Use the Mix For
Hover and Pressed Colors
Create hover, pressed, and selected colors by blending a brand color with white, black, or a surface color.
Color Ramps
Generate stepped colors for charts, badges, and component states.
Brand Blends
Preview how two brand colors combine before using them in gradients or campaign artwork.
How the Blend Is Calculated
The mixer blends red, green, and blue channel values in sRGB. This is useful for digital UI work, but it will not match physical paint mixing or print ink behavior.
Frequently Asked Questions
How does the color mixer calculate the result?v
It blends the red, green, and blue channels from each color according to the selected ratio, then converts the result back to HEX and RGB.
Can I use the output in CSS?v
Yes. Copy the HEX or RGB value for broad compatibility, or copy the color-mix expression when your target browsers support it.
Is this the same as mixing paint?v
No. This mixer blends screen color channels for digital design, so it is best for websites, apps, design systems, and CSS output.
What do the blend steps show?v
The steps show fixed ratios between the two colors, which helps when creating token scales, chart ramps, or hover-state variations.
Related Color Tools
Open the next tool for this color task.
Color Palette Generator - Create Harmonic Palettes
generatorGenerate matching color palettes from one base color.
CSS Gradient Generator - Linear & Radial
generatorBuild a linear or radial gradient and copy the CSS.
Hex to RGB Converter - Free Online Tool
converterTurn HEX colors into RGB values for CSS and design tools.
RGB to Hex Converter - Free Online Tool
converterConvert RGB or RGBA input into a compact HEX code.