Mixer

10 min read

Where two colors get blended four different ways at once so you can see which blend space gives the midpoint that actually reads right, without having to set up the comparison from scratch.

The Mixer tab is Chroma’s color-space comparison workspace. Pick two colors, drag a ratio slider, and watch the blend resolve in four different color spaces simultaneously: sRGB (standard Red Green Blue) naive, Linear RGB, Oklab perceptual, and HSV (Hue Saturation Value) shortest-hue-arc. The fastest way to decide which color space a gradient or shader lerp should run in.

Summary

A linear interpolation between two colors can produce four different results depending on what color space the math runs in, and the difference matters. A 50/50 mix of pure red and pure green in sRGB is a dull mud. In Linear RGB it is a brighter, more saturated yellow. In Oklab it is a perceptually-balanced olive. In HSV it sweeps through the spectrum and lands on pure yellow. None of the four are wrong; each one is correct for a different downstream use.

The Mixer tab makes the comparison concrete. Drop two colors into the pickers, drag the ratio slider, and the four previews update live. The same two endpoints and the same ratio produce four visibly different midpoints, side by side, with the color-space label on each. Once the right space is identified, the choice can be applied where it matters: as the Color Space dropdown on a gradient asset in the Gradient Editor, or as the lerp formula in a runtime shader or C# blend.

  • Compare how two colors blend in sRGB, Linear RGB, Oklab, and HSV at the same ratio before committing to a color space in the Gradient Editor.
  • Decide what blend math to use for a particular shader pass (typically Linear RGB for physically correct light, Oklab for perceptually consistent UI).
  • Quickly preview a single midpoint between two colors without authoring a gradient asset.
  • Save the four-color result as a new palette or gradient asset for reference or further editing.

Features

  • Two color pickers. Labelled Color A and Color B. Standard Unity ColorField widgets. Drag swatches from the library sidebar or from the Palette Editor onto either picker to load.
  • Ratio slider. 0.0 to 1.0 (left = pure Color A, right = pure Color B, middle = 50/50 blend). The slider position persists across window opens via EditorPrefs.
  • Four side-by-side blend previews. Labelled sRGB (naive), Linear RGB, Oklab, HSV. All four update live as either picker or the ratio slider changes.
  • Use Active Color integration. Double-clicking the window-level New swatch on the color preview strip imports the global active color into Color A. The same gesture works from any other tab, so the loop “pick a color in Color tab, double-click New, switch to Mixer to compare” is one click plus one click.
  • Create Palette button. Writes the four blend results as a new ColorPaletteAsset under the configured palette directory (default Assets/Scylla/Resources/Color/Palettes/). The new palette auto-opens in the Palette Editor and is selected in the library sidebar’s Palettes sub-tab.
  • Create Gradient button. Writes the four blend results as a new ColorGradientAsset with four evenly-spaced stops under the configured gradient directory (default Assets/Scylla/Resources/Color/Gradients/). Useful when the blend spectrum at the chosen ratio needs to be captured as a reusable asset.

Recipes

These recipes are self-contained authoring workflows. Each one answers a single design task; scan the names, find the one that matches what you are doing, and follow it without needing to read the others first.

Find the midpoint that reads right between two colors

Problem. You have two endpoint colors (say, a deep teal and a warm coral) and you want to know what sits halfway between them before you commit to a color-space choice in the Gradient Editor or in a shader. Picking a blend space by gut feel tends to produce midpoints that look muddy or overly bright once the gradient is in the game.

Solution. Open Chroma and switch to the Mixer tab. Load your colors into Color A and Color B in any of these ways:

  • Click the picker swatch to open Unity’s modal color picker and pick directly.
  • Drag a swatch from the library sidebar’s Palettes sub-tab (or from a loaded palette in the Palette tab’s grid view) onto either picker.
  • Pick a color in the Color Editor, then double-click the window-level New swatch in the color preview strip. This imports the active color into Color A automatically.

Once the two colors are loaded, drag the Ratio slider to 0.5. The four previews in the Blended Result row each show what “halfway between A and B” looks like in its color space. The differences are most visible at 0.5; use this position first, then adjust the ratio to explore off-center blends.

Compare a blend across sRGB, Linear RGB, Oklab, and HSV

Problem. You know you need a blend between two colors but you are not sure which color space to use. Each space has a different definition of “halfway”, and the wrong choice shows up in the final gradient or shader as a muddy dip, an unexpected brightness spike, or a hue jump you did not plan for.

Solution. With your two colors loaded and the Ratio slider set, read the four preview swatches side by side:

  • sRGB (naive). Straight-line interpolation between the two endpoint colors in sRGB space, the same math Unity’s Color.Lerp does by default. Produces a midpoint that is darker than physical reality would predict because sRGB is a gamma-corrected space; multiplying gamma-corrected values does not produce the physically-correct in-between brightness. The “muddy” midpoint of red-and-green or blue-and-yellow lerps comes from this.
  • Linear RGB. Straight-line interpolation in linear-light space, then converted back to sRGB for display. Physically correct: this is what would happen if two real light sources at the endpoint colors were combined at the slider ratio. Produces a midpoint that is brighter and more saturated than the sRGB version because the linear average of two bright colors is itself bright.
  • Oklab. Perceptual blend in Oklab (a perceptual color space designed to model human vision uniformly) space. Produces a midpoint that looks like a perceptual halfway point between the two endpoints. Useful for UI and design contexts where the goal is “the color halfway between these two” and the answer should match what a human would call “halfway”.
  • HSV. Shortest-hue-arc interpolation in HSV space. The midpoint walks the hue wheel along the shorter arc between the two endpoint hues, while saturation and value lerp linearly. Produces a midpoint that preserves hue identity through transitions: a red-to-green lerp passes through yellow (the hue between them), not through dull gray.

