Spalvų maišytuvas

A free online color mixer for paint or light

This color mixer combines two colors — or more — into a new one and shows the full gradient of steps between them. Pick colors with the swatches, type a hex code, or sample them straight off an uploaded image, then read the mixed result as HEX, RGB, HSL, and CMYK. Everything runs in your browser, so it's instant and nothing you load is ever uploaded anywhere.

Where most tools only do a single flat linear blend, this one lets you mix two colors online three different ways and shows you the difference as you go — so you get the answer a painter expects, the answer a screen produces, or a plain mathematical midpoint for gradients and design systems.

Subtractive, additive, or a plain blend — three mixing models

Subtractive mixing models paint and pigment: colors absorb (subtract) light, so blue + yellow = green, red + yellow = orange, and red + blue = purple — the intuitive 'what two colors make X' results that match physical paints, ink, and CMYK printing. Additive mixing models light: red, green, and blue add up, so red + green = yellow and all three together make white — the way screens, projectors, and stage lights behave.

The third mode, Blend, is a straight linear interpolation that averages the RGB channels to find the exact numerical midpoint — ideal for gradients, UI tints, and design token generation. A single toggle switches between all three, and the blend strip redraws immediately so you can watch a blue-to-yellow paint mix pass through realistic green in the subtractive middle, versus the very different path it takes as additive light.

What two colors make green, orange, purple, and brown?

The built-in color mixer chart answers the most-searched pigment questions with one tap: green from blue + yellow, orange from red + yellow, purple from red + blue, teal from blue + green, and a realistic brown from two complementary colors like orange + blue. Tap any pair in the chart to load it into the mixer in Subtractive mode and see the exact hex result and color codes.

Because the subtractive engine mixes the way pigments really do, the secondaries come out true and the tertiaries dull naturally toward brown — the same muddying you get when you over-mix real paint. The ratio slider lets you control proportions precisely: 70% red + 30% blue gives a warmer, more magenta purple than a 50/50 split, for example.

Mix from an image — and mix more than two colors

Upload any photo and use the eyedropper to sample colors directly off it — perfect for matching a brand color from a product photograph, a paint swatch, or an inspiring image. Pick two or more pixels and blend them. The image is decoded locally on an HTML canvas, so a color mixer from image here means your file never leaves the device — suitable for confidential brand assets and unreleased design mockups alike.

Need to combine more than two? Click 'Add color' to add a third, fourth, fifth, or sixth swatch, each with its own weight slider. The tool returns the weighted mix across all inputs — useful for averaging a palette, recreating a multi-pigment paint blend, or finding the visual center of a set of brand colors.

How this compares to Adobe Color, Coolors, and colordesigner.io

Adobe Color (color.adobe.com) is built for color harmony exploration — complementary, triadic, analogous — and requires an Adobe account that syncs data to Adobe's servers. It has no subtractive (paint) or additive (light) mixing model and no ratio slider for blending specific hex codes. Coolors (coolors.co) is excellent for palette generation but its color mixer only performs a basic linear blend — equivalent to this tool's 'Blend' mode — with no paint-physics or light-physics mixing and no image sampling.

colordesigner.io offers a two-color linear blend and gradient strip, but only outputs hex values — no RGB, HSL, or CMYK — and lacks physics-based mixing models and image sampling. This tool fills the gap: three mixing models (subtractive, additive, linear), four simultaneous output formats (HEX, RGB, HSL, CMYK), image color sampling, up to six colors with individual weight sliders, and a shareable URL. No account required, no usage limits, no server uploads — everything is free and runs locally.

Every code ready to copy — and a shareable link

The result card shows the mixed color's HEX, RGB, HSL, and CMYK values plus the nearest named CSS color, and a single click copies any of them to the clipboard. Generate 2–20 evenly spaced midpoint swatches between your two colors, copy a single step, or grab the whole sequence at once for a CSS gradient or a design-system color ramp. A shareable URL captures your colors, ratio, and model so you can send an exact mix to a colleague or client for review.

There is nothing to install and no account to create. Color mixing, image sampling, and code conversion all happen locally in your browser — your colors and images stay on your device. Bookmark the online color mixer and pair it with the Color Palette Generator and the Contrast Checker on UtiloKit for a complete no-upload color workflow.

Additive vs subtractive mixing: why the physics differ

Additive color mixing is the physics of light. When you aim three colored spotlights at the same spot on a white wall — one red, one green, one blue — each one adds photons of a particular wavelength to the mix. Red + green light produces yellow; red + blue light produces magenta; green + blue light produces cyan; all three at full power produce white. Computer monitors, smartphone screens, televisions, projectors, and LED bulbs all operate on exactly this principle: every pixel is a cluster of tiny red, green, and blue emitters whose intensities blend in the viewer's eye. The three primaries are red, green, and blue because they correspond to the three types of cone cells in the human retina — the L (long), M (medium), and S (short) cones — so mixing those three wavelength regions gives the widest possible gamut of perceived colors.

