Skip to main content

Blending by Linear Dodge & Burn

These examples are equivalent to generating a gradient.

Linear light is the equivalent of linear dodge when the value in the second color is above middle gray and linear burn when not.

let blendedColor: Color.hex[] = Color.from('hex', '114488')
  .modify('blend', {
    with: Color.from('ee2288'),
    method: /* methods listed below */,
    amount: /* amounts listed below */
  })

blend

lineardodge

rgb: { r: 17, g: 68, b: 136, a: 255, bitDepth: 8 }rgb: { r: 41, g: 71, b: 148, a: 255, bitDepth: 8 }rgb: { r: 65, g: 75, b: 160, a: 255, bitDepth: 8 }rgb: { r: 88, g: 78, b: 172, a: 255, bitDepth: 8 }rgb: { r: 112, g: 82, b: 184, a: 255, bitDepth: 8 }rgb: { r: 136, g: 85, b: 196, a: 255, bitDepth: 8 }rgb: { r: 160, g: 88, b: 207, a: 255, bitDepth: 8 }rgb: { r: 184, g: 92, b: 219, a: 255, bitDepth: 8 }rgb: { r: 207, g: 95, b: 231, a: 255, bitDepth: 8 }rgb: { r: 231, g: 99, b: 243, a: 255, bitDepth: 8 }rgb: { r: 255, g: 102, b: 255, a: 255, bitDepth: 8 }

blend

linearburn

rgb: { r: 17, g: 68, b: 136, a: 255, bitDepth: 8 }rgb: { r: 15, g: 61, b: 124, a: 255, bitDepth: 8 }rgb: { r: 14, g: 54, b: 112, a: 255, bitDepth: 8 }rgb: { r: 12, g: 48, b: 100, a: 255, bitDepth: 8 }rgb: { r: 10, g: 41, b: 88, a: 255, bitDepth: 8 }rgb: { r: 9, g: 34, b: 77, a: 255, bitDepth: 8 }rgb: { r: 7, g: 27, b: 65, a: 255, bitDepth: 8 }rgb: { r: 5, g: 20, b: 53, a: 255, bitDepth: 8 }rgb: { r: 3, g: 14, b: 41, a: 255, bitDepth: 8 }rgb: { r: 2, g: 7, b: 29, a: 255, bitDepth: 8 }rgb: { r: 0, g: 0, b: 17, a: 255, bitDepth: 8 }

blend

linearlight

rgb: { r: 17, g: 68, b: 136, a: 255, bitDepth: 8 }rgb: { r: 41, g: 61, b: 148, a: 255, bitDepth: 8 }rgb: { r: 65, g: 54, b: 160, a: 255, bitDepth: 8 }rgb: { r: 88, g: 48, b: 172, a: 255, bitDepth: 8 }rgb: { r: 112, g: 41, b: 184, a: 255, bitDepth: 8 }rgb: { r: 136, g: 34, b: 196, a: 255, bitDepth: 8 }rgb: { r: 160, g: 27, b: 207, a: 255, bitDepth: 8 }rgb: { r: 184, g: 20, b: 219, a: 255, bitDepth: 8 }rgb: { r: 207, g: 14, b: 231, a: 255, bitDepth: 8 }rgb: { r: 231, g: 7, b: 243, a: 255, bitDepth: 8 }rgb: { r: 255, g: 0, b: 255, a: 255, bitDepth: 8 }
let blendedColor: Color.hex[] = Color.from('hex', '445566')
  .modify('blend', {
    with: Color.from('ff2255'),
    method: /* methods listed below */,
    amount: /* amounts listed below */
  })

blend

lineardodge

rgb: { r: 68, g: 85, b: 102, a: 255, bitDepth: 8 }rgb: { r: 87, g: 88, b: 111, a: 255, bitDepth: 8 }rgb: { r: 105, g: 92, b: 119, a: 255, bitDepth: 8 }rgb: { r: 124, g: 95, b: 128, a: 255, bitDepth: 8 }rgb: { r: 143, g: 99, b: 136, a: 255, bitDepth: 8 }rgb: { r: 162, g: 102, b: 145, a: 255, bitDepth: 8 }rgb: { r: 180, g: 105, b: 153, a: 255, bitDepth: 8 }rgb: { r: 199, g: 109, b: 162, a: 255, bitDepth: 8 }rgb: { r: 218, g: 112, b: 170, a: 255, bitDepth: 8 }rgb: { r: 236, g: 116, b: 179, a: 255, bitDepth: 8 }rgb: { r: 255, g: 119, b: 187, a: 255, bitDepth: 8 }

blend

linearburn

