Skip to main content

Blending by Other Methods

These examples are equivalent to generating a gradient.

Soft light uses the W3C formula.[11] This formula is similar to the Photoshop formula.

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

blend

softlight

rgb: { r: 17, g: 68, b: 136, a: 255, bitDepth: 8 }rgb: { r: 20, g: 64, b: 136, a: 255, bitDepth: 8 }rgb: { r: 24, g: 61, b: 137, a: 255, bitDepth: 8 }rgb: { r: 27, g: 57, b: 137, a: 255, bitDepth: 8 }rgb: { r: 30, g: 53, b: 137, a: 255, bitDepth: 8 }rgb: { r: 34, g: 50, b: 138, a: 255, bitDepth: 8 }rgb: { r: 37, g: 46, b: 138, a: 255, bitDepth: 8 }rgb: { r: 40, g: 42, b: 138, a: 255, bitDepth: 8 }rgb: { r: 44, g: 39, b: 139, a: 255, bitDepth: 8 }rgb: { r: 47, g: 35, b: 139, a: 255, bitDepth: 8 }rgb: { r: 50, g: 31, b: 139, a: 255, bitDepth: 8 }

blend

divide

rgb: { r: 17, g: 68, b: 136, a: 255, bitDepth: 8 }rgb: { r: 17, g: 87, b: 148, a: 255, bitDepth: 8 }rgb: { r: 17, g: 105, b: 160, a: 255, bitDepth: 8 }rgb: { r: 17, g: 124, b: 172, a: 255, bitDepth: 8 }rgb: { r: 17, g: 143, b: 184, a: 255, bitDepth: 8 }rgb: { r: 18, g: 162, b: 196, a: 255, bitDepth: 8 }rgb: { r: 18, g: 180, b: 207, a: 255, bitDepth: 8 }rgb: { r: 18, g: 199, b: 219, a: 255, bitDepth: 8 }rgb: { r: 18, g: 218, b: 231, a: 255, bitDepth: 8 }rgb: { r: 18, g: 236, b: 243, a: 255, bitDepth: 8 }rgb: { r: 18, g: 255, b: 255, a: 255, bitDepth: 8 }

blend

subtraction

rgb: { r: 17, g: 68, b: 136, a: 255, bitDepth: 8 }rgb: { r: 15, g: 65, b: 122, a: 255, bitDepth: 8 }rgb: { r: 14, g: 61, b: 109, a: 255, bitDepth: 8 }rgb: { r: 12, g: 58, b: 95, a: 255, bitDepth: 8 }rgb: { r: 10, g: 54, b: 82, a: 255, bitDepth: 8 }rgb: { r: 9, g: 51, b: 68, a: 255, bitDepth: 8 }rgb: { r: 7, g: 48, b: 54, a: 255, bitDepth: 8 }rgb: { r: 5, g: 44, b: 41, a: 255, bitDepth: 8 }rgb: { r: 3, g: 41, b: 27, a: 255, bitDepth: 8 }rgb: { r: 2, g: 37, b: 14, a: 255, bitDepth: 8 }rgb: { r: 0, g: 34, b: 0, a: 255, bitDepth: 8 }

blend

difference

