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
andvalue
parameters, it returns that color as a hex string. For example'blue'
and'500'
would return the equivalent ofblue-500
. - If called with no parameters or just the
'all'
parameter as theshade
, it returns an array of colors from'050'
to'900'
for everyshade
. - If the
shade
is'all'
and thevalue
is specified, it returns an array of colors at the specifiedvalue
for eachshade
.
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β
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β
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 thecollection
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: any
Optional overrides.
Returnsβ
any
Exampleβ
let cols = colors('all', '500')
console.log(nearest(cols, 'blue', 3));
// [ '#a855f7', '#8b5cf6', '#d946ef' ]
Defined inβ
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β
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'
]