Which preview is right depends on the use:

  • Gradient assets intended for visual consumption (UI ramps, sky strips, character outfits) tend to read best in Oklab; this is why the Gradient Editor defaults to Oklab.
  • Gradient assets intended for shader inputs (lighting LUTs, atmospheric attenuation tables) tend to read best in Linear RGB; this is what the shader expects to consume.
  • Hue-walking transitions (rainbow ramps, palette wheel sweeps, time-of-day color cycles) read best in HSV; this is the only space that produces a “rainbow” midpoint from a red-to-green lerp.
  • sRGB (naive) is mostly a baseline for comparison. It is what happens by default if the blend math is not made deliberate; comparing the other three previews against the sRGB result quantifies what is gained by choosing a different space.

Apply the chosen blend space to a gradient

Problem. You have identified the right color space for a gradient using the Mixer, and now you need to carry that decision into the actual gradient asset you are building.

Solution. The fast loop is: open the Mixer, drop in your two endpoint colors, drag the ratio slider to the gradient segment’s midpoint, identify which color space gives the best preview, then open the Gradient Editor and set the gradient’s Color Space dropdown to that space. The Mixer is the sandbox for the decision; the Gradient Editor is where the decision lives.

For shader work, the choice translates to the lerp formula rather than to a gradient asset setting. Linear RGB corresponds to converting both endpoints to linear light with ColorUtil.SRGBToLinear, lerping, then converting back with ColorUtil.LinearToSRGB. Oklab corresponds to ColorUtil.LerpOklab(a, b, t). HSV corresponds to converting both endpoints to HSV, lerping the hue along the shorter arc, lerping saturation and value linearly, then converting back.

Turn a blend into a four-color palette

Problem. You have run a useful comparison in the Mixer and you want to capture the four blend results as a named palette so you can use the individual midpoint colors elsewhere – for UI swatches, a shader tint table, or as reference when setting up a material.

Solution. After loading your two colors and setting the ratio, click the Create Palette button below the four previews. Chroma writes the four blended results (sRGB, Linear RGB, Oklab, HSV) as a new ColorPaletteAsset in the configured palette directory, each entry named after its color space. The new palette auto-opens in the Palette Editor and is selected in the library sidebar’s Palettes sub-tab.

See Palette and Gradient assets for how to use a ColorPaletteAsset in runtime code.

Capture the blend as a gradient asset

Problem. You want to save the four blend results as a gradient you can assign to a material or evaluate at runtime, rather than picking individual colors from a palette.

Solution. Click the Create Gradient button. Chroma writes a new ColorGradientAsset with four evenly-spaced stops – one per blend space in sRGB/Linear RGB/Oklab/HSV order – to the configured gradient directory. The asset uses Oklab interpolation between its stops and opens automatically in the Gradient Editor.

See Palette and Gradient assets for how to evaluate a ColorGradientAsset in runtime code.

Tips and pitfalls

  • The four previews are all of the same single midpoint, not of four different blends. At slider 0.5, every preview shows what “halfway between A and B” looks like in its space. They diverge because the spaces have different definitions of “halfway”.
  • sRGB (naive) is the default Unity lerp. Anywhere a project uses Color.Lerp(a, b, t) without explicitly converting to a different space first, the result is the sRGB (naive) preview. This is rarely the right answer for visual content; the Mixer makes the alternative visible.
  • Linear RGB is “physically correct” but not always “perceptually correct”. Two equal-intensity colored lights actually do combine linearly, but the resulting midpoint can be brighter than the perceptual halfway point. For light simulation (atmospheric scattering, area lights) this is what you want; for UI design (the color between two brand swatches) Oklab is usually closer to the intuition.
  • HSV can produce surprising hue jumps at the wheel boundary. A lerp from red (hue 0) to magenta (hue 350) walks the short arc (10 degrees through hue 355), not the long arc (350 degrees through everything else). Most of the time this is the intended behaviour; when it is not (the gradient should specifically take the long way around), use the Gradient Editor with manually-placed intermediate stops instead.
  • HSV cannot interpolate hue at all when one endpoint is achromatic. A pure-gray endpoint has no hue (saturation is zero); the HSV preview borrows the other endpoint’s hue and lerps saturation. This is sometimes the right answer (red-to-gray fades through pinks) and sometimes not (the gradient should pass through other hues); switch to Oklab when in doubt.
  • The ratio slider stays at its last position across sessions. Opening Chroma the next day picks up wherever the slider was left. To reset to 0.5 for a fresh comparison, drag it manually.
  • Double-click the New swatch only loads Color A. The shortcut is wired one-way intentionally; loading Color B from the active color requires clicking the Color B picker directly or dragging onto it. The asymmetry is deliberate: most workflows pick one new color and compare against an existing reference.
  • The Mixer is one-ratio-at-a-time. For a gradient-style result spanning multiple ratios in one color space, use the Gradient Editor with the chosen Color Space and let the gradient sample across [0, 1] continuously.
Updated on July 9, 2026