mixColor creates a function that can interpolate between two hex, rgba or hsla colors.

Hex and RGBA colors are mixed using linear color space blending which avoids brightness dips. Learn more.


import { mixColor } from '@popmotion/popcorn';


mixColor accepts two colors, either hex/RGB(A), or HSL(A).

It returns a function that can be used to interpolate between the two colors using a value between 0-1.

const mixer = mixColor('#f00', '#0f0');

mixer(0.5) // 'rgba(128, 128, 0, 1)'

Note: Colors, if defined as hex values, will be returned as rgba.


mixColor(from: string, to: string) => (v: number) => string