Skip to main content

Blending by Individual Values

These examples are equivalent to generating a gradient.

The hue method uses HSV.

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

blend

hue

rgb: { r: 17, g: 68, b: 136, a: 255, bitDepth: 8 }rgb: { r: 17, g: 45, b: 136, a: 255, bitDepth: 8 }rgb: { r: 17, g: 22, b: 136, a: 255, bitDepth: 8 }rgb: { r: 35, g: 17, b: 136, a: 255, bitDepth: 8 }rgb: { r: 58, g: 17, b: 136, a: 255, bitDepth: 8 }rgb: { r: 81, g: 17, b: 136, a: 255, bitDepth: 8 }rgb: { r: 104, g: 17, b: 136, a: 255, bitDepth: 8 }rgb: { r: 127, g: 17, b: 136, a: 255, bitDepth: 8 }rgb: { r: 136, g: 17, b: 122, a: 255, bitDepth: 8 }rgb: { r: 136, g: 17, b: 99, a: 255, bitDepth: 8 }rgb: { r: 136, g: 17, b: 77, a: 255, bitDepth: 8 }

blend

value

rgb: { r: 17, g: 68, b: 136, a: 255, bitDepth: 8 }rgb: { r: 18, g: 73, b: 146, a: 255, bitDepth: 8 }rgb: { r: 20, g: 78, b: 156, a: 255, bitDepth: 8 }rgb: { r: 21, g: 83, b: 167, a: 255, bitDepth: 8 }rgb: { r: 22, g: 88, b: 177, a: 255, bitDepth: 8 }rgb: { r: 23, g: 94, b: 187, a: 255, bitDepth: 8 }rgb: { r: 25, g: 99, b: 197, a: 255, bitDepth: 8 }rgb: { r: 26, g: 104, b: 207, a: 255, bitDepth: 8 }rgb: { r: 27, g: 109, b: 218, a: 255, bitDepth: 8 }rgb: { r: 28, g: 114, b: 228, a: 255, bitDepth: 8 }rgb: { r: 30, g: 119, b: 238, a: 255, bitDepth: 8 }

blend

lightness

rgb: { r: 17, g: 68, b: 136, a: 255, bitDepth: 8 }rgb: { r: 18, g: 73, b: 147, a: 255, bitDepth: 8 }rgb: { r: 20, g: 79, b: 157, a: 255, bitDepth: 8 }rgb: { r: 21, g: 84, b: 168, a: 255, bitDepth: 8 }rgb: { r: 22, g: 89, b: 178, a: 255, bitDepth: 8 }rgb: { r: 24, g: 94, b: 189, a: 255, bitDepth: 8 }rgb: { r: 25, g: 100, b: 199, a: 255, bitDepth: 8 }rgb: { r: 26, g: 105, b: 210, a: 255, bitDepth: 8 }rgb: { r: 28, g: 110, b: 221, a: 255, bitDepth: 8 }rgb: { r: 33, g: 116, b: 227, a: 255, bitDepth: 8 }rgb: { r: 43, g: 123, b: 229, a: 255, bitDepth: 8 }

blend

intensity

rgb: { r: 17, g: 68, b: 136, a: 255, bitDepth: 8 }rgb: { r: 18, g: 74, b: 148, a: 255, bitDepth: 8 }rgb: { r: 20, g: 80, b: 159, a: 255, bitDepth: 8 }rgb: { r: 21, g: 85, b: 171, a: 255, bitDepth: 8 }rgb: { r: 23, g: 91, b: 182, a: 255, bitDepth: 8 }rgb: { r: 24, g: 97, b: 194, a: 255, bitDepth: 8 }rgb: { r: 26, g: 103, b: 205, a: 255, bitDepth: 8 }rgb: { r: 27, g: 108, b: 217, a: 255, bitDepth: 8 }rgb: { r: 29, g: 114, b: 228, a: 255, bitDepth: 8 }rgb: { r: 30, g: 120, b: 240, a: 255, bitDepth: 8 }rgb: { r: 31, g: 126, b: 251, a: 255, bitDepth: 8 }

blend

perceived

