Skip to main content

Blending by Color Dodge & Burn

These examples are equivalent to generating a gradient.

Vivid light is the equivalent of color dodge when the value in the second color is above middle gray and color 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

colordodge

rgb: { r: 17, g: 68, b: 136, a: 255, bitDepth: 8 }rgb: { r: 41, g: 69, b: 148, a: 255, bitDepth: 8 }rgb: { r: 65, g: 70, b: 160, a: 255, bitDepth: 8 }rgb: { r: 88, g: 71, b: 172, a: 255, bitDepth: 8 }rgb: { r: 112, g: 72, b: 184, a: 255, bitDepth: 8 }rgb: { r: 136, g: 73, b: 196, a: 255, bitDepth: 8 }rgb: { r: 160, g: 74, b: 207, a: 255, bitDepth: 8 }rgb: { r: 184, g: 75, b: 219, a: 255, bitDepth: 8 }rgb: { r: 207, g: 76, b: 231, a: 255, bitDepth: 8 }rgb: { r: 231, g: 77, b: 243, a: 255, bitDepth: 8 }rgb: { r: 255, g: 78, b: 255, a: 255, bitDepth: 8 }

blend

colorburn

rgb: { r: 17, g: 68, b: 136, a: 255, bitDepth: 8 }rgb: { r: 15, g: 61, b: 126, a: 255, bitDepth: 8 }rgb: { r: 14, g: 54, b: 115, a: 255, bitDepth: 8 }rgb: { r: 12, g: 48, b: 105, a: 255, bitDepth: 8 }rgb: { r: 10, g: 41, b: 94, a: 255, bitDepth: 8 }rgb: { r: 9, g: 34, b: 84, a: 255, bitDepth: 8 }rgb: { r: 7, g: 27, b: 74, a: 255, bitDepth: 8 }rgb: { r: 5, g: 20, b: 63, a: 255, bitDepth: 8 }rgb: { r: 3, g: 14, b: 53, a: 255, bitDepth: 8 }rgb: { r: 2, g: 7, b: 42, a: 255, bitDepth: 8 }rgb: { r: 0, g: 0, b: 32, a: 255, bitDepth: 8 }

blend

vividlight

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

colordodge

rgb: { r: 68, g: 85, b: 102, a: 255, bitDepth: 8 }rgb: { r: 87, g: 86, b: 107, a: 255, bitDepth: 8 }rgb: { r: 105, g: 88, b: 112, a: 255, bitDepth: 8 }rgb: { r: 124, g: 89, b: 117, a: 255, bitDepth: 8 }rgb: { r: 143, g: 90, b: 122, a: 255, bitDepth: 8 }rgb: { r: 162, g: 92, b: 128, a: 255, bitDepth: 8 }rgb: { r: 180, g: 93, b: 133, a: 255, bitDepth: 8 }rgb: { r: 199, g: 94, b: 138, a: 255, bitDepth: 8 }rgb: { r: 218, g: 95, b: 143, a: 255, bitDepth: 8 }rgb: { r: 236, g: 97, b: 148, a: 255, bitDepth: 8 }rgb: { r: 255, g: 98, b: 153, a: 255, bitDepth: 8 }

blend

colorburn

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 }

blend

vividlight

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

colordodge

rgb: { r: 238, g: 136, b: 34, a: 255, bitDepth: 8 }rgb: { r: 240, g: 148, b: 35, a: 255, bitDepth: 8 }rgb: { r: 241, g: 160, b: 36, a: 255, bitDepth: 8 }rgb: { r: 243, g: 172, b: 38, a: 255, bitDepth: 8 }rgb: { r: 245, g: 184, b: 39, a: 255, bitDepth: 8 }rgb: { r: 247, g: 196, b: 40, a: 255, bitDepth: 8 }rgb: { r: 248, g: 207, b: 41, a: 255, bitDepth: 8 }rgb: { r: 250, g: 219, b: 43, a: 255, bitDepth: 8 }rgb: { r: 252, g: 231, b: 44, a: 255, bitDepth: 8 }rgb: { r: 253, g: 243, b: 45, a: 255, bitDepth: 8 }rgb: { r: 255, g: 255, b: 46, a: 255, bitDepth: 8 }

blend

colorburn

rgb: { r: 238, g: 136, b: 34, a: 255, bitDepth: 8 }rgb: { r: 214, g: 126, b: 31, a: 255, bitDepth: 8 }rgb: { r: 190, g: 115, b: 27, a: 255, bitDepth: 8 }rgb: { r: 167, g: 105, b: 24, a: 255, bitDepth: 8 }rgb: { r: 143, g: 94, b: 20, a: 255, bitDepth: 8 }rgb: { r: 119, g: 84, b: 17, a: 255, bitDepth: 8 }rgb: { r: 95, g: 74, b: 14, a: 255, bitDepth: 8 }rgb: { r: 71, g: 63, b: 10, a: 255, bitDepth: 8 }rgb: { r: 48, g: 53, b: 7, a: 255, bitDepth: 8 }rgb: { r: 24, g: 42, b: 3, a: 255, bitDepth: 8 }rgb: { r: 0, g: 32, b: 0, a: 255, bitDepth: 8 }

blend

vividlight

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 }