Palettes

Functions

colors()

colors<S, F>(shade?, value?): Swatch<F, S>

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 .

Type Parameters

• S extends ScaleValues

• F extends Tailwind

Parameters

• shade?: F | "all"

The hue family to return.

• value?: S

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

Returns

Swatch<F, S>

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:844

---

diverging()

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

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

Type Parameters

• Scheme extends DivergingScheme

Parameters

• 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:533

---

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?: ColorToken

• options.num?: number

Returns

any

Example

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

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

Defined in

palettes.ts:787

---

qualitative()

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

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

Type Parameters

• Scheme extends QualitativeScheme

Parameters

• 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:674

---

sequential()

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

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

Type Parameters

• Scheme extends SequentialScheme

Parameters

• 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:297