Hex Color Mixer
Mix two HEX colors online, adjust the blend ratio, preview stepped color mixes, and copy the HEX, RGB, or CSS color-mix 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.
Using This Tool Reliably
Control checks
Choose the base colors and options shown in the tool, then compare the preview against the exported CSS, HEX list, or downloaded file before using it in a project.
Generation logic
The browser derives the displayed palette, gradient, or mix from the selected color values and keeps the preview tied to the same generated output.
Example workflow
Start with a known brand or UI color, adjust the generated result, copy the useful output, then check important text and button states for contrast.
Common mistakes
Avoid exporting colors before assigning roles, reusing decorative accents as text colors, or assuming a generated palette is accessible without checking real foreground and background pairs.
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.