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 thekind
parameter is specified. - Else it returns an object of all the palette types as keys and their values as an array of colors.
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β
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β
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β
hueshift()β
hueshift<
Color
,Options
>(baseColor
,options
):Collection
Creates a palette of hue shifted colors from the passed in color.
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 extreme respectively.'
The length of the resultant array is the number of samples (num
) multiplied by 2 plus the base color passed in or (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β
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β
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
)
- To create a color scale for cyclic values pass
true
to theclosed
parameter in theoptions
object. - If
num
is 1 then a single color is returned from the resulting interpolation with the internalt
value at0.5
else a collection of thenum
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
= undefined
Optional overrides.
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β
pair()β
pair<
Color
,Options
>(baseColor
,options
?):Collection
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.
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β
Exampleβ
import { pair } from 'huetiful-js'
console.log(pair("green",{hueStep:6,num:4,tone:'dark'}))
// [ '#008116ff', '#006945ff', '#184b4eff', '#007606ff' ]
Defined inβ
pastel()β
pastel<
Color
,Options
>(baseColor
,options
?):ColorToken
Returns a random pastel variant of the passed in color token.
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β
Exampleβ
import { pastel } from 'huetiful-js'
console.log(pastel("green"))
// #036103ff
Defined inβ
scheme()β
scheme(
baseColor
,options
):Collection
Generates a randomised classic color scheme from the passed in color.
The kind
parameter can either be a string or an array:
- If it is an array, each element should be a
kind
of palette. It will return a color map with the array elements as keys. Duplicate values are simply ignored. - If it is a string it will return an array of colors of the specified
kind
of palette. - If it is falsy it will return a color map of all palettes.
The classic palette types are:
triadic
- Picks 3 colors 120 degrees apart.tetradic
- Picks 4 colors 90 degrees apart.complimentary
- Picks 2 colors 180 degrees apart.monochromatic
- Picksnum
amount of colors from the same hue family .analogous
- Picks 3 colors 12 degrees apart.
Note that the num
parameter works on the monochromatic
palette type only.
Parametersβ
β’ baseColor: ColorToken
= ...
The color to create the palette(s) from.
β’ options: SchemeOptions
= {}
Optional overrides.
Returnsβ
Exampleβ
import { scheme } from 'huetiful-js'
console.log(scheme("triadic")("#a1bd2f"))
// [ '#a1bd2fff', '#00caffff', '#ff78c9ff' ]