rgb: { r: 17, g: 68, b: 136, a: 255, bitDepth: 8 }rgb: { r: 37, g: 65, b: 122, a: 255, bitDepth: 8 }rgb: { r: 58, g: 61, b: 109, a: 255, bitDepth: 8 }rgb: { r: 78, g: 58, b: 95, a: 255, bitDepth: 8 }rgb: { r: 99, g: 54, b: 82, a: 255, bitDepth: 8 }rgb: { r: 119, g: 51, b: 68, a: 255, bitDepth: 8 }rgb: { r: 139, g: 48, b: 54, a: 255, bitDepth: 8 }rgb: { r: 160, g: 44, b: 41, a: 255, bitDepth: 8 }rgb: { r: 180, g: 41, b: 27, a: 255, bitDepth: 8 }rgb: { r: 201, g: 37, b: 14, a: 255, bitDepth: 8 }rgb: { r: 221, g: 34, b: 0, 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

softlight

rgb: { r: 68, g: 85, b: 102, a: 255, bitDepth: 8 }rgb: { r: 74, g: 81, b: 100, a: 255, bitDepth: 8 }rgb: { r: 81, g: 77, b: 98, a: 255, bitDepth: 8 }rgb: { r: 87, g: 73, b: 96, a: 255, bitDepth: 8 }rgb: { r: 93, g: 68, b: 94, a: 255, bitDepth: 8 }rgb: { r: 100, g: 64, b: 92, a: 255, bitDepth: 8 }rgb: { r: 106, g: 60, b: 90, a: 255, bitDepth: 8 }rgb: { r: 113, g: 56, b: 88, a: 255, bitDepth: 8 }rgb: { r: 119, g: 52, b: 86, a: 255, bitDepth: 8 }rgb: { r: 125, g: 48, b: 84, a: 255, bitDepth: 8 }rgb: { r: 132, g: 43, b: 82, a: 255, bitDepth: 8 }

blend

divide

rgb: { r: 68, g: 85, b: 102, a: 255, bitDepth: 8 }rgb: { r: 68, g: 102, b: 117, a: 255, bitDepth: 8 }rgb: { r: 68, g: 119, b: 133, a: 255, bitDepth: 8 }rgb: { r: 68, g: 136, b: 148, a: 255, bitDepth: 8 }rgb: { r: 68, g: 153, b: 163, a: 255, bitDepth: 8 }rgb: { r: 68, g: 170, b: 179, a: 255, bitDepth: 8 }rgb: { r: 68, g: 187, b: 194, a: 255, bitDepth: 8 }rgb: { r: 68, g: 204, b: 209, a: 255, bitDepth: 8 }rgb: { r: 68, g: 221, b: 224, a: 255, bitDepth: 8 }rgb: { r: 68, g: 238, b: 240, a: 255, bitDepth: 8 }rgb: { r: 68, g: 255, b: 255, a: 255, bitDepth: 8 }

blend

subtraction

rgb: { r: 68, g: 85, b: 102, a: 255, bitDepth: 8 }rgb: { r: 61, g: 82, b: 94, a: 255, bitDepth: 8 }rgb: { r: 54, g: 78, b: 85, a: 255, bitDepth: 8 }rgb: { r: 48, g: 75, b: 77, a: 255, bitDepth: 8 }rgb: { r: 41, g: 71, b: 68, a: 255, bitDepth: 8 }rgb: { r: 34, g: 68, b: 60, a: 255, bitDepth: 8 }rgb: { r: 27, g: 65, b: 51, a: 255, bitDepth: 8 }rgb: { r: 20, g: 61, b: 43, a: 255, bitDepth: 8 }rgb: { r: 14, g: 58, b: 34, a: 255, bitDepth: 8 }rgb: { r: 7, g: 54, b: 26, a: 255, bitDepth: 8 }rgb: { r: 0, g: 51, b: 17, a: 255, bitDepth: 8 }

blend

difference

rgb: { r: 68, g: 85, b: 102, a: 255, bitDepth: 8 }rgb: { r: 80, g: 82, b: 94, a: 255, bitDepth: 8 }rgb: { r: 92, g: 78, b: 85, a: 255, bitDepth: 8 }rgb: { r: 104, g: 75, b: 77, a: 255, bitDepth: 8 }rgb: { r: 116, g: 71, b: 68, a: 255, bitDepth: 8 }rgb: { r: 128, g: 68, b: 60, a: 255, bitDepth: 8 }rgb: { r: 139, g: 65, b: 51, a: 255, bitDepth: 8 }rgb: { r: 151, g: 61, b: 43, a: 255, bitDepth: 8 }rgb: { r: 163, g: 58, b: 34, a: 255, bitDepth: 8 }rgb: { r: 175, g: 54, b: 26, a: 255, bitDepth: 8 }rgb: { r: 187, g: 51, b: 17, 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

softlight

rgb: { r: 238, g: 136, b: 34, a: 255, bitDepth: 8 }rgb: { r: 237, g: 136, b: 33, a: 255, bitDepth: 8 }rgb: { r: 235, g: 137, b: 31, a: 255, bitDepth: 8 }rgb: { r: 234, g: 137, b: 30, a: 255, bitDepth: 8 }rgb: { r: 232, g: 137, b: 28, a: 255, bitDepth: 8 }rgb: { r: 231, g: 138, b: 27, a: 255, bitDepth: 8 }rgb: { r: 230, g: 138, b: 26, a: 255, bitDepth: 8 }rgb: { r: 228, g: 138, b: 24, a: 255, bitDepth: 8 }rgb: { r: 227, g: 139, b: 23, a: 255, bitDepth: 8 }rgb: { r: 226, g: 139, b: 22, a: 255, bitDepth: 8 }rgb: { r: 224, g: 139, b: 20, a: 255, bitDepth: 8 }

blend

divide

rgb: { r: 238, g: 136, b: 34, a: 255, bitDepth: 8 }rgb: { r: 240, g: 148, b: 43, a: 255, bitDepth: 8 }rgb: { r: 241, g: 160, b: 53, a: 255, bitDepth: 8 }rgb: { r: 243, g: 172, b: 62, a: 255, bitDepth: 8 }rgb: { r: 245, g: 184, b: 71, a: 255, bitDepth: 8 }rgb: { r: 247, g: 196, b: 81, a: 255, bitDepth: 8 }rgb: { r: 248, g: 207, b: 90, a: 255, bitDepth: 8 }rgb: { r: 250, g: 219, b: 99, a: 255, bitDepth: 8 }rgb: { r: 252, g: 231, b: 109, a: 255, bitDepth: 8 }rgb: { r: 253, g: 243, b: 118, a: 255, bitDepth: 8 }rgb: { r: 255, g: 255, b: 128, a: 255, bitDepth: 8 }

blend

subtraction

rgb: { r: 238, g: 136, b: 34, a: 255, bitDepth: 8 }rgb: { r: 236, g: 122, b: 31, a: 255, bitDepth: 8 }rgb: { r: 235, g: 109, b: 27, a: 255, bitDepth: 8 }rgb: { r: 233, g: 95, b: 24, a: 255, bitDepth: 8 }rgb: { r: 231, g: 82, b: 20, a: 255, bitDepth: 8 }rgb: { r: 230, g: 68, b: 17, a: 255, bitDepth: 8 }rgb: { r: 228, g: 54, b: 14, a: 255, bitDepth: 8 }rgb: { r: 226, g: 41, b: 10, a: 255, bitDepth: 8 }rgb: { r: 224, g: 27, b: 7, a: 255, bitDepth: 8 }rgb: { r: 223, g: 14, b: 3, a: 255, bitDepth: 8 }rgb: { r: 221, g: 0, b: 0, a: 255, bitDepth: 8 }

blend

difference

rgb: { r: 238, g: 136, b: 34, a: 255, bitDepth: 8 }rgb: { r: 236, g: 122, b: 34, a: 255, bitDepth: 8 }rgb: { r: 235, g: 109, b: 34, a: 255, bitDepth: 8 }rgb: { r: 233, g: 95, b: 34, a: 255, bitDepth: 8 }rgb: { r: 231, g: 82, b: 34, a: 255, bitDepth: 8 }rgb: { r: 230, g: 68, b: 34, a: 255, bitDepth: 8 }rgb: { r: 228, g: 54, b: 34, a: 255, bitDepth: 8 }rgb: { r: 226, g: 41, b: 34, a: 255, bitDepth: 8 }rgb: { r: 224, g: 27, b: 34, a: 255, bitDepth: 8 }rgb: { r: 223, g: 14, b: 34, a: 255, bitDepth: 8 }rgb: { r: 221, g: 0, b: 34, a: 255, bitDepth: 8 }