TWO COLORS · 3 SPACES · 7 STEPS · LOCAL
Blend any two HEX colors with a precise 0–100 ratio, compare three interpolation spaces, inspect the resulting values, and copy a usable CSS color-mix() declaration. This color mixer runs entirely in your browser and makes every intermediate color visible before you use it in a palette, interface, illustration, or cartoon color study.
Updated August 11, 2026
color mixer
This color mixer calculates a mathematical interpolation between two opaque sRGB endpoint colors. Choose how much of each endpoint contributes, then choose sRGB for familiar browser-style blending, linear sRGB for light-intensity blending, or OKLCH for a more perceptually organized path. The result changes because the three spaces interpolate different coordinates.
At the default 50/50 ratio, #FF5A5F and #2F80ED produce #976DA6 in sRGB, #BE6FB8 in linear sRGB, and #C060D6 in OKLCH. Those three concrete answers are all valid for their selected method. The color mixer also creates seven evenly positioned swatches and converts the selected midpoint into HEX, RGB, and HSB.
color mixer
A single midpoint can hide the most important decision: the coordinate system used to travel between the endpoints. Comparing methods helps you choose a blend that matches the visual job instead of accepting an unexplained default.
color mixer
The color mixer names the interpolation space beside every result. You can switch methods without changing either endpoint or the ratio, so any visual difference comes from the method rather than from a moving input. That makes design review and handoff easier to explain.
color mixer
Each blend is available as uppercase HEX, modern RGB, rounded HSB, and a CSS color-mix() expression. The color mixer also exposes a seven-step ramp for states, chart series, illustration transitions, and quick palette exploration instead of forcing you to calculate intermediate ratios manually.
color mixer
The endpoints, ratio, results, and copied values stay in the current browser session. The color mixer does not upload a file or require an account, which is useful when you are testing unreleased brand colors, client palettes, or early character art directions.
color mixer
Set two HEX endpoints, move the balance, and compare the same blend in three interpolation spaces.
color mixer
CSS COLOR 5
color-mix(in srgb, #FF5A5F 50%, #2F80ED 50%)Use the computed HEX as a fallback when your browser support policy requires one.
color mixer
Select any swatch to copy its HEX value.
#FF5A5F#DC6077#BA678E#976DA6#7473BE#527AD5#2F80EDPrivate by design: every color is mixed locally in this browser.
color mixer
Treat the output as a reproducible design decision. Lock the endpoints first, compare spaces second, and validate the chosen result in its final context rather than selecting a blend from an isolated chip.
color mixer
Paste a three- or six-digit HEX value for each endpoint, or use the native color controls. Give the colors semantic roles such as surface and accent instead of calling them only left and right. Stable roles make later ratio changes easier to discuss and document.
color mixer
Begin at 50/50, switch through sRGB, linear sRGB, and OKLCH, then move the ratio in one-point increments. Watch lightness, chroma, and hue separately. The color mixer preserves both endpoints while you compare, so the experiment remains controlled.
color mixer
Copy the chosen value into the actual component, illustration, or chart. Check contrast, neighboring colors, light and dark themes, and the supported browser range before release. A visually attractive midpoint is not automatically an accessible text color or a safe production token.
color mixer
The same endpoints and percentage can return visibly different midpoints. This comparison summarizes what each method interpolates, where it is useful, and what to inspect before adopting the output.
| Method | Interpolates | Useful for | Check before use |
|---|---|---|---|
| sRGB | Gamma-encoded red, green, and blue channels | Legacy web behavior and familiar quick blends | Midpoints may look darker or grayer than expected |
| Linear sRGB | Red, green, and blue values linear in light intensity | Light-like compositing and energy-aware transitions | The result can look brighter than a familiar UI blend |
| OKLCH | Perceptual lightness, chroma, and shortest-path hue | Even-looking ramps and chroma-conscious palette work | Converted sRGB output may clip highly saturated colors |
color mixer
Before a generated blend becomes a production value, verify the inputs, method, output conditions, and semantic role. This short checklist prevents an attractive experiment from turning into an unexplained token.
color mixer
This color mixer interpolates screen color coordinates. Real pigments interact through absorption, scattering, opacity, binder, concentration, and substrate, so two paint swatches can produce a result that no RGB or OKLCH midpoint predicts. Use physical drawdowns or manufacturer data for material color decisions.
color mixer
The methods and terminology on this page follow the web platform's published interpolation model. The numeric examples below are reproducible with the visible default endpoints and make the method choice auditable.
CSS Color Module Level 4 explains:
Mixing or otherwise combining colors has different results depending on the interpolation color space used.
color mixer
color mixer
color mixer
There is no universal best space. Use sRGB for familiar legacy web behavior, linear sRGB when the blend should reflect light intensity, and OKLCH when perceptual evenness or chroma is the priority. Compare all three with the same endpoints before choosing.
color mixer
Each mode averages different coordinates. Gamma-encoded sRGB channels, linear-light RGB channels, and OKLCH lightness, chroma, and hue do not describe the path in the same way, so equal endpoint weights can produce different visible midpoints.
color mixer
Yes. Enter either three- or six-digit HEX values. This color mixer performs the calculation in your browser, stores no palette on a server, and requires no image upload or account.
color mixer
The declaration tells a supporting browser which interpolation space, endpoint colors, and percentages to use. Copy the generated value into a CSS color property and provide a tested static fallback when your browser support policy requires one.
color mixer
Use it as a starting point. Assign a real semantic role to every retained step, verify contrast and neighboring states, and remove unused values. Even spacing in a color model does not automatically create an accessible or maintainable token system.
color mixer
No. The tool interpolates digital color coordinates and cannot model pigment chemistry, spectral reflectance, opacity, or substrate. Mix and proof physical materials directly when the final output is paint, ink, dye, or another manufactured color.