Color Mixer for Blending Two Colors
Mix two colors using the available interpolation methods. Compare the resulting colors and copy a value for your design.
Color Mixer workspace
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
Mix two colors using the available interpolation methods. Compare the resulting colors and copy a value for your design. Interpolation in different color spaces can produce different intermediate colors from the same endpoints. Choose the method that fits your purpose and inspect the result on its actual background. A blended color still needs an independent contrast check when used behind text.
How to use the color mixer
- 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.
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: September 15, 2026 · Runs 100% in your browser — no uploads, tool input is not sent to Toolk.
Frequently asked questions
Why do blue and yellow mix to gray instead of green?
Gray is the true linear-light average of two complementary colors — their channels genuinely cancel, which is why gamma-correct sRGB only brightens the gray (#808080 to #BCBCBC) without adding hue. Switch the blend model to OKLCH and the midpoint routes through a vivid green instead.
When should I pick OKLCH over sRGB Linear?
Use OKLCH for perceptually even transitions — shade ramps, gradients crossing complementary hues — because CSS color-mix() itself defaults to OKLab. Fall back to sRGB Linear when you must match assets authored in plain sRGB, and HSL Midpoint when hue-preserving behavior is exactly what you want.
Which HEX formats does the mixer accept?
Six-digit codes like #0F62FE and three-digit shorthand like #F00 (expanded to #FF0000), case-insensitive, with or without the hash. Invalid input falls back to black for Color A and white for Color B rather than throwing, so the preview never breaks mid-edit.
Are my colors uploaded while mixing?
No. HEX parsing, the sRGB gamma transfer, and the OKLab matrices are processed locally in your browser, and Toolk's page analytics do not receive your color values. Tool input is not sent to Toolk.
How do I check that a mixed shade still passes accessibility?
Copy any step of the 9-step gradient strip into the Color Contrast Checker at /tools/color-contrast-checker — lightened tints often drift below the 4.5:1 AA ratio against white even when both endpoints pass comfortably.