colorMix()
The colorMix
function allows you to mix two colors according to a specified weight in RGB color space.
This function returns a new Spectrum
instance representing the resulting color.
Usage
import Spectrum, { colorMix } from '@snipshot/spectrum';
const red = new Spectrum('hex', '#f00');const blue = new Spectrum('rgb', '0, 0, 255, 1');
const purple = colorMix(red, blue, 0.5); // 0.5 is a weight of the first color (max value is 1)
console.log(purple.rgb); // { r: 128, g: 0, b: 128, a: 1 }
Parameters
colorMix(color1, color2, weight)
Parameter | Type | Required | Valid range | Description |
---|---|---|---|---|
color1 | Spectrum instance | true | - | The first color to mix |
color2 | Spectrum instance | true | - | The second color to mix |
weight | number | true | [0; 1] | The weight of the first color in the mixture. |
Return Value
The colorMix
function returns a new Spectrum
instance representing the mixed color.
Examples
Mix two hex
colors
import Spectrum, { colorMix } from '@snipshot/spectrum';
const darkSlateGrey = new Spectrum('hex', '#2F4F4F');const orange = new Spectrum('hex', '#FFA500');
const mix = colorMix(darkSlateGrey, orange, 0.3); // 30% of Dark slate grey and 70% of Orange;
console.log(mix.hsl); // { h: 41, s: 0.77, l: 0.43, a: 1 }
Mix colors with opacity
import Spectrum, { colorMix } from '@snipshot/spectrum';
const fuchsia = new Spectrum('rgb', '255 0 255 0.3');const midnightBlue = new Spectrum('rgb', '25 25 112 0.65');
const mix = colorMix(fuchsia, midnightBlue, 0.5); // 50% of Fuchsia and 50% of Midnight blue;
console.log(mix.rgb); // { r: 140, g: 13, b: 184, a: 0.47 }