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 */
})