Skip to main content

Blending by Screen & Multiply

These examples are equivalent to generating a gradient.

Overlay is the equivalent of screen when the value in the second color is above middle gray and multiply 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

screen

rgb: { r: 17, g: 68, b: 136, a: 255, bitDepth: 8 }rgb: { r: 39, g: 70, b: 142, a: 255, bitDepth: 8 }rgb: { r: 61, g: 73, b: 149, a: 255, bitDepth: 8 }rgb: { r: 84, g: 75, b: 155, a: 255, bitDepth: 8 }rgb: { r: 106, g: 78, b: 161, a: 255, bitDepth: 8 }rgb: { r: 128, g: 80, b: 168, a: 255, bitDepth: 8 }rgb: { r: 150, g: 83, b: 174, a: 255, bitDepth: 8 }rgb: { r: 172, g: 85, b: 180, a: 255, bitDepth: 8 }rgb: { r: 195, g: 88, b: 187, a: 255, bitDepth: 8 }rgb: { r: 217, g: 90, b: 193, a: 255, bitDepth: 8 }rgb: { r: 239, g: 93, b: 199, a: 255, bitDepth: 8 }

blend

multiply

rgb: { r: 17, g: 68, b: 136, a: 255, bitDepth: 8 }rgb: { r: 17, g: 62, b: 130, a: 255, bitDepth: 8 }rgb: { r: 17, g: 56, b: 123, a: 255, bitDepth: 8 }rgb: { r: 17, g: 50, b: 117, a: 255, bitDepth: 8 }rgb: { r: 17, g: 44, b: 111, a: 255, bitDepth: 8 }rgb: { r: 16, g: 39, b: 104, a: 255, bitDepth: 8 }rgb: { r: 16, g: 33, b: 98, a: 255, bitDepth: 8 }rgb: { r: 16, g: 27, b: 92, a: 255, bitDepth: 8 }rgb: { r: 16, g: 21, b: 85, a: 255, bitDepth: 8 }rgb: { r: 16, g: 15, b: 79, a: 255, bitDepth: 8 }rgb: { r: 16, g: 9, b: 73, a: 255, bitDepth: 8 }

blend

overlay

