Gradient Examples

These examples are equivalent to building an array of blended colors.

let scheme: Color.hex[] = Color.from('hex', 'ee2288')
  .scheme('gradient', {
    with: Color.from('114488'),
    method: /* methods listed below */,
    colors: 10
  })

gradient

hsl

hsl:{"h":330,"s":86,"l":53,"a":100}ee2288hsl:{"h":317,"s":85,"l":51,"a":100}ec17afhsl:{"h":304,"s":84,"l":48,"a":100}e214d3hsl:{"h":291,"s":83,"l":46,"a":100}b914d5hsl:{"h":278,"s":82,"l":43,"a":100}8714c8hsl:{"h":266,"s":82,"l":40,"a":100}5b13bbhsl:{"h":253,"s":80,"l":38,"a":100}3413aehsl:{"h":240,"s":80,"l":35,"a":100}1212a1hsl:{"h":227,"s":78,"l":33,"a":100}122e94hsl:{"h":214,"s":78,"l":30,"a":100}114488

gradient

hsp

hsp:{"h":330,"s":86,"p":55,"a":100,"pb":0.114,"pr":0.299}ee2288hsp:{"h":317,"s":86,"p":52,"a":100,"pb":0.114,"pr":0.299}d81ea3hsp:{"h":304,"s":86,"p":49,"a":100,"pb":0.114,"pr":0.299}c31bb7hsp:{"h":291,"s":86,"p":46,"a":100,"pb":0.114,"pr":0.299}ac1bc4hsp:{"h":279,"s":87,"p":43,"a":100,"pb":0.114,"pr":0.299}921cd3hsp:{"h":266,"s":87,"p":40,"a":100,"pb":0.114,"pr":0.299}721ee2hsp:{"h":253,"s":87,"p":37,"a":100,"pb":0.114,"pr":0.299}4c1feehsp:{"h":240,"s":87,"p":34,"a":100,"pb":0.114,"pr":0.299}1f1fefhsp:{"h":227,"s":87,"p":30,"a":100,"pb":0.114,"pr":0.299}183ab9hsp:{"h":214,"s":88,"p":27,"a":100,"pb":0.114,"pr":0.299}114488

gradient

rgb

rgb:{"r":238,"g":34,"b":136,"a":255,"bitDepth":8}ee2288rgb:{"r":213,"g":38,"b":136,"a":255,"bitDepth":8}d52688rgb:{"r":189,"g":42,"b":136,"a":255,"bitDepth":8}bd2a88rgb:{"r":164,"g":45,"b":136,"a":255,"bitDepth":8}a42d88rgb:{"r":140,"g":49,"b":136,"a":255,"bitDepth":8}8c3188rgb:{"r":115,"g":53,"b":136,"a":255,"bitDepth":8}733588rgb:{"r":91,"g":57,"b":136,"a":255,"bitDepth":8}5b3988rgb:{"r":66,"g":60,"b":136,"a":255,"bitDepth":8}423c88rgb:{"r":42,"g":64,"b":136,"a":255,"bitDepth":8}2a4088rgb:{"r":17,"g":68,"b":136,"a":255,"bitDepth":8}114488

gradient

lab

lab:{"l":53,"a":78,"b":-4}ee2288lab:{"l":51,"a":70,"b":-8}db2f88lab:{"l":48,"a":63,"b":-12}c73788lab:{"l":45,"a":56,"b":-17}b33c88lab:{"l":42,"a":48,"b":-21}9f4088lab:{"l":40,"a":41,"b":-25}8b4388lab:{"l":37,"a":33,"b":-30}754488lab:{"l":35,"a":26,"b":-34}5d4588lab:{"l":32,"a":18,"b":-38}414588lab:{"l":29,"a":11,"b":-43}114488

gradient

hue

rgb:{"r":238,"g":34,"b":136,"a":255,"bitDepth":8}ee2288rgb:{"r":238,"g":34,"b":175,"a":255,"bitDepth":8}ee22afrgb:{"r":238,"g":34,"b":215,"a":255,"bitDepth":8}ee22d7rgb:{"r":222,"g":34,"b":238,"a":255,"bitDepth":8}de22eergb:{"r":183,"g":34,"b":238,"a":255,"bitDepth":8}b722eergb:{"r":143,"g":34,"b":238,"a":255,"bitDepth":8}8f22eergb:{"r":104,"g":34,"b":238,"a":255,"bitDepth":8}6822eergb:{"r":65,"g":34,"b":238,"a":255,"bitDepth":8}4122eergb:{"r":34,"g":43,"b":238,"a":255,"bitDepth":8}222beergb:{"r":34,"g":82,"b":238,"a":255,"bitDepth":8}2252ee

