Tint & Shade Scales

The total number of colors in the scheme will be colors * 2 + 1, including the original color. That is, the colors property for this method defines the number of colors in each direction.

Either include distance OR distanceToWhite and distanceToBlack. If you only include distance it will calculate distance to the nearest bound (black or white) and use that as measure for the other direction.

Method can be one of: rgb, rgb2, hsl, hsv, hsi, or hsp. Each will produce a different gradient. rgb modifies each r, g, and b value by the same amount, while rgb2 scales each value evenly.

.scheme('tintshade',{
  colors: number,          // REQUIRED, number of colors in each direction from source color
  method: string,          // optional, defaults to hsl
  distance: number,        // optional, 0-1, defaults to 1 OR
  distanceToWhite: number, // optional, 0-1, defaults to 1
  distanceToBlack: number, // optional, 0-1, defaults to 1
  round: boolean           // optional, defaults to true
})

JavaScript

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

const scheme1 = Color.from('rgb', [100, 0, 100]).scheme('tintshade', {
  colors: 3,
})
// [
//   rgb { r: 0, g: 0, b: 0, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 33, g: 0, b: 33, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 67, g: 0, b: 67, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 100, g: 0, b: 100, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 133, g: 0, b: 133, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 167, g: 0, b: 167, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 200, g: 0, b: 200, a: 255, bitDepth: 8, max: 255 }
// ]
const scheme2 = Color.from('rgb', [200, 100, 200]).scheme('tintshade', {
  colors: 3,
})
// [
//   rgb { r: 66, g: 24, b: 66, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 118, g: 42, b: 118, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 170, g: 60, b: 170, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 200, g: 100, b: 200, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 218, g: 152, b: 218, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 237, g: 203, b: 237, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 255, g: 255, b: 255, a: 255, bitDepth: 8, max: 255 }
// ]
const scheme4 = Color.from('rgb', [200, 100, 200]).scheme('tintshade', {
  colors: 3,
  distance: 0.5,
})
// [
//   rgb { r: 144, g: 51, b: 144, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 170, g: 60, b: 170, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 191, g: 74, b: 191, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 200, g: 100, b: 200, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 209, g: 126, b: 209, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 218, g: 152, b: 218, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 227, g: 178, b: 227, a: 255, bitDepth: 8, max: 255 }
// ]
const scheme5 = Color.from('rgb', [200, 100, 200]).scheme('tintshade', {
  colors: 3,
  distanceToWhite: 1,
  distanceToBlack: 1,
})
// [
//   rgb { r: 0, g: 0, b: 0, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 74, g: 26, b: 74, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 148, g: 52, b: 148, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 200, g: 100, b: 200, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 218, g: 152, b: 218, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 237, g: 203, b: 237, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 255, g: 255, b: 255, a: 255, bitDepth: 8, max: 255 }
// ]

TypeScript

import Color from 'chromaticity-color-utilities'

const scheme1: Color.rgb[] = Color.from('rgb', [100, 0, 100]).scheme(
  'tintshade',
  {
    colors: 3,
  }
)