Color Mixer
Blend two colors together by any ratio and preview the steps in between.
Colors
Pick the two colors you want to blend.
Result
The mixed color and its values.
Mixed Color
#95639D
Gradient Strip
Preview the colors between Color 1 and Color 2.
Examples
Brand primary ↔ brand secondary midpoint
Color 1: #3b82f6
Color 2: #ef4444
Ratio: 50%HEX: #95639D
RGB: rgb(149, 99, 157)
HSL: hsl(292, 23%, 50%)The midpoint in sRGB blending is a muted purple — characteristic of mixing complements. Useful for picking a 'resting' or 'disabled' state between two vivid brand colors.
Hover-state between default and pressed
Color 1: #10b981
Color 2: #065f46
Ratio: 60%A channel-interpolated green between the two endpoints, ready to copy as HEX, RGB, or HSL.Using a darker brand color as Color 2 and a 60/40 ratio produces a natural hover-state for a button — slightly brighter than the resting color but anchored to the same hue.
About this tool
The Color Mixer blends two colors together at any ratio and renders every intermediate step in between. It is the simplest way to find the midpoint between two brand colors, generate a smooth hand-off for a UI state, or predict what an overlay looks like when two semi-transparent layers stack.
Mixing happens by interpolating the encoded sRGB red, green, and blue channels: each output channel is `w × color 1 + (1 − w) × color 2`. This is predictable and fast, but it is not gamma-correct or perceptually uniform, so complementary colors can produce a muted midpoint. The step control creates 3–9 colors including both endpoints; the main result is available as HEX, RGB, and HSL.
How to use
Pick two colors
Use the two color pickers to choose the endpoints. The defaults are a blue (#3b82f6) and a red (#ef4444) so you can see the midpoint at a glance.
Set the mix ratio
Drag the Mix Ratio slider from 0% (fully Color 2) to 100% (fully Color 1). The big swatch updates instantly with the resulting color.
Adjust intermediate steps
Use the Intermediate Steps slider (3–9) to choose how many swatches appear in the gradient strip. More steps = a smoother-looking strip.
Read or copy the values
The result card shows the mixed HEX, RGB and HSL values side by side, each with a Copy button. Use these directly in CSS or design tokens.
Use cases
Designing hover and pressed states
Mix a button's resting color with a darker shade at 30–60% to derive its hover and active variants without picking a separate hex.
Generating filler or separator colors
Pick the two adjacent surfaces in your UI and grab their midpoint as a background for dividers, tags, or skeleton loaders.
Predicting overlay results
When stacking two semi-transparent layers, the visible color is roughly the sRGB blend — the mixer approximates what the final pixel will look like.
Common mistakes
Mistake:Expecting a perceptual midpoint.
Fix:Encoded sRGB channel blending can pass through a muddy gray for complementary hues. For a more perceptually even midpoint, use the Gradient Palette Builder with OKLCH interpolation.
Mistake:Mixing two saturated colors at 50% to get a 'brand' color.
Fix:The 50% mix of two vivid hues is rarely a usable brand color — it is often desaturated and gray. Use it as a working state, not as a primary.
Mistake:Confusing HEX arithmetic with visual blending.
Fix:Naive hex string blending (averaging the hex codes character-by-character) gives very different results. This tool blends in actual sRGB color space.
Frequently asked questions
References & standards
Related tools
Box Shadow Generator
Visual CSS box-shadow generator. Create beautiful shadows with live preview and copy the CSS code.
Color Blindness Simulator
Simulate color blindness on palettes and images. Compare protanopia, deuteranopia, tritanopia, and more side-by-side.
Color Contrast Checker
Advanced WCAG accessibility compliance checker with color blindness simulation, multiple text sizes, and comprehensive analysis features.
Color Converter
Convert colors between multiple formats (HEX, RGB, HSL, HSV, CMYK, LAB) with color blindness simulation, named colors, and batch processing
Color Extractor
Extract colors from uploaded images by hovering over pixels to get precise color values.
Color Generator
Generate color palettes, analyze colors, and create gradients with this comprehensive color tool.