gradient

intensity

rgb:{"r":238,"g":34,"b":136,"a":255,"bitDepth":8}ee2288rgb:{"r":227,"g":32,"b":130,"a":255,"bitDepth":8}e32082rgb:{"r":216,"g":31,"b":124,"a":255,"bitDepth":8}d81f7crgb:{"r":205,"g":29,"b":117,"a":255,"bitDepth":8}cd1d75rgb:{"r":194,"g":28,"b":111,"a":255,"bitDepth":8}c21c6frgb:{"r":183,"g":26,"b":105,"a":255,"bitDepth":8}b71a69rgb:{"r":173,"g":25,"b":99,"a":255,"bitDepth":8}ad1963rgb:{"r":162,"g":23,"b":92,"a":255,"bitDepth":8}a2175crgb:{"r":151,"g":22,"b":86,"a":255,"bitDepth":8}971656rgb:{"r":140,"g":20,"b":80,"a":255,"bitDepth":8}8c1450

gradient

multiply

rgb:{"r":238,"g":34,"b":136,"a":255,"bitDepth":8}ee2288rgb:{"r":216,"g":32,"b":130,"a":255,"bitDepth":8}d82082rgb:{"r":194,"g":29,"b":123,"a":255,"bitDepth":8}c21d7brgb:{"r":171,"g":27,"b":117,"a":255,"bitDepth":8}ab1b75rgb:{"r":149,"g":24,"b":111,"a":255,"bitDepth":8}95186frgb:{"r":127,"g":22,"b":104,"a":255,"bitDepth":8}7f1668rgb:{"r":105,"g":19,"b":98,"a":255,"bitDepth":8}691362rgb:{"r":83,"g":17,"b":92,"a":255,"bitDepth":8}53115crgb:{"r":60,"g":14,"b":85,"a":255,"bitDepth":8}3c0e55rgb:{"r":38,"g":12,"b":79,"a":255,"bitDepth":8}260c4f

gradient

colordodge

rgb:{"r":238,"g":34,"b":136,"a":255,"bitDepth":8}ee2288rgb:{"r":240,"g":35,"b":148,"a":255,"bitDepth":8}f02394rgb:{"r":241,"g":36,"b":160,"a":255,"bitDepth":8}f124a0rgb:{"r":243,"g":38,"b":172,"a":255,"bitDepth":8}f326acrgb:{"r":245,"g":39,"b":184,"a":255,"bitDepth":8}f527b8rgb:{"r":247,"g":40,"b":196,"a":255,"bitDepth":8}f728c4rgb:{"r":248,"g":41,"b":207,"a":255,"bitDepth":8}f829cfrgb:{"r":250,"g":43,"b":219,"a":255,"bitDepth":8}fa2bdbrgb:{"r":252,"g":44,"b":231,"a":255,"bitDepth":8}fc2ce7rgb:{"r":253,"g":45,"b":243,"a":255,"bitDepth":8}fd2df3

gradient

difference

rgb:{"r":238,"g":34,"b":136,"a":255,"bitDepth":8}ee2288rgb:{"r":236,"g":34,"b":122,"a":255,"bitDepth":8}ec227argb:{"r":235,"g":34,"b":109,"a":255,"bitDepth":8}eb226drgb:{"r":233,"g":34,"b":95,"a":255,"bitDepth":8}e9225frgb:{"r":231,"g":34,"b":82,"a":255,"bitDepth":8}e72252rgb:{"r":230,"g":34,"b":68,"a":255,"bitDepth":8}e62244rgb:{"r":228,"g":34,"b":54,"a":255,"bitDepth":8}e42236rgb:{"r":226,"g":34,"b":41,"a":255,"bitDepth":8}e22229rgb:{"r":224,"g":34,"b":27,"a":255,"bitDepth":8}e0221brgb:{"r":223,"g":34,"b":14,"a":255,"bitDepth":8}df220e

