Blending

When blending two colors, the amount ∈ [0,1] refers to the percentage the second color is blended with the first. In other words, 0 means 0% of the second color and 100% of the first while 1 means 100% of the second color and 0% of the first.

.modify('blend', {
  with: color2,   // REQUIRED, can be any color of any type
  amount: number, // optional, 0 - 1, defaults to 0.5
  method: string, // optional, defaults to the original type or 'rgb' if type not directly supported
  round: boolean, // optional, defaults to true
})

Blending Methods

method	description
rgb	Blends each RGBA value
hsv	Blends each HSVA value
hsl	Blends each HSLA value
hsp	Blends each HSPA value
cmyk	Blends each CMYK value
lab	Blends each L*a*b* value
luv	Blends each L*u*v* value
hue	Blends hue only
value	Blends value (HSV) only
lightness	Blends lightness (HSL) only
intensity	Blends intensity (HSI) only
perceivedbrightness	Blends perceived brightness (HSP) only
screen	RGB values are inverted, multiplied, then inverted again
multiply	RGB values are multiplied
overlay	Screen or multiply depending on whether second color values are lighter or darker
softlight	Similar to overlay; uses W3C formula
divide	First color values divided by second
subtraction	Second color values subtracted from first color
difference	Difference between each value pair
colorburn	Divites inverted bottom layer by top layer
colordodge	Divides bottom layer by inverted top layer
vividlight	Color dodge or burn, depending on which value is lighter
linearburn	Sums each value pair and subtracts 1
lineardodge	Sums each value pair
linearlight	Linear dodge or burn, depending on which value is lighter

See mathematics for more details

JavaScript

const Color = require('chromaticity-color-utilities')

const color1 = Color.from('rgb', [255, 0, 0]).modify('blend', {
  with: Color.from('hex', '00ff00')
  // method defaults to type of color1 (rgb)
})
// rgb { r: 128, g: 128, b: 0, a: 255, bitDepth: 8, max: 255 }

const color2 = Color.from('rgb', [255, 0, 0]).modify('blend', {
  with: Color.from('hex', '00ff00'),
  method: 'hsv',
})
// rgb { r: 255, g: 255, b: 0, a: 255, bitDepth: 8, max: 255 }

const color2 = Color.from('hsv', [300, 100, 100]).modify('blend', {
  with: Color.from('hex', '00ff00')
  // method defaults to type of color2 (hsv)
})
// hsv { h: 210, s: 100, v: 100, a: 100 }

const color3 = Color.from('hex', 'ee5432')
  .modify('blend', {
    with: Color.from('rgb', [234, 100, 20, 64]),
    amount: 1 / 3,
  })
  .to('hsv')
// hsv { h: 15, s: 83, v: 93, a: 75 }

TypeScript

import Color from 'chromaticity-color-utilities'

const color1: Color.rgb[] = Color.from('rgb', [255, 0, 0]).modify('blend', {
  with: Color.from('hex', '00ff00'),
  method: 'vividlight'
})