rgb: { r: 17, g: 68, b: 136, a: 255, bitDepth: 8 }rgb: { r: 19, g: 75, b: 150, a: 255, bitDepth: 8 }rgb: { r: 20, g: 82, b: 163, a: 255, bitDepth: 8 }rgb: { r: 22, g: 88, b: 177, a: 255, bitDepth: 8 }rgb: { r: 24, g: 95, b: 191, a: 255, bitDepth: 8 }rgb: { r: 26, g: 102, b: 204, a: 255, bitDepth: 8 }rgb: { r: 27, g: 109, b: 218, a: 255, bitDepth: 8 }rgb: { r: 29, g: 116, b: 232, a: 255, bitDepth: 8 }rgb: { r: 31, g: 123, b: 245, a: 255, bitDepth: 8 }rgb: { r: 32, g: 129, b: 255, a: 255, bitDepth: 8 }rgb: { r: 34, g: 136, 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

hue

rgb: { r: 68, g: 85, b: 102, a: 255, bitDepth: 8 }rgb: { r: 68, g: 77, b: 102, a: 255, bitDepth: 8 }rgb: { r: 68, g: 70, b: 102, a: 255, bitDepth: 8 }rgb: { r: 74, g: 68, b: 102, a: 255, bitDepth: 8 }rgb: { r: 82, g: 68, b: 102, a: 255, bitDepth: 8 }rgb: { r: 90, g: 68, b: 102, a: 255, bitDepth: 8 }rgb: { r: 97, g: 68, b: 102, a: 255, bitDepth: 8 }rgb: { r: 102, g: 68, b: 99, a: 255, bitDepth: 8 }rgb: { r: 102, g: 68, b: 91, a: 255, bitDepth: 8 }rgb: { r: 102, g: 68, b: 84, a: 255, bitDepth: 8 }rgb: { r: 102, g: 68, b: 76, a: 255, bitDepth: 8 }

blend

value

rgb: { r: 68, g: 85, b: 102, a: 255, bitDepth: 8 }rgb: { r: 78, g: 98, b: 117, a: 255, bitDepth: 8 }rgb: { r: 88, g: 110, b: 133, a: 255, bitDepth: 8 }rgb: { r: 99, g: 123, b: 148, a: 255, bitDepth: 8 }rgb: { r: 109, g: 136, b: 163, a: 255, bitDepth: 8 }rgb: { r: 119, g: 149, b: 179, a: 255, bitDepth: 8 }rgb: { r: 129, g: 162, b: 194, a: 255, bitDepth: 8 }rgb: { r: 139, g: 174, b: 209, a: 255, bitDepth: 8 }rgb: { r: 150, g: 187, b: 224, a: 255, bitDepth: 8 }rgb: { r: 160, g: 200, b: 240, a: 255, bitDepth: 8 }rgb: { r: 170, g: 212, b: 255, a: 255, bitDepth: 8 }

blend

lightness

rgb: { r: 68, g: 85, b: 102, a: 255, bitDepth: 8 }rgb: { r: 73, g: 91, b: 109, a: 255, bitDepth: 8 }rgb: { r: 78, g: 97, b: 116, a: 255, bitDepth: 8 }rgb: { r: 82, g: 103, b: 123, a: 255, bitDepth: 8 }rgb: { r: 87, g: 109, b: 131, a: 255, bitDepth: 8 }rgb: { r: 92, g: 115, b: 138, a: 255, bitDepth: 8 }rgb: { r: 97, g: 121, b: 145, a: 255, bitDepth: 8 }rgb: { r: 101, g: 127, b: 152, a: 255, bitDepth: 8 }rgb: { r: 108, g: 133, b: 157, a: 255, bitDepth: 8 }rgb: { r: 115, g: 139, b: 162, a: 255, bitDepth: 8 }rgb: { r: 122, g: 145, b: 167, a: 255, bitDepth: 8 }

blend

intensity

rgb: { r: 68, g: 85, b: 102, a: 255, bitDepth: 8 }rgb: { r: 71, g: 89, b: 107, a: 255, bitDepth: 8 }rgb: { r: 74, g: 93, b: 112, a: 255, bitDepth: 8 }rgb: { r: 78, g: 97, b: 116, a: 255, bitDepth: 8 }rgb: { r: 81, g: 101, b: 121, a: 255, bitDepth: 8 }rgb: { r: 84, g: 105, b: 126, a: 255, bitDepth: 8 }rgb: { r: 87, g: 109, b: 131, a: 255, bitDepth: 8 }rgb: { r: 90, g: 113, b: 135, a: 255, bitDepth: 8 }rgb: { r: 93, g: 117, b: 140, a: 255, bitDepth: 8 }rgb: { r: 97, g: 121, b: 145, a: 255, bitDepth: 8 }rgb: { r: 100, g: 125, b: 150, a: 255, bitDepth: 8 }

blend

perceived

rgb: { r: 68, g: 85, b: 102, a: 255, bitDepth: 8 }rgb: { r: 73, g: 91, b: 110, a: 255, bitDepth: 8 }rgb: { r: 78, g: 98, b: 117, a: 255, bitDepth: 8 }rgb: { r: 83, g: 104, b: 125, a: 255, bitDepth: 8 }rgb: { r: 89, g: 111, b: 133, a: 255, bitDepth: 8 }rgb: { r: 94, g: 117, b: 140, a: 255, bitDepth: 8 }rgb: { r: 99, g: 123, b: 148, a: 255, bitDepth: 8 }rgb: { r: 104, g: 130, b: 156, a: 255, bitDepth: 8 }rgb: { r: 109, g: 136, b: 164, a: 255, bitDepth: 8 }rgb: { r: 114, g: 143, b: 171, a: 255, bitDepth: 8 }rgb: { r: 119, g: 149, b: 179, a: 255, bitDepth: 8 }
let blendedColor: Color.hex[] = Color.from('hex', 'eeccaa')
  .modify('blend', {
    with: Color.from('1133ff'),
    method: /* methods listed below */,
    amount: /* amounts listed below */
  })

blend

hue

rgb: { r: 238, g: 204, b: 170, a: 255, bitDepth: 8 }rgb: { r: 238, g: 227, b: 170, a: 255, bitDepth: 8 }rgb: { r: 226, g: 238, b: 170, a: 255, bitDepth: 8 }rgb: { r: 204, g: 238, b: 170, a: 255, bitDepth: 8 }rgb: { r: 181, g: 238, b: 170, a: 255, bitDepth: 8 }rgb: { r: 170, g: 238, b: 182, a: 255, bitDepth: 8 }rgb: { r: 170, g: 238, b: 205, a: 255, bitDepth: 8 }rgb: { r: 170, g: 238, b: 228, a: 255, bitDepth: 8 }rgb: { r: 170, g: 225, b: 238, a: 255, bitDepth: 8 }rgb: { r: 170, g: 203, b: 238, a: 255, bitDepth: 8 }rgb: { r: 170, g: 180, b: 238, a: 255, bitDepth: 8 }

blend

value

rgb: { r: 238, g: 204, b: 170, a: 255, bitDepth: 8 }rgb: { r: 240, g: 205, b: 171, a: 255, bitDepth: 8 }rgb: { r: 241, g: 207, b: 172, a: 255, bitDepth: 8 }rgb: { r: 243, g: 208, b: 174, a: 255, bitDepth: 8 }rgb: { r: 245, g: 210, b: 175, a: 255, bitDepth: 8 }rgb: { r: 246, g: 211, b: 176, a: 255, bitDepth: 8 }rgb: { r: 248, g: 213, b: 177, a: 255, bitDepth: 8 }rgb: { r: 250, g: 214, b: 178, a: 255, bitDepth: 8 }rgb: { r: 252, g: 216, b: 180, a: 255, bitDepth: 8 }rgb: { r: 253, g: 217, b: 181, a: 255, bitDepth: 8 }rgb: { r: 255, g: 219, b: 182, a: 255, bitDepth: 8 }

blend

lightness

rgb: { r: 238, g: 204, b: 170, a: 255, bitDepth: 8 }rgb: { r: 236, g: 197, b: 159, a: 255, bitDepth: 8 }rgb: { r: 233, g: 190, b: 147, a: 255, bitDepth: 8 }rgb: { r: 231, g: 184, b: 136, a: 255, bitDepth: 8 }rgb: { r: 229, g: 177, b: 125, a: 255, bitDepth: 8 }rgb: { r: 227, g: 170, b: 113, a: 255, bitDepth: 8 }rgb: { r: 224, g: 163, b: 102, a: 255, bitDepth: 8 }rgb: { r: 222, g: 156, b: 91, a: 255, bitDepth: 8 }rgb: { r: 220, g: 150, b: 79, a: 255, bitDepth: 8 }rgb: { r: 218, g: 143, b: 68, a: 255, bitDepth: 8 }rgb: { r: 215, g: 136, b: 57, a: 255, bitDepth: 8 }

blend

intensity

rgb: { r: 238, g: 204, b: 170, a: 255, bitDepth: 8 }rgb: { r: 227, g: 194, b: 162, a: 255, bitDepth: 8 }rgb: { r: 216, g: 185, b: 154, a: 255, bitDepth: 8 }rgb: { r: 204, g: 175, b: 146, a: 255, bitDepth: 8 }rgb: { r: 193, g: 165, b: 138, a: 255, bitDepth: 8 }rgb: { r: 182, g: 156, b: 130, a: 255, bitDepth: 8 }rgb: { r: 171, g: 146, b: 122, a: 255, bitDepth: 8 }rgb: { r: 159, g: 137, b: 114, a: 255, bitDepth: 8 }rgb: { r: 148, g: 127, b: 106, a: 255, bitDepth: 8 }rgb: { r: 137, g: 117, b: 98, a: 255, bitDepth: 8 }rgb: { r: 126, g: 108, b: 90, a: 255, bitDepth: 8 }

blend

perceived

rgb: { r: 238, g: 204, b: 170, a: 255, bitDepth: 8 }rgb: { r: 225, g: 193, b: 161, a: 255, bitDepth: 8 }rgb: { r: 212, g: 182, b: 151, a: 255, bitDepth: 8 }rgb: { r: 199, g: 170, b: 142, a: 255, bitDepth: 8 }rgb: { r: 186, g: 159, b: 133, a: 255, bitDepth: 8 }rgb: { r: 172, g: 148, b: 123, a: 255, bitDepth: 8 }rgb: { r: 159, g: 137, b: 114, a: 255, bitDepth: 8 }rgb: { r: 146, g: 125, b: 104, a: 255, bitDepth: 8 }rgb: { r: 133, g: 114, b: 95, a: 255, bitDepth: 8 }rgb: { r: 120, g: 103, b: 86, a: 255, bitDepth: 8 }rgb: { r: 107, g: 92, b: 76, a: 255, bitDepth: 8 }