let scheme: Color.hex[] = Color.from('hex', '445566')
  .scheme('gradient', {
    with: Color.from('ff2255'),
    method: /* methods listed below */,
    colors: 10
  })

gradient

hsl

hsl:{"h":210,"s":20,"l":33,"a":100}445566hsl:{"h":225,"s":29,"l":36,"a":100}414e76hsl:{"h":240,"s":38,"l":38,"a":100}3d3d87hsl:{"h":255,"s":47,"l":41,"a":100}51389ahsl:{"h":271,"s":55,"l":44,"a":100}7132adhsl:{"h":286,"s":64,"l":46,"a":100}9e2ac2hsl:{"h":301,"s":73,"l":49,"a":100}d821d6hsl:{"h":316,"s":82,"l":52,"a":100}e91eb3hsl:{"h":331,"s":91,"l":54,"a":100}f51f86hsl:{"h":346,"s":100,"l":57,"a":100}ff2255

gradient

hsp

hsp:{"h":210,"s":33,"p":32,"a":100,"pb":0.114,"pr":0.299}445566hsp:{"h":225,"s":39,"p":35,"a":100,"pb":0.114,"pr":0.299}4c587dhsp:{"h":240,"s":45,"p":38,"a":100,"pb":0.114,"pr":0.299}56569chsp:{"h":255,"s":51,"p":40,"a":100,"pb":0.114,"pr":0.299}6953aahsp:{"h":271,"s":57,"p":43,"a":100,"pb":0.114,"pr":0.299}814db3hsp:{"h":285,"s":63,"p":46,"a":100,"pb":0.114,"pr":0.299}9b44b7hsp:{"h":300,"s":69,"p":49,"a":100,"pb":0.114,"pr":0.299}b538b4hsp:{"h":316,"s":75,"p":51,"a":100,"pb":0.114,"pr":0.299}cd34a4hsp:{"h":331,"s":81,"p":54,"a":100,"pb":0.114,"pr":0.299}e62c86hsp:{"h":346,"s":87,"p":57,"a":100,"pb":0.114,"pr":0.299}ff2255

gradient

rgb

rgb:{"r":68,"g":85,"b":102,"a":255,"bitDepth":8}445566rgb:{"r":89,"g":79,"b":100,"a":255,"bitDepth":8}594f64rgb:{"r":110,"g":74,"b":98,"a":255,"bitDepth":8}6e4a62rgb:{"r":130,"g":68,"b":96,"a":255,"bitDepth":8}824460rgb:{"r":151,"g":62,"b":94,"a":255,"bitDepth":8}973e5ergb:{"r":172,"g":57,"b":93,"a":255,"bitDepth":8}ac395drgb:{"r":193,"g":51,"b":91,"a":255,"bitDepth":8}c1335brgb:{"r":213,"g":45,"b":89,"a":255,"bitDepth":8}d52d59rgb:{"r":234,"g":40,"b":87,"a":255,"bitDepth":8}ea2857rgb:{"r":255,"g":34,"b":85,"a":255,"bitDepth":8}ff2255

gradient

lab

lab:{"l":35,"a":-2,"b":-12}445566lab:{"l":37,"a":7,"b":-7}5e5564lab:{"l":40,"a":15,"b":-2}755562lab:{"l":42,"a":25,"b":2}8a5360lab:{"l":44,"a":33,"b":7}9e515flab:{"l":46,"a":43,"b":11}b24d5dlab:{"l":49,"a":52,"b":16}c6475blab:{"l":51,"a":61,"b":21}d94059lab:{"l":53,"a":70,"b":25}ec3457lab:{"l":55,"a":79,"b":30}ff2255

gradient

hue

rgb:{"r":68,"g":85,"b":102,"a":255,"bitDepth":8}445566rgb:{"r":68,"g":77,"b":102,"a":255,"bitDepth":8}444d66rgb:{"r":68,"g":70,"b":102,"a":255,"bitDepth":8}444666rgb:{"r":74,"g":68,"b":102,"a":255,"bitDepth":8}4a4466rgb:{"r":82,"g":68,"b":102,"a":255,"bitDepth":8}524466rgb:{"r":90,"g":68,"b":102,"a":255,"bitDepth":8}5a4466rgb:{"r":97,"g":68,"b":102,"a":255,"bitDepth":8}614466rgb:{"r":102,"g":68,"b":99,"a":255,"bitDepth":8}664463rgb:{"r":102,"g":68,"b":91,"a":255,"bitDepth":8}66445brgb:{"r":102,"g":68,"b":84,"a":255,"bitDepth":8}664454