rgb: { r: 17, g: 68, b: 136, a: 255, bitDepth: 8 }rgb: { r: 18, g: 63, b: 137, a: 255, bitDepth: 8 }rgb: { r: 20, g: 58, b: 138, a: 255, bitDepth: 8 }rgb: { r: 21, g: 53, b: 138, a: 255, bitDepth: 8 }rgb: { r: 23, g: 48, b: 139, a: 255, bitDepth: 8 }rgb: { r: 24, g: 43, b: 140, a: 255, bitDepth: 8 }rgb: { r: 26, g: 38, b: 141, a: 255, bitDepth: 8 }rgb: { r: 27, g: 33, b: 142, a: 255, bitDepth: 8 }rgb: { r: 29, g: 28, b: 142, a: 255, bitDepth: 8 }rgb: { r: 30, g: 23, b: 143, a: 255, bitDepth: 8 }rgb: { r: 32, g: 18, b: 144, 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

screen

rgb: { r: 68, g: 85, b: 102, a: 255, bitDepth: 8 }rgb: { r: 87, g: 87, b: 107, a: 255, bitDepth: 8 }rgb: { r: 105, g: 90, b: 112, a: 255, bitDepth: 8 }rgb: { r: 124, g: 92, b: 117, a: 255, bitDepth: 8 }rgb: { r: 143, g: 94, b: 122, a: 255, bitDepth: 8 }rgb: { r: 162, g: 96, b: 128, a: 255, bitDepth: 8 }rgb: { r: 180, g: 99, b: 133, a: 255, bitDepth: 8 }rgb: { r: 199, g: 101, b: 138, a: 255, bitDepth: 8 }rgb: { r: 218, g: 103, b: 143, a: 255, bitDepth: 8 }rgb: { r: 236, g: 105, b: 148, a: 255, bitDepth: 8 }rgb: { r: 255, g: 108, b: 153, a: 255, bitDepth: 8 }

blend

multiply

rgb: { r: 68, g: 85, b: 102, a: 255, bitDepth: 8 }rgb: { r: 68, g: 78, b: 95, a: 255, bitDepth: 8 }rgb: { r: 68, g: 70, b: 88, a: 255, bitDepth: 8 }rgb: { r: 68, g: 63, b: 82, a: 255, bitDepth: 8 }rgb: { r: 68, g: 56, b: 75, a: 255, bitDepth: 8 }rgb: { r: 68, g: 48, b: 68, a: 255, bitDepth: 8 }rgb: { r: 68, g: 41, b: 61, a: 255, bitDepth: 8 }rgb: { r: 68, g: 33, b: 54, a: 255, bitDepth: 8 }rgb: { r: 68, g: 26, b: 48, a: 255, bitDepth: 8 }rgb: { r: 68, g: 19, b: 41, a: 255, bitDepth: 8 }rgb: { r: 68, g: 11, b: 34, a: 255, bitDepth: 8 }

blend

overlay

rgb: { r: 68, g: 85, b: 102, a: 255, bitDepth: 8 }rgb: { r: 75, g: 79, b: 99, a: 255, bitDepth: 8 }rgb: { r: 82, g: 73, b: 95, a: 255, bitDepth: 8 }rgb: { r: 88, g: 66, b: 92, a: 255, bitDepth: 8 }rgb: { r: 95, g: 60, b: 88, a: 255, bitDepth: 8 }rgb: { r: 102, g: 54, b: 85, a: 255, bitDepth: 8 }rgb: { r: 109, g: 48, b: 82, a: 255, bitDepth: 8 }rgb: { r: 116, g: 41, b: 78, a: 255, bitDepth: 8 }rgb: { r: 122, g: 35, b: 75, a: 255, bitDepth: 8 }rgb: { r: 129, g: 29, b: 71, a: 255, bitDepth: 8 }rgb: { r: 136, g: 23, b: 68, 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

screen

rgb: { r: 238, g: 136, b: 34, a: 255, bitDepth: 8 }rgb: { r: 238, g: 142, b: 40, a: 255, bitDepth: 8 }rgb: { r: 238, g: 149, b: 46, a: 255, bitDepth: 8 }rgb: { r: 238, g: 155, b: 52, a: 255, bitDepth: 8 }rgb: { r: 238, g: 161, b: 58, a: 255, bitDepth: 8 }rgb: { r: 239, g: 168, b: 63, a: 255, bitDepth: 8 }rgb: { r: 239, g: 174, b: 69, a: 255, bitDepth: 8 }rgb: { r: 239, g: 180, b: 75, a: 255, bitDepth: 8 }rgb: { r: 239, g: 187, b: 81, a: 255, bitDepth: 8 }rgb: { r: 239, g: 193, b: 87, a: 255, bitDepth: 8 }rgb: { r: 239, g: 199, b: 93, a: 255, bitDepth: 8 }

blend

multiply

rgb: { r: 238, g: 136, b: 34, a: 255, bitDepth: 8 }rgb: { r: 216, g: 130, b: 32, a: 255, bitDepth: 8 }rgb: { r: 194, g: 123, b: 29, a: 255, bitDepth: 8 }rgb: { r: 171, g: 117, b: 27, a: 255, bitDepth: 8 }rgb: { r: 149, g: 111, b: 24, a: 255, bitDepth: 8 }rgb: { r: 127, g: 104, b: 22, a: 255, bitDepth: 8 }rgb: { r: 105, g: 98, b: 19, a: 255, bitDepth: 8 }rgb: { r: 83, g: 92, b: 17, a: 255, bitDepth: 8 }rgb: { r: 60, g: 85, b: 14, a: 255, bitDepth: 8 }rgb: { r: 38, g: 79, b: 12, a: 255, bitDepth: 8 }rgb: { r: 16, g: 73, b: 9, a: 255, bitDepth: 8 }

blend

overlay

rgb: { r: 238, g: 136, b: 34, a: 255, bitDepth: 8 }rgb: { r: 237, g: 137, b: 32, a: 255, bitDepth: 8 }rgb: { r: 235, g: 138, b: 31, a: 255, bitDepth: 8 }rgb: { r: 234, g: 138, b: 29, a: 255, bitDepth: 8 }rgb: { r: 232, g: 139, b: 28, a: 255, bitDepth: 8 }rgb: { r: 231, g: 140, b: 26, a: 255, bitDepth: 8 }rgb: { r: 229, g: 141, b: 24, a: 255, bitDepth: 8 }rgb: { r: 228, g: 142, b: 23, a: 255, bitDepth: 8 }rgb: { r: 226, g: 142, b: 21, a: 255, bitDepth: 8 }rgb: { r: 225, g: 143, b: 20, a: 255, bitDepth: 8 }rgb: { r: 223, g: 144, b: 18, a: 255, bitDepth: 8 }