Subtractive color mixing is the physics of pigment and ink. A yellow pigment looks yellow because it absorbs short-wavelength (blue) light and reflects the rest; a cyan pigment absorbs long-wavelength (red) light. When you mix the two, both absorptions are in effect simultaneously — the combined pigment absorbs both blue and red, reflecting mainly green. This is why cyan + yellow = green in ink and paint, and why CMYK printing uses cyan, magenta, and yellow as primaries: each subtracts one third of the visible spectrum. All three inks together absorb nearly all visible light, producing near-black — which is why professional printing adds a dedicated black ink (the K channel, short for Key) rather than mixing CMY. Black ink produces truer blacks, uses far less expensive colored ink, and dries faster, making it both more accurate and more economical.

The "primary colors" taught in most elementary schools — red, yellow, and blue (RYB) — come from a preindustrial painting tradition that predates the scientific understanding of color perception. RYB is a practical approximation: artists found they could mix a wide range of pigments from those three, and the model stuck. But it is not the most accurate description of either light (where the primaries are RGB) or printing (where they are CMY). For instance, RYB predicts that blue + yellow should make green — which works tolerably well with real paints — but it incorrectly predicts that mixing all three primaries gives brown, and it cannot explain why a TV screen can mix green from red and blue-green light. The color mixer on this page gives you access to both the scientifically grounded additive (RGB) and subtractive (CMY-based) models, not the historic RYB approximation.

Color spaces and their mathematics

When you type a hex color like #3B82F6, you are expressing an sRGB value: three 8-bit integers, each ranging from 0 to 255, encoding how much red, green, and blue light the display should emit. Eight bits per channel allows 256 steps each, giving 16.7 million possible combinations — enough that the steps are invisible to the human eye at normal viewing distances. The HSL representation of the same value describes the color differently: Hue (0–360°, a position on the color wheel), Saturation (0–100%, how colorful it is versus grey), and Lightness (0–100%, where 0% is always black, 100% is always white, and 50% at full saturation is the pure hue). HSL is more intuitive for human selection — "make this 20% lighter" is a simple Lightness tweak — but its geometry distorts perceptual uniformity. The closely related HSB/HSV model (Hue, Saturation, Brightness or Value), used in Adobe Photoshop and Illustrator's color pickers, differs in how brightness works: at 100% Saturation and 100% Value you get the pure hue; reducing Value to 0% always gives black regardless of hue or saturation. HSB is preferred in creative software because it matches how painters think about adding black to darken a paint.

For accurate color difference measurement, designers and engineers use the CIE Lab color space (also written L*a*b* or CIELAB). Lab was designed to be perceptually uniform: a numerical difference of the same magnitude should correspond to the same perceived color difference anywhere in the space, regardless of hue or lightness. The three axes are L* (lightness, 0 = black, 100 = white), a* (green on the negative end to red on the positive end), and b* (blue on the negative end to yellow on the positive end). The Delta-E (ΔE) metric measures the straight-line distance between two points in Lab space. A ΔE of 1.0 is the just-noticeable difference (JND) for a trained observer under controlled viewing conditions; a ΔE below 2.0 is typically acceptable for production color matching in printing and manufacturing. A ΔE above 5.0 is a mismatch visible to any observer. The Lab-based ΔE formula is why color-managed workflows in packaging, textiles, and automotive paint use Lab rather than RGB or HSL for tolerancing — two colors that look identical on screen can have a ΔE of 4+ on a physical substrate.

The CMYK values this tool outputs are a device-independent approximation calculated directly from the RGB values — they give you the ink percentages you would need to theoretically match the color in print. Because real-world CMYK output depends heavily on the specific press, ink set, and paper stock, professional print production always involves a proper ICC color profile conversion rather than the simple RGB-to-CMYK formula. But for quick reference — checking whether a digital color will be ink-heavy, or whether the black channel is being driven hard — the displayed CMYK percentages are a reliable first check.

Why color mixing space matters: gamma, OKLCH, and CSS Color 4

The most common mistake in programmatic color mixing is blending sRGB hex values as if they were linear. A hex code like #808080 is not half as bright as #FFFFFF — it is physically about 21% as bright, because sRGB values are gamma-encoded. The sRGB standard applies a transfer function (approximately a power of 2.2) so that the numerical range 0–255 maps to perceived lightness steps rather than to linear light intensity. When you average two gamma-encoded numbers directly — for instance, mixing black (#000000) and white (#FFFFFF) at 50/50 — you get #808080, which appears noticeably darker than true perceptual mid-grey. Correct linear-light mixing involves three steps: convert both sRGB values to linear light (apply the inverse gamma), average the linear values, then re-apply gamma encoding to get the output sRGB value. When mixing black and white this way, the result is approximately #BCBCBC — visibly lighter than #808080 and genuinely perceptually halfway between the two. This is why gradients that look correct when generated in a proper perceptual space often look washed-out or dark in the middle when generated with naive RGB math.

