mix

function mix(
  color1: Color,
  color2: Color,
  t?: number,
  options?: InterpolationOptions,
): Color;

Without options this interpolates L, C, hue (shortest path) and alpha as plain OKLCH channels, exactly like option-less interpolate(). In every mode a powerless (achromatic) hue — chroma at or below ACHROMATIC_CHROMA_THRESHOLD — takes the other color's hue, so mixing white into blue stays blue. Without options that includes t = 0 and t = 1: an achromatic endpoint comes back with its own L, C and alpha but the other color's hue (CSS Color 4 missing-hue semantics), keeping the hue continuous in t, whereas { space: 'oklch' } returns exact endpoints. Passing options switches to CSS Color 4 color-mix() semantics in the chosen space: options.hue picks the hue arc, and rectangular spaces interpolate with premultiplied alpha. Results are not gamut mapped.

Parameters

color1Color

First color; returned when t = 0

color2Color

Second color; returned when t = 1

t?numberdefault 0.5

Mix position (default 0.5)

options?InterpolationOptions

Interpolation space, hue method, and alpha handling

Returns

Color

Example

import { mix, parse, toHex } from '@pbroom/color-kit';

const red = parse('#ff0000');
const lime = parse('#00ff00');
toHex(mix(red, lime)); // → '#f99500' (OKLCH midpoint, legacy default)
// Physically correct (linear-light) blend, like mixing light:
toHex(mix(red, lime, 0.5, { space: 'linear-srgb' })); // → '#bcbc00'
// Gamma-encoded blend, like color-mix(in srgb, red, lime):
toHex(mix(red, lime, 0.5, { space: 'srgb' })); // → '#7f8000'