gradient

intensity

rgb:{"r":68,"g":85,"b":102,"a":255,"bitDepth":8}445566rgb:{"r":71,"g":89,"b":107,"a":255,"bitDepth":8}47596brgb:{"r":74,"g":93,"b":112,"a":255,"bitDepth":8}4a5d70rgb:{"r":78,"g":97,"b":116,"a":255,"bitDepth":8}4e6174rgb:{"r":81,"g":101,"b":121,"a":255,"bitDepth":8}516579rgb:{"r":84,"g":105,"b":126,"a":255,"bitDepth":8}54697ergb:{"r":87,"g":109,"b":131,"a":255,"bitDepth":8}576d83rgb:{"r":90,"g":113,"b":135,"a":255,"bitDepth":8}5a7187rgb:{"r":93,"g":117,"b":140,"a":255,"bitDepth":8}5d758crgb:{"r":97,"g":121,"b":145,"a":255,"bitDepth":8}617991

gradient

multiply

rgb:{"r":68,"g":85,"b":102,"a":255,"bitDepth":8}445566rgb:{"r":68,"g":78,"b":95,"a":255,"bitDepth":8}444e5frgb:{"r":68,"g":70,"b":88,"a":255,"bitDepth":8}444658rgb:{"r":68,"g":63,"b":82,"a":255,"bitDepth":8}443f52rgb:{"r":68,"g":56,"b":75,"a":255,"bitDepth":8}44384brgb:{"r":68,"g":48,"b":68,"a":255,"bitDepth":8}443044rgb:{"r":68,"g":41,"b":61,"a":255,"bitDepth":8}44293drgb:{"r":68,"g":33,"b":54,"a":255,"bitDepth":8}442136rgb:{"r":68,"g":26,"b":48,"a":255,"bitDepth":8}441a30rgb:{"r":68,"g":19,"b":41,"a":255,"bitDepth":8}441329

gradient

colordodge

rgb:{"r":68,"g":85,"b":102,"a":255,"bitDepth":8}445566rgb:{"r":87,"g":86,"b":107,"a":255,"bitDepth":8}57566brgb:{"r":105,"g":88,"b":112,"a":255,"bitDepth":8}695870rgb:{"r":124,"g":89,"b":117,"a":255,"bitDepth":8}7c5975rgb:{"r":143,"g":90,"b":122,"a":255,"bitDepth":8}8f5a7argb:{"r":162,"g":92,"b":128,"a":255,"bitDepth":8}a25c80rgb:{"r":180,"g":93,"b":133,"a":255,"bitDepth":8}b45d85rgb:{"r":199,"g":94,"b":138,"a":255,"bitDepth":8}c75e8argb:{"r":218,"g":95,"b":143,"a":255,"bitDepth":8}da5f8frgb:{"r":236,"g":97,"b":148,"a":255,"bitDepth":8}ec6194

gradient

difference

rgb:{"r":68,"g":85,"b":102,"a":255,"bitDepth":8}445566rgb:{"r":80,"g":82,"b":94,"a":255,"bitDepth":8}50525ergb:{"r":92,"g":78,"b":85,"a":255,"bitDepth":8}5c4e55rgb:{"r":104,"g":75,"b":77,"a":255,"bitDepth":8}684b4drgb:{"r":116,"g":71,"b":68,"a":255,"bitDepth":8}744744rgb:{"r":128,"g":68,"b":60,"a":255,"bitDepth":8}80443crgb:{"r":139,"g":65,"b":51,"a":255,"bitDepth":8}8b4133rgb:{"r":151,"g":61,"b":43,"a":255,"bitDepth":8}973d2brgb:{"r":163,"g":58,"b":34,"a":255,"bitDepth":8}a33a22rgb:{"r":175,"g":54,"b":26,"a":255,"bitDepth":8}af361a

