Gradient Scales

Generate an array of colors from color1 to color2. Methods available are rgb, hsv, hsl, hsi, hsp, and cmyk.

.scheme('gradient',{
  color2: colorType,  // REQUIRED, second color, of any type, to blend with
  colors: number,     // REQUIRED, number of colors to be returned, must be > 2
  method: string,     // optional, defaults to 'rgb'
  round: boolean      // optional, defaults to true
})

Gradient Methods

method	description
rgb	Blends each RGBA value
hsv	Blends each HSVA value
hsl	Blends each HSLA value
hsp	Blends each HSPA value
cmyk	Blends each CMYK value
lab	Blends each L*a*b* value
luv	Blends each L*u*v* value
hue	Blends hue only
value	Blends value (HSV) only
lightness	Blends lightness (HSL) only
intensity	Blends intensity (HSI) only
perceivedbrightness	Blends perceived brightness (HSP) only
screen	RGB values are inverted, multiplied, then inverted again
multiply	RGB values are multiplied
overlay	Screen or multiply depending on whether second color values are lighter or darker
softlight	Similar to overlay; uses W3C formula
divide	First color values divided by second
subtraction	Second color values subtracted from first color
difference	Difference between each value pair
colorburn	Divites inverted bottom layer by top layer
colordodge	Divides bottom layer by inverted top layer
vividlight	Color dodge or burn, depending on which value is lighter
linearburn	Sums each value pair and subtracts 1
lineardodge	Sums each value pair
linearlight	Linear dodge or burn, depending on which value is lighter

JavaScript

const Color = require('chromaticity-color-utilities')

const gradient1 = Color.from('rgb', [255, 0, 255]).scheme('gradient', {
  with: Color.from('hex', 0x00ff00),
  colors: 5,
})
// [
//   rgb { r: 255, g: 0, b: 255, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 191, g: 64, b: 191, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 128, g: 128, b: 128, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 64, g: 191, b: 64, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 0, g: 255, b: 0, a: 255, bitDepth: 8, max: 255 }
// ]

const gradient1 = Color.from('rgb', [255, 0, 255]).scheme('gradient', {
  with: Color.from('hex', '00ff00'),
  colors: 5,
  method: 'hsv',
})
// [
//   rgb { r: 255, g: 0, b: 255, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 64, g: 0, b: 255, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 0, g: 128, b: 255, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 0, g: 255, b: 191, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 0, g: 255, b: 0, a: 255, bitDepth: 8, max: 255 }
// ]

TypeScript

import Color from 'chromaticity-color-utilities'

const gradient1: Color.rgb[] = Color.from('rgb', [255, 0, 255]).scheme(
  'gradient',
  {
    with: Color.from('hex', 0x00ff00),
    colors: 5,
  }
)