Skip to main content

Palettes

Functions​

colors()​

colors(shade?, value?): string[]

Returns TailwindCSS color value(s) from the default palette.

The function behaves as follows:

  • If called with both shade and value parameters, it returns that color as a hex string. For example 'blue' and '500' would return the equivalent of blue-500.
  • If called with no parameters or just the 'all' parameter as the shade, it returns an array of colors from '050' to '900' for every shade.
  • If the shade is 'all' and the value is specified, it returns an array of colors at the specified value for each shade.
tip

To specify '050' as a number you just pass 50. Values are all valid as string or number for example '100' and100 .

Parameters​

β€’ shade?: Tailwind | "all"

The hue family to return.

β€’ value?: ScaleValues

The tone value of the shade. Values are in incrementals of 100. For example numeric (100) and its string equivalent ('100') are valid.

Returns​

string[]

Example​

import { colors } from "huetiful-js";

// We pass in red as the target hue.
// It returns a function that can be called with an optional value parameter
console.log(colors('red'));
// [
'#fef2f2', '#fee2e2',
'#fecaca', '#fca5a5',
'#f87171', '#ef4444',
'#dc2626', '#b91c1c',
'#991b1b', '#7f1d1d'
]

console.log(colors('red','900'));
// '#7f1d1d'

Defined in​

palettes.ts:854

diverging()​

diverging<Scheme>(scheme?): Scheme[]

A wrapper function for ColorBrewer's map of diverging color schemes.

Type Parameters​

β€’ Scheme extends DivergingScheme

Parameters​

β€’ scheme?: Scheme | Scheme[]

The name of the scheme.

Returns​

Scheme[]

Example​

import { diverging } from 'huetiful-js'

console.log(diverging("Spectral"))
//[
 '#7fc97f', '#beaed4',
 '#fdc086', '#ffff99',
 '#386cb0', '#f0027f',
 '#bf5b17', '#666666'
]

Defined in​

palettes.ts:544

nearest()​

nearest(collection, options): any

Returns the nearest color(s) in a collection as compared against the passed in color using the differenceHyab metric function.

  • To get the nearest color from the Tailwind CSS default palette pass in the string tailwind as the collection parameter.
  • If the num parameter is more than 1, the returned collection of colors has the colors sorted starting with the nearest color first

Parameters​

β€’ collection: Collection | "tailwind"

The collection of colors to search for nearest colors.

β€’ options

Optional overrides.

β€’ options.against: "cyan"

β€’ options.num: 1

Returns​

any

Example​

let cols = colors('all', '500')

console.log(nearest(cols, 'blue', 3));
// [ '#a855f7', '#8b5cf6', '#d946ef' ]

Defined in​

palettes.ts:798

qualitative()​

qualitative<Scheme>(scheme?): Scheme[]

A wrapper function for ColorBrewer's map of qualitative color schemes.

Type Parameters​

β€’ Scheme extends QualitativeScheme

Parameters​

β€’ scheme?: Scheme | Scheme[]

The name of the scheme

Returns​

Scheme[]

Example​

import { qualitative } from 'huetiful-js'

console.log(qualitative("Accent"))
// [
 '#7fc97f', '#beaed4',
 '#fdc086', '#ffff99',
 '#386cb0', '#f0027f',
 '#bf5b17', '#666666'
]

Defined in​

palettes.ts:685

sequential()​

sequential<Scheme>(scheme?): Scheme[]

A wrapper function for ColorBrewer's map of sequential color schemes.

Type Parameters​

β€’ Scheme extends SequentialScheme

Parameters​

β€’ scheme?: Scheme | Scheme[]

The name of the scheme.

Returns​

Scheme[]

A collection of colors in the specified colorspace. The default is hex if colorspace is undefined.

Example​

import { sequential } from 'huetiful-js'

console.log(sequential("OrRd"))

// [
 '#fff7ec', '#fee8c8',
 '#fdd49e', '#fdbb84',
 '#fc8d59', '#ef6548',
 '#d7301f', '#b30000',
 '#7f0000'
]

Defined in​

palettes.ts:308