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