let scheme: Color.hex[] = Color.from('hex', 'ee8822')
  .scheme('gradient', {
    with: Color.from('118844'),
    method: /* methods listed below */,
    colors: 10
  })

gradient

hsl

hsl:{"h":30,"s":86,"l":53,"a":100}ee8822hsl:{"h":43,"s":85,"l":51,"a":100}ecaf17hsl:{"h":56,"s":84,"l":48,"a":100}e2d314hsl:{"h":69,"s":83,"l":46,"a":100}b9d514hsl:{"h":82,"s":82,"l":43,"a":100}87c814hsl:{"h":94,"s":82,"l":40,"a":100}5bbb13hsl:{"h":107,"s":80,"l":38,"a":100}34ae13hsl:{"h":120,"s":80,"l":35,"a":100}12a112hsl:{"h":133,"s":78,"l":33,"a":100}12942ehsl:{"h":146,"s":78,"l":30,"a":100}118844

gradient

hsp

hsp:{"h":30,"s":86,"p":66,"a":100,"pb":0.114,"pr":0.299}ee8822hsp:{"h":43,"s":86,"p":63,"a":100,"pb":0.114,"pr":0.299}c9981chsp:{"h":56,"s":86,"p":60,"a":100,"pb":0.114,"pr":0.299}aaa018hsp:{"h":69,"s":87,"p":58,"a":100,"pb":0.114,"pr":0.299}8fa316hsp:{"h":82,"s":87,"p":55,"a":100,"pb":0.114,"pr":0.299}71a416hsp:{"h":94,"s":87,"p":52,"a":100,"pb":0.114,"pr":0.299}53a416hsp:{"h":107,"s":87,"p":50,"a":100,"pb":0.114,"pr":0.299}33a215hsp:{"h":120,"s":87,"p":47,"a":100,"pb":0.114,"pr":0.299}149c14hsp:{"h":133,"s":87,"p":45,"a":100,"pb":0.114,"pr":0.299}13932ehsp:{"h":146,"s":88,"p":42,"a":100,"pb":0.114,"pr":0.299}118844

gradient

rgb

rgb:{"r":238,"g":136,"b":34,"a":255,"bitDepth":8}ee8822rgb:{"r":213,"g":136,"b":38,"a":255,"bitDepth":8}d58826rgb:{"r":189,"g":136,"b":42,"a":255,"bitDepth":8}bd882argb:{"r":164,"g":136,"b":45,"a":255,"bitDepth":8}a4882drgb:{"r":140,"g":136,"b":49,"a":255,"bitDepth":8}8c8831rgb:{"r":115,"g":136,"b":53,"a":255,"bitDepth":8}738835rgb:{"r":91,"g":136,"b":57,"a":255,"bitDepth":8}5b8839rgb:{"r":66,"g":136,"b":60,"a":255,"bitDepth":8}42883crgb:{"r":42,"g":136,"b":64,"a":255,"bitDepth":8}2a8840rgb:{"r":17,"g":136,"b":68,"a":255,"bitDepth":8}118844

gradient

lab

lab:{"l":66,"a":32,"b":66}ee8822lab:{"l":64,"a":24,"b":61}db8a27lab:{"l":63,"a":15,"b":57}c98c2blab:{"l":61,"a":6,"b":53}b68d30lab:{"l":59,"a":-3,"b":49}a28d33lab:{"l":57,"a":-11,"b":45}8e8d37lab:{"l":55,"a":-20,"b":40}788c3blab:{"l":53,"a":-29,"b":36}608b3elab:{"l":52,"a":-38,"b":32}448a41lab:{"l":50,"a":-46,"b":28}118844

gradient

hue

rgb:{"r":238,"g":136,"b":34,"a":255,"bitDepth":8}ee8822rgb:{"r":238,"g":175,"b":34,"a":255,"bitDepth":8}eeaf22rgb:{"r":238,"g":215,"b":34,"a":255,"bitDepth":8}eed722rgb:{"r":222,"g":238,"b":34,"a":255,"bitDepth":8}deee22rgb:{"r":183,"g":238,"b":34,"a":255,"bitDepth":8}b7ee22rgb:{"r":143,"g":238,"b":34,"a":255,"bitDepth":8}8fee22rgb:{"r":104,"g":238,"b":34,"a":255,"bitDepth":8}68ee22rgb:{"r":65,"g":238,"b":34,"a":255,"bitDepth":8}41ee22rgb:{"r":34,"g":238,"b":43,"a":255,"bitDepth":8}22ee2brgb:{"r":34,"g":238,"b":82,"a":255,"bitDepth":8}22ee52

