Skip to main content

Generators

Functions​

discover()​

discover(colors, options): Collection

Takes a collection of colors and finds the nearest matches using the differenceHyab() color difference metric for a set of predefined palettes.

The function returns different values based on the kind parameter passed in:

  • An array of colors for the kind of scheme, if the kind parameter is specified.
  • Else it returns an object of all the palette types as keys and their values as an array of colors.
caution

If no colors are valid for the palette types it returns an empty array for the palette results. It does not work with achromatic colors thus they're excluded from the resulting collection.

Parameters​

β€’ colors: Collection = []

The collection of colors to create palettes from. Preferably use 6 or more colors for better results.

β€’ options: DiscoverOptions = ...

Returns​

Collection

Example​

import { discover } from 'huetiful-js'

let sample = [
 "#ffff00",
 "#00ffdc",
 "#00ff78",
 "#00c000",
 "#007e00",
 "#164100",
 "#720000",
 "#600000",
 "#4e0000",
 "#3e0000",
 "#310000",
]

console.log(discover(sample, { kind:'tetradic' }))
// [ '#ffff00ff', '#00ffdcff', '#310000ff', '#720000ff' ]

Defined in​

generators.ts:406

earthtone()​

earthtone(baseColor, options): ColorToken | ColorToken[]

Creates a color scale between an earth tone and any color token using spline interpolation.

Parameters​

β€’ baseColor: ColorToken

The color to interpolate an earth tone with.

β€’ options: EarthtoneOptions

Optional overrides for customising interpolation and easing functions.

Returns​

ColorToken | ColorToken[]

Example​

import { earthtone } from 'huetiful-js'

console.log(earthtone("pink",'lch',{earthtones:'clay',samples:5 }))
// [ '#6a5c52ff', '#8d746aff', '#b38d86ff', '#d9a6a6ff', '#ffc0cbff' ]

Defined in​

generators.ts:483

hueshift()​

hueshift<Color, Options>(baseColor?, options?): Collection

Creates a palette of hue shifted colors from the passed in color.

tip

Hue shifting means that:

  • As a color becomes lighter, its hue shifts up (increases).
  • As a color becomes darker its hue shifts down (decreases).

The minLightness and maxLightness values determine how dark or light our color will be at either extremum respectively.'

The length of the resultant array is the number of samples (num) multiplied by 2 plus the base color passed in or simply (num * 2) + 1.

Type Parameters​

β€’ Color extends ColorToken

β€’ Options extends HueshiftOptions

Parameters​

β€’ baseColor?: Color

The color to use as the base of the palette.

β€’ options?: Options

The optional overrides object.

Returns​

Collection

Example​

import { hueshift } from "huetiful-js";

let hueShiftedPalette = hueShift("#3e0000");

console.log(hueShiftedPalette);

// [
 '#ffffe1', '#ffdca5',
 '#ca9a70', '#935c40',
 '#5c2418', '#3e0000',
 '#310000', '#34000f',
 '#38001e', '#3b002c',
 '#3b0c3a'
]

Defined in​

generators.ts:90

interpolator()​

interpolator(baseColors, options): ColorToken[] | ColorToken

Interpolates the passed in colors and returns a color scale that is evenly split into num amount of samples.

The interpolation behaviour can be overidden allowing us to get slightly different effects from the same baseColors.

The behaviour of the interpolation can be customized by:

  • Changing the kind of interpolation

    • natural
    • basis
    • monotone

  • Changing the easing function (easingFn)

tip
  • To create a color scale for cyclic values pass true to the closed parameter in the options object.
  • If num is 1 then a single color is returned from the resulting interpolation with the internal t value at 0.5 else a collection of the num of color scales is returned.
  • If the collection of colors contains an achromatic color, the resulting samples may all be grayscale or pure black.

Parameters​

β€’ baseColors: Collection = []

The collection of colors to interpolate. If a color has a falsy channel for example black has an undefined hue channel some interpolation methods may return NaN affecting the final result or making all the colors in the resulting interpolation gray.

β€’ options: InterpolatorOptions = {}

Optional overrides to customize parameters such as interpolation methods and per channel eeasings.

Returns​

ColorToken[] | ColorToken

Example​

import { interpolator } from 'huetiful-js';

console.log(interpolator(['pink', 'blue'], { num:8 }));

// [
 '#ffc0cb', '#ff9ebe',
 '#f97bbb', '#ed57bf',
 '#d830c9', '#b800d9',
 '#8700eb', '#0000ff'
]

Defined in​

generators.ts:306

pair()​

pair<Color, Options>(baseColor, options?): Collection | ColorToken

Creates a palette that consists of a baseColor that is incremented by a hueStep to get the final color to pair with. The colors are then spline interpolated via white or black.

tip

A negative hueStep will pick a color that is hueStep degrees behind the base color.

Type Parameters​

β€’ Color extends ColorToken

β€’ Options extends PairedSchemeOptions

Parameters​

β€’ baseColor: Color

The color to return a paired color scheme from.

β€’ options?: Options

The optional overrides object to customize per channel options like interpolation methods and channel fixups.

Returns​

Collection | ColorToken

Example​

import { pair } from 'huetiful-js'

console.log(pair("green",{hueStep:6,num:4,tone:'dark'}))
// [ '#008116ff', '#006945ff', '#184b4eff', '#007606ff' ]

Defined in​

generators.ts:230

pastel()​

pastel<Color, Options>(baseColor, options?): ColorToken

Returns a random pastel variant of the passed in color token.

tip

Pastel colors are those soft hued colors like baby blue,pink and mauve.

Type Parameters​

β€’ Color extends ColorToken

β€’ Options extends TokenOptions

Parameters​

β€’ baseColor: Color

The color to return a pastel variant of.

β€’ options?: Options

Returns​

ColorToken

Example​

import { pastel } from 'huetiful-js'

console.log(pastel("green"))

// #036103ff

Defined in​

generators.ts:176

scheme()​

scheme(baseColor, options): Collection

Generates a randomised classic scheme from the passed in color.

The kind parameter can either be an array or undefined:

  • If it is an array, each element should be a valid kind of scheme. It will return a color map with the array elements (which are valid schemes) as keys. Duplicate schemes are simply ignored.
  • If it is falsy it will return a color map of all palettes.
tip

The classic schemes are are:

  • triadic - Picks 3 colors 120 degrees apart.
  • tetradic - Picks 4 colors 90 degrees apart.
  • complimentary - Picks 2 colors 180 degrees apart.
  • mono - Picks num amount of colors from the same hue family .
  • analogous - Picks 3 colors 12 degrees apart.
note

Note that the num parameter works on the monochromatic palette type only. Other schemes will return a constant amount of samples.

Parameters​

β€’ baseColor: ColorToken = 'cyan'

The color to create the palette(s) from.

β€’ options: SchemeOptions = ...

Optional overrides.

Returns​

Collection

Example​

import { scheme } from 'huetiful-js'

console.log(scheme("triadic")("#a1bd2f"))
// [ '#a1bd2fff', '#00caffff', '#ff78c9ff' ]

Defined in​

generators.ts:554