Function Signature

js

mix(aHex: string, bHex: string, weight?: number): string

Parameters

aHex (string): First HEX color string.
bHex (string): Second HEX color string.
weight (number, optional): A value between 0 and 1 indicating the blend ratio. 0 = all of aHex, 1 = all of bHex. Defaults to 0.5 (equal mix).

Return Value

Returns a HEX color string representing the blended result, always in the format #rrggbb.

js

mix("#ff0000", "#0000ff", 0.5);
// "#800080" (purple)

mix("#ff6600", "#00aaff", 0.25);
// "#bf4d3f"

mix("#00ff00", "#0000ff", 0.75);
// "#003fbf"

Examples

js

// Equal mix (50/50)
console.log(mix("#ff6600", "#00aaff"));
// "#804d80"

// Bias towards the first color
console.log(mix("#ff6600", "#00aaff", 0.1));
// "#e65c1a"

// Bias towards the second color
console.log(mix("#ff6600", "#00aaff", 0.9));
// "#1a95e6"

Implementation Details

Converts both HEX inputs into RGB values using hexToRgb.
Performs weighted averaging on each RGB channel (r, g, b).
Rounds the results to integers and converts back into HEX with rgbToHex.
Weight values outside [0,1] are clamped.

Usage Notes

A weight of 0 returns the first color unchanged.
A weight of 1 returns the second color unchanged.
Useful for gradients, smooth transitions, and theme blending.