The OKLCH color space, introduced by Björn Ottosson in 2020 and now part of the CSS Color 4 specification, is designed specifically to solve the perceptual uniformity problem for color manipulation. OKLCH describes colors with three components: L (perceived lightness, 0–1), C (chroma, a measure of colorfulness), and H (hue angle, 0–360°). Equal numerical steps in OKLCH produce approximately equal perceptual steps — something that is not true of HSL, where a 30° hue step in the yellow range looks enormous while the same step in the blue range is barely visible. For color interpolation — generating gradient stops, blending two colors, computing palette scales — OKLCH gives visually smooth, predictable results across all hues. OKLCH also separates chroma and hue cleanly, so when you mix a vivid orange and a vivid blue you don't automatically get a desaturated muddy middle (a classic HSL artifact); the chroma stays relatively high through the transition.

CSS Color 4 formalizes this with the native color-mix() function, supported in all major browsers since 2023. The syntax color-mix(in oklch, blue 50%, yellow 50%) tells the browser to blend the two colors in the OKLCH color space — producing a clean, vibrant green midpoint rather than the grey-green you'd get from naive RGB averaging. You can use any registered color space as the interpolation space: in srgb, in hsl, in lab, in oklch, and more. For UI work, in oklch or in oklab are the recommended defaults because they respect perceptual uniformity. color-mix() also lets you specify percentages for opacity, so color-mix(in oklch, red 30%, transparent) is a standards-compliant way to create a 70%-transparent red — useful for design tokens and theme layers that need to be composable without JavaScript.

Color mixing in design systems and tonal scales

Every major design system ships a color scale — a sequence of stops ranging from near-white to near-black for each hue — and the interpolation method used to generate those stops has a direct effect on the quality of the result. Tailwind CSS generates 11 stops per color (50, 100, 200 through 900, and 950); Material Design 3 generates tonal palettes from a single source color using the HCT color space (a hybrid of the CAM16 perceptual model and CIELab), which ensures that stepping up or down the scale feels perceptually even and that tone 40 in one hue looks equally bright as tone 40 in any other hue. IBM's Carbon Design System uses perceptually uniform Lab-based ramps, hand-tuned so that the contrast ratios at each step meet specific accessibility thresholds. The underlying challenge is always the same: naive RGB or HSL interpolation produces scales where the middle stops look muddy or jump unevenly, which is why design systems that try to auto-generate full scales from a single hex often hand-correct individual stops after the fact.

The Munsell color system, developed by artist and teacher Albert Munsell in 1905, was an early systematic attempt to organize colors in perceptually equal steps. Munsell organized his color solid by three independent dimensions — Hue (position on the color wheel), Value (lightness from 0 black to 10 white), and Chroma (saturation, measured outward from the neutral axis) — and physically produced paper samples spaced so that each adjacent pair looked equally different to human observers. Munsell's work was the direct precursor to the CIE's CIELAB and LCH models, and its influence is visible in modern design token systems: the idea that a color scale should have perceptually equal steps rather than numerically equal steps comes directly from Munsell. Josef Albers' landmark 1963 book Interaction of Color extended this thinking into a more unsettling direction: he demonstrated through exercises that the same objective color (identical hex values) looks entirely different depending on its surrounding context — a phenomenon called simultaneous contrast. A mid-grey square appears lighter on a dark background and darker on a light one; the same orange looks brownish against a saturated yellow and vivid against a deep blue. For designers, this means that specifying a color in isolation — whether in a design token or a paint swatch — never fully describes how it will actually appear in a real layout.

When building light/dark themes in CSS, color mixing functions provide a cleaner approach than maintaining separate token sets. A pattern gaining traction in CSS custom-property–based design systems is defining a single "base" color per semantic role, then deriving light and dark variants using color-mix(): for example, --surface-light: color-mix(in oklch, var(--brand-color) 10%, white) and --surface-dark: color-mix(in oklch, var(--brand-color) 15%, black). The light-dark() CSS function, now supported in all major browsers, lets a single property switch between two values based on the user's color-scheme preference: background: light-dark(var(--surface-light), var(--surface-dark)). This approach keeps theming declarative and co-located with the token definition, avoids duplicate override blocks in [data-theme="dark"] selectors, and ensures that the light and dark variants stay tonally related to the source color even when the source color is changed — a significant maintenance win over hand-coded hex values at each stop.