Color Mixer — Blend Two Colors Online (sRGB, HSL, OKLCH)
Pick two colors, drag the ratio slider, and copy the mixed HEX, RGB, and HSL instantly. Three blend models — gamma-correct sRGB, HSL midpoint, and perceptually uniform OKLCH — plus a 9-step gradient strip. Free and 100% in your browser.
Gamma-correct linear-light mix. Default for most use cases.
#BCC5FFrgb(188, 197, 255)hsl(231, 99%, 87%)Click any step to copy its HEX value.
Three Blend Models
sRGB Linear (gamma-correct), HSL Midpoint (hue-aware), and OKLCH (perceptually uniform — modern CSS Color 4 standard). See which one matches your design intent.
Precise Ratio Slider
Slider from 0% (pure A) to 100% (pure B) in 1% steps. Live preview updates as you move; output values reflect the exact mix.
Gradient Step Strip
Nine-step gradient between A and B showing the full transition. Great for visualizing the difference between sRGB and OKLCH mixing.
100% Client-Side
All color math runs locally. No uploads, no signup. Works offline once loaded.
Color Mixer: Blend Two Colors and Copy the Result
A color mixer interpolates between two colors at a ratio you choose and returns the blended value. Pick Color A and Color B, drag the slider from 0% to 100%, and copy the mixed HEX, RGB, and HSL. Three blend models — gamma-correct sRGB Linear, HSL Midpoint, and perceptually uniform OKLCH — let you control how the midpoint is computed. Free, and 100% in your browser.
How to mix two colors
- Set Color A and Color B — type a HEX value (
#0F62FEor shorthand#F00) or use the native picker. Or tap a Quick pair preset. - Choose a blend model: sRGB Linear for asset-matching, HSL Midpoint to stay on the hue wheel, or OKLCH for the smoothest perceptual transition.
- Drag the Mix ratio slider from 0% (pure A) to 100% (pure B). The mixed color updates live.
- Copy the result in HEX, RGB, or HSL with one click, or click any swatch in the 9-step gradient strip to copy that step.
- Hit the swap button to flip A and B (the ratio inverts too), and compare the same pair across all three models.
How color mixing actually works
Mixing two colors means interpolating between them: at ratio t, the result is A×(1−t) + B×t. The catch is which color space you interpolate in. Averaging raw sRGB channel values is wrong, because sRGB is gamma-encoded — its numbers live in display space, not linear light. This mixer's sRGB Linear mode first applies the sRGB transfer function (linear below the 0.04045 threshold, otherwise ((s+0.055)/1.055)2.4), interpolates in linear light, then encodes back.
The OKLCH mode converts each color to OKLab — a perceptually uniform space created by Björn Ottosson in 2020 — interpolates there, and converts back to sRGB. The W3C CSS Color Module Level 4 specifies this exact behavior: when color-mix() is given no interpolation space, it defaults to OKLab, because, as the spec notes, sRGB mixing "can produce muddy mid-tones, especially when mixing complementary colors." OKLCH gradient interpolation now has roughly 93% browser support (Chrome 111+, Firefox 113+, Safari 16.4+).
Worked examples: input → output
Brand blue + white @ 50% · sRGB Linear
#0F62FE + #FFFFFF → #BCC5FF · rgb(188, 197, 255) · hsl(231, 99%, 87%)
#0F62FE converted to HSL
#0F62FE → rgb(15, 98, 254) → hsl(219, 99%, 53%)
Blue + yellow @ 50% · sRGB Linear vs OKLCH
#3B82F6 + #EAB308 → sRGB #B09DB5 (mauve-gray) · OKLCH #97A4A9 (greener)
Edge case · complementary colors always go gray
Pure blue #0000FF + pure yellow #FFFF00 at 50% gives #808080(flat gray) with a naive average. This tool's gamma-correct sRGB mode brightens it to #BCBCBC — but it is still gray. No amount of linear-light correction fixes this; gray is the true average of complementary colors. Only OKLCH routes the transition through a vivid green.
HEX → RGB → HSL reference values
Common endpoints and their exact equivalents, the way this tool computes them (RGB and HSL rounded to whole numbers). Use these to sanity-check a mix or to enter a known color by any model.
| Color | HEX | RGB | HSL |
|---|---|---|---|
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Brand blue | #0F62FE | rgb(15, 98, 254) | hsl(219, 99%, 53%) |
| Blue | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| Yellow | #EAB308 | rgb(234, 179, 8) | hsl(45, 93%, 47%) |
| Mid gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
Three blend models, compared
| Model | Best for | Watch out for |
|---|---|---|
| sRGB Linear | Most cases; default behavior most design tools use | Mixing complementary colors (blue ↔ yellow, red ↔ green) passes through gray. |
| HSL Midpoint | Staying on the hue wheel; preserving saturation through mix | Lightness shifts can look muddy when the two colors have very different L values. |
| OKLCH | Perceptually uniform brightness; smoothest transitions | Larger compute cost; results may differ subtly from existing assets that were built in sRGB. |
Rule of thumb: default to OKLCH for new designs; fall back to sRGB Linear when matching existing assets; use HSL when you specifically want hue-preserving behavior.
Where a color mixer pays off
Design system shade ramps
Generate 5, 7, or 9 intermediate shades between a primary and dark accent for a design-token palette.
Hover / pressed states
Pick a primary brand color, mix 15% black for the hover state and 30% black for pressed. Consistent UI states without hand-picking each.
Two-color gradients
Visualize the midpoint of any gradient — the midpoint is what users actually see at the centerline of a hero background.
Accessible color pair fixes
When a brand color fails WCAG contrast, mix it toward white (or black) at a known ratio until the contrast passes — without abandoning the brand identity.
Visualizing OKLCH benefits
Compare an RGB-linear mix vs an OKLCH mix between e.g. blue and yellow — RGB passes through a muddy gray, OKLCH passes through a clean lime green.
The gamma fix most tutorials skip
Plenty of articles say "mix in linear light to avoid muddy gradients." True, but incomplete. Gamma correction only fixes brightness. Take pure blue + pure yellow at 50%: a naive sRGB average gives #808080, and this tool's gamma-correct sRGB mode gives #BCBCBC — a brighter gray, but still gray. Linear light cannot make complementary colors blend to a hue, because their channels genuinely cancel.
That is why the 9-step strip is the real test. Switch the same blue/yellow pair to OKLCHand the midpoints turn green. The mixer builds the strip at t = i/8 for nine evenly spaced steps, recomputed per model — so you see, side by side, that the model choice changes the intermediate values while the endpoints stay fixed. For complementary pairs, that difference is the whole reason OKLCH became the CSS default.
Runs 100% in your browser
Your colors never leave your device. HEX parsing, the sRGB gamma transfer function, the OKLab matrices, and the mix all run locally in JavaScript, and copying uses your browser's native clipboard — no uploads, nothing leaves your device. I tested every model against the built-in pairs (brand-on-white, complementary blue/yellow, sunset, triadic) at 0%, 50%, and 100%, plus 3-digit shorthand and invalid HEX input. The preview stays instant and falls back to black/white on bad input rather than breaking.
Frequently asked questions
Is this color mixer free?
Yes — 100% free with no signup. Every blend model, the slider, the gradient strip, and one-click HEX/RGB/HSL copy are unlocked for personal and commercial use.
Why does blue mixed with yellow turn gray?
Because gray is the true linear-light average of two complementary colors — their channels cancel. Gamma-correct sRGB only brightens that gray (#808080 → #BCBCBC). Switch to OKLCH to route the transition through a vivid green instead.
When should I use OKLCH over sRGB?
Use OKLCH for vivid, even transitions — shade ramps and gradients crossing complementary hues. Use sRGB Linear to match assets authored in sRGB. OKLab is the default interpolation space in CSS color-mix(), so OKLCH is the modern default for new work.
What HEX formats are accepted?
6-digit (#0F62FE) and 3-digit shorthand (#F00 → #FF0000), case-insensitive, with or without the hash. Invalid input falls back to black for A and white for B.
Related color & design tools
Sample the two endpoints from any image
Color ConverterConvert the mix between HEX, RGB, HSL, OKLCH
Palette GeneratorBuild a full palette from one seed color
Contrast CheckerVerify the mix passes WCAG 4.5:1
Gradient GeneratorTurn the two endpoints into a CSS gradient
CSS Filter GeneratorShift hue and saturation with filters
Glassmorphism GeneratorFrosted-glass panels with your mixed tint
Border Radius GeneratorShape the components you color
Guide: HEX, RGB, HSL & OKLCHHow the four color models relate
All ToolsBrowse the full toolk utility hub
Last updated: June 2, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.
Need a different tool?
Browse all 89 free, in-browser tools — or tell us what we should build next.