rgb: { r: 68, g: 85, b: 102, a: 255, bitDepth: 8 }rgb: { r: 68, g: 77, b: 92, a: 255, bitDepth: 8 }rgb: { r: 68, g: 68, b: 82, a: 255, bitDepth: 8 }rgb: { r: 68, g: 60, b: 71, a: 255, bitDepth: 8 }rgb: { r: 68, g: 51, b: 61, a: 255, bitDepth: 8 }rgb: { r: 68, g: 43, b: 51, a: 255, bitDepth: 8 }rgb: { r: 68, g: 34, b: 41, a: 255, bitDepth: 8 }rgb: { r: 68, g: 26, b: 31, a: 255, bitDepth: 8 }rgb: { r: 68, g: 17, b: 20, a: 255, bitDepth: 8 }rgb: { r: 68, g: 9, b: 10, a: 255, bitDepth: 8 }rgb: { r: 68, g: 0, b: 0, a: 255, bitDepth: 8 }

blend

linearlight

rgb: { r: 68, g: 85, b: 102, a: 255, bitDepth: 8 }rgb: { r: 87, g: 77, b: 92, a: 255, bitDepth: 8 }rgb: { r: 105, g: 68, b: 82, a: 255, bitDepth: 8 }rgb: { r: 124, g: 60, b: 71, a: 255, bitDepth: 8 }rgb: { r: 143, g: 51, b: 61, a: 255, bitDepth: 8 }rgb: { r: 162, g: 43, b: 51, a: 255, bitDepth: 8 }rgb: { r: 180, g: 34, b: 41, a: 255, bitDepth: 8 }rgb: { r: 199, g: 26, b: 31, a: 255, bitDepth: 8 }rgb: { r: 218, g: 17, b: 20, a: 255, bitDepth: 8 }rgb: { r: 236, g: 9, b: 10, a: 255, bitDepth: 8 }rgb: { r: 255, g: 0, b: 0, a: 255, bitDepth: 8 }
let blendedColor: Color.hex[] = Color.from('hex', 'ee8822')
  .modify('blend', {
    with: Color.from('118844'),
    method: /* methods listed below */,
    amount: /* amounts listed below */
  })

blend

lineardodge

rgb: { r: 238, g: 136, b: 34, a: 255, bitDepth: 8 }rgb: { r: 240, g: 148, b: 41, a: 255, bitDepth: 8 }rgb: { r: 241, g: 160, b: 48, a: 255, bitDepth: 8 }rgb: { r: 243, g: 172, b: 54, a: 255, bitDepth: 8 }rgb: { r: 245, g: 184, b: 61, a: 255, bitDepth: 8 }rgb: { r: 247, g: 196, b: 68, a: 255, bitDepth: 8 }rgb: { r: 248, g: 207, b: 75, a: 255, bitDepth: 8 }rgb: { r: 250, g: 219, b: 82, a: 255, bitDepth: 8 }rgb: { r: 252, g: 231, b: 88, a: 255, bitDepth: 8 }rgb: { r: 253, g: 243, b: 95, a: 255, bitDepth: 8 }rgb: { r: 255, g: 255, b: 102, a: 255, bitDepth: 8 }

blend

linearburn

rgb: { r: 238, g: 136, b: 34, a: 255, bitDepth: 8 }rgb: { r: 214, g: 124, b: 31, a: 255, bitDepth: 8 }rgb: { r: 190, g: 112, b: 27, a: 255, bitDepth: 8 }rgb: { r: 167, g: 100, b: 24, a: 255, bitDepth: 8 }rgb: { r: 143, g: 88, b: 20, a: 255, bitDepth: 8 }rgb: { r: 119, g: 77, b: 17, a: 255, bitDepth: 8 }rgb: { r: 95, g: 65, b: 14, a: 255, bitDepth: 8 }rgb: { r: 71, g: 53, b: 10, a: 255, bitDepth: 8 }rgb: { r: 48, g: 41, b: 7, a: 255, bitDepth: 8 }rgb: { r: 24, g: 29, b: 3, a: 255, bitDepth: 8 }rgb: { r: 0, g: 17, b: 0, a: 255, bitDepth: 8 }

blend

linearlight

rgb: { r: 238, g: 136, b: 34, a: 255, bitDepth: 8 }rgb: { r: 214, g: 148, b: 31, a: 255, bitDepth: 8 }rgb: { r: 190, g: 160, b: 27, a: 255, bitDepth: 8 }rgb: { r: 167, g: 172, b: 24, a: 255, bitDepth: 8 }rgb: { r: 143, g: 184, b: 20, a: 255, bitDepth: 8 }rgb: { r: 119, g: 196, b: 17, a: 255, bitDepth: 8 }rgb: { r: 95, g: 207, b: 14, a: 255, bitDepth: 8 }rgb: { r: 71, g: 219, b: 10, a: 255, bitDepth: 8 }rgb: { r: 48, g: 231, b: 7, a: 255, bitDepth: 8 }rgb: { r: 24, g: 243, b: 3, a: 255, bitDepth: 8 }rgb: { r: 0, g: 255, b: 0, a: 255, bitDepth: 8 }