gradient

intensity

rgb:{"r":238,"g":136,"b":34,"a":255,"bitDepth":8}ee8822rgb:{"r":227,"g":130,"b":32,"a":255,"bitDepth":8}e38220rgb:{"r":216,"g":124,"b":31,"a":255,"bitDepth":8}d87c1frgb:{"r":205,"g":117,"b":29,"a":255,"bitDepth":8}cd751drgb:{"r":194,"g":111,"b":28,"a":255,"bitDepth":8}c26f1crgb:{"r":183,"g":105,"b":26,"a":255,"bitDepth":8}b7691argb:{"r":173,"g":99,"b":25,"a":255,"bitDepth":8}ad6319rgb:{"r":162,"g":92,"b":23,"a":255,"bitDepth":8}a25c17rgb:{"r":151,"g":86,"b":22,"a":255,"bitDepth":8}975616rgb:{"r":140,"g":80,"b":20,"a":255,"bitDepth":8}8c5014

gradient

multiply

rgb:{"r":238,"g":136,"b":34,"a":255,"bitDepth":8}ee8822rgb:{"r":216,"g":130,"b":32,"a":255,"bitDepth":8}d88220rgb:{"r":194,"g":123,"b":29,"a":255,"bitDepth":8}c27b1drgb:{"r":171,"g":117,"b":27,"a":255,"bitDepth":8}ab751brgb:{"r":149,"g":111,"b":24,"a":255,"bitDepth":8}956f18rgb:{"r":127,"g":104,"b":22,"a":255,"bitDepth":8}7f6816rgb:{"r":105,"g":98,"b":19,"a":255,"bitDepth":8}696213rgb:{"r":83,"g":92,"b":17,"a":255,"bitDepth":8}535c11rgb:{"r":60,"g":85,"b":14,"a":255,"bitDepth":8}3c550ergb:{"r":38,"g":79,"b":12,"a":255,"bitDepth":8}264f0c

gradient

colordodge

rgb:{"r":238,"g":136,"b":34,"a":255,"bitDepth":8}ee8822rgb:{"r":240,"g":148,"b":35,"a":255,"bitDepth":8}f09423rgb:{"r":241,"g":160,"b":36,"a":255,"bitDepth":8}f1a024rgb:{"r":243,"g":172,"b":38,"a":255,"bitDepth":8}f3ac26rgb:{"r":245,"g":184,"b":39,"a":255,"bitDepth":8}f5b827rgb:{"r":247,"g":196,"b":40,"a":255,"bitDepth":8}f7c428rgb:{"r":248,"g":207,"b":41,"a":255,"bitDepth":8}f8cf29rgb:{"r":250,"g":219,"b":43,"a":255,"bitDepth":8}fadb2brgb:{"r":252,"g":231,"b":44,"a":255,"bitDepth":8}fce72crgb:{"r":253,"g":243,"b":45,"a":255,"bitDepth":8}fdf32d

gradient

difference

rgb:{"r":238,"g":136,"b":34,"a":255,"bitDepth":8}ee8822rgb:{"r":236,"g":122,"b":34,"a":255,"bitDepth":8}ec7a22rgb:{"r":235,"g":109,"b":34,"a":255,"bitDepth":8}eb6d22rgb:{"r":233,"g":95,"b":34,"a":255,"bitDepth":8}e95f22rgb:{"r":231,"g":82,"b":34,"a":255,"bitDepth":8}e75222rgb:{"r":230,"g":68,"b":34,"a":255,"bitDepth":8}e64422rgb:{"r":228,"g":54,"b":34,"a":255,"bitDepth":8}e43622rgb:{"r":226,"g":41,"b":34,"a":255,"bitDepth":8}e22922rgb:{"r":224,"g":27,"b":34,"a":255,"bitDepth":8}e01b22rgb:{"r":223,"g":14,"b":34,"a":255,"bitDepth":8}df0e22