Skip to main content

Types

Type Aliases​

AdaptivePaletteOptions​

AdaptivePaletteOptions: {backgroundColor: {dark: ColorToken;light: ColorToken; };colorBlind: boolean; }

Type declaration​

backgroundColor?​

optional backgroundColor: {dark: ColorToken;light: ColorToken; }

backgroundColor.dark?​

optional dark: ColorToken

backgroundColor.light?​

optional light: ColorToken

colorBlind?​

optional colorBlind: boolean

Defined in​

types.d.ts:77


BiasedHues​

BiasedHues: "red-purple" | "yellow-red" | "green-yellow" | "blue-green" | "purple-blue"

Hue biases as seen when transitioning from one hue to another on the color wheel (Lch).

Defined in​

types.d.ts:440


Collection​

Collection: ColorToken[] | Map<string | number, ColorToken> | Set<ColorToken> | object

Any collection with enumerable keys that can be used to iterate through it to get the values which are expected to be valid color tokens.

Defined in​

types.d.ts:44


ColorFamily​

ColorFamily: "red" | "green" | "blue" | "yellow" | "red" | "purple" | "gray"

The basic color families (including gray).

Defined in​

types.d.ts:570


ColorOptions​

ColorOptions: {alpha: number;colorspace: Colorspaces;contrast: number;darkMode: ColorToken;implicitReturn: boolean;lightMode: ColorToken;lightness: number;luminance: number;mode: Colorspaces;saturation: number;temp: number; }

Properties on an instance of the Color class. Some of these properties have corresponding methods.

Type declaration​

alpha?​

optional alpha: number

colorspace?​

optional colorspace: Colorspaces

contrast?​

optional contrast: number

darkMode?​

optional darkMode: ColorToken

implicitReturn?​

optional implicitReturn: boolean

lightMode?​

optional lightMode: ColorToken

lightness?​

optional lightness: number

luminance?​

optional luminance: number

mode?​

optional mode: Colorspaces

saturation?​

optional saturation: number

temp?​

optional temp: number

Defined in​

types.d.ts:58


Colorspaces​

Colorspaces: "lab" | "rgb" | "lch" | "lch65" | "xyz65" | "xyz" | "lrgb" | "hsv"

The colorspace or mode to use.

Defined in​

types.d.ts:517


ColorToken​

ColorToken: number | ColorTuple | boolean | string | object

Any recognizable color token.

Defined in​

types.d.ts:501


ColorTuple​

ColorTuple: (number | string)[]

An array of channel values for a color token with the mode (first element of type string) and alpha (last element of type number in the [0,1] range) being optional.

It can also be in different variants as shown below:

Example​

// The first element can either be a string `mode` which denotes the colorspace the channel values are valid in.
const colorTuple = ['rgb',0.1,0.5,0.8]
const colorTupleWithAlpha = ['rgb',0.1,0.5,0.8,0.5]
const colorTupleWithAlphaButNoMode = [0.1,0.5,0.8,0.5]
const colorTupleWithNoAlphaAndMode = [0.1,0.5,0.8]

When omitting the `mode` from the color tuple, be sure to specify the `srcMode` option in when passing it to `token()` or any function that has access to `TokenOptions`.

Defined in​

types.d.ts:20


DeficiencyOptions​

DeficiencyOptions: {kind: DeficiencyType;severity: number;token: TokenOptions; }

Overrides to specify the type of color blindness and filter intensity.

Type declaration​

kind?​

optional kind: DeficiencyType

The type of color vision deficiency. Default is 'red'

severity?​

optional severity: number

The intensity of the filter. The exepected value is between [0,1]. Default is 0.1.

token?​

optional token: TokenOptions

Specify the parsing behaviour and change output type of the ColorToken.

Defined in​

types.d.ts:263


DeficiencyType​

DeficiencyType: "red" | "blue" | "green" | "mono"

The type of color vision defeciency.

Defined in​

types.d.ts:435


DiscoverOptions​

DiscoverOptions: {colorspace: Colorspaces;kind: SchemeType[];maxDistance: number;minDistance: number;token: TokenOptions; }

Options for the discover() palette generator function.

Type declaration​

colorspace?​

optional colorspace: Colorspaces

The colorspace to retrieve channel values from.

kind?​

optional kind: SchemeType[]

The palette type to return. Default is undefined

maxDistance?​

optional maxDistance: number

The minimum distance between colors. May affect finally palette results Default is the jnd internal constant.

minDistance?​

optional minDistance: number

The minimum distance between colors. May affect finally palette results. Default is 0

token?​

optional token: TokenOptions

Specify the parsing behaviour and change output type of the ColorToken.

Defined in​

types.d.ts:232


DistributionOptions​

DistributionOptions: Pick<InterpolatorOptions, "hueFixup"> & {colorspace: Colorspaces;excludeAchromatic: boolean;excludeSelf: boolean;extremum: "min" | "max" | "mean";factor: Factor[];token: TokenOptions; }

Override for factor distributed palettes.

Type declaration​

colorspace?​

optional colorspace: Colorspaces

The colorspace to distribute the specified factor in. Defaults to lch when the passed in mode has no 'chroma' | 'hue' | 'lightness' channel

excludeAchromatic?​

optional excludeAchromatic: boolean

Exclude grayscale colors from the distribution operation. Default is false

excludeSelf?​

optional excludeSelf: boolean

Exclude the color with the specified extremum from the distribution operation. Default is false

extremum?​

optional extremum: "min" | "max" | "mean"

The extreme end for the factor we wish to distribute. If mean is picked, it will map the average value of that factor in the passed in collection.

factor​

factor: Factor[]

The factor(s) to distribute amongst each color token in the passed in collection.

token?​

optional token: TokenOptions

Specify the parsing behaviour and change output type of the ColorToken.

Defined in​

types.d.ts:165


DivergingScheme​

DivergingScheme: "Spectral" | "RdYlGn" | "RdBu" | "PiYG" | "PRGn" | "RdYlBu" | "BrBG" | "RdGy" | "PuOr"

The diverging color scheme in the ColorBrewer colormap.

Defined in​

types.d.ts:450


EarthtoneOptions​

EarthtoneOptions: InterpolatorOptions & {earthtones: "light-gray" | "silver" | "sand" | "tupe" | "mahogany" | "brick-red" | "clay" | "cocoa" | "dark-brown" | "dark"; }

Options for the earthtone() palette generator function.

Type declaration​

earthtones?​

optional earthtones: "light-gray" | "silver" | "sand" | "tupe" | "mahogany" | "brick-red" | "clay" | "cocoa" | "dark-brown" | "dark"

  • earthtone The earthtone to interpolate with.

Defined in​

types.d.ts:146


Fact<F>​

Fact<F>: F extends true ? {color: ColorToken;factor: number; } : number

The value of the factor being queried usually a number but can also be falsy like NaN for edge cases or an object with the value of the factor and the color token associated with it.

Type Parameters​

β€’ F

Defined in​

types.d.ts:30


Factor​

Factor: "luminance" | "chroma" | "contrast" | "distance" | "lightness" | "hue"

The color property being queried.

Defined in​

types.d.ts:506


FilterByOptions​

FilterByOptions: {against: ColorToken;colorspace: Colorspaces;factor: Factor[];ranges: { [F in Factor]?: (number | string)[] } | (number | string)[]; }

Overrides for setting filtering criterion, expected ranges and other behaviour.

Type declaration​

against?​

optional against: ColorToken

The color to compare the factor with. All the factors are calculated between this color and the ones in the colors array. Only works for the 'distance' and 'contrast' factor.

colorspace?​

optional colorspace: Colorspaces

The mode colorspace to perform the sorting operation in. It is ignored when the factor is 'luminance' | 'contrast' | 'distance'.

factor?​

optional factor: Factor[]

The factor to use as a filtering criterion.

Default is 'hue'

ranges?​

optional ranges: { [F in Factor]?: (number | string)[] } | (number | string)[]

The targeted start and end ranges for the factor:

  • If a single factor is specified, ranges is expected to be an array.
  • If multiple factors are specified then ranges is expected to be an object with the factor(s) as keys and an array of the start and end as values.
  • The start and end values can be either numbers or string expressions. The end value is optional but the range value(s) are expected to be in an array.

Defined in​

types.d.ts:197


HueshiftOptions​

HueshiftOptions: Pick<InterpolatorOptions, "colorspace" | "easingFn" | "num" | "tokenOptions"> & {hueStep: number;maxLightness: number;minLightness: number; }

Options for the hueshift() palette generator function.

Type declaration​

hueStep?​

optional hueStep: number

The hue angle to increment each iteration with.

maxLightness?​

optional maxLightness: number

maxLightness Maximum lightness value (range 0-100).

minLightness?​

optional minLightness: number

  • minLightness Minimum lightness value (range 0-100).

Defined in​

types.d.ts:406


InterpolatorOptions​

InterpolatorOptions: {closed: boolean;colorspace: Colorspaces;easingFn: (t) => number;hueFixup: "longer" | "shorter";kind: "basis" | "monotone" | "natural";num: number;stops: number[];tokenOptions: TokenOptions; }

Options for customizing the color interpolator behaviour. It is extended by some palette utilities

Type declaration​

closed?​

optional closed: boolean

Optional parameter to return the 'closed' variant of the 'kind' of interpolation method which can be useful for cyclical color scales. Default is false

colorspace?​

optional colorspace: Colorspaces

The colorspace to perform the color space in. Prefer uniform color spaces for better results such as Lch or Jch.

easingFn()?​

optional easingFn: (t) => number

The easing function to use.

Parameters​

β€’ t: number

Any value between 0 and 1

Returns​

number

A number.

hueFixup?​

optional hueFixup: "longer" | "shorter"

The type of hue fixup to apply to the hue channels during interpolation.

kind?​

optional kind: "basis" | "monotone" | "natural"

The type of the spline interpolation method. Default is basis.

num?​

optional num: number

The amount of samples to return in the result collection.

stops?​

optional stops: number[]

The positions of color stops to use during interpolation. Each number in the array is assigned to the colors in the collection according to the order the colors are passed in.

Plain objects as collects do not remember insertion order so it may return unexpected results. Preferably use an ArrayLike or Map object.

tokenOptions?​

optional tokenOptions: TokenOptions

Specify the parsing behaviour and change output type of the ColorToken.

Defined in​

types.d.ts:85


Order​

Order: "asc" | "desc"

The order to insert elements back into the result collection either ascending ('asc') or descending ('desc').

Defined in​

types.d.ts:25


PairedSchemeOptions​

PairedSchemeOptions: InterpolatorOptions & {hueStep: number;via: Tone; }

Options for the pair() palette generator function.

Type declaration​

hueStep?​

optional hueStep: number

The hue angle to increment each iteration with.

via?​

optional via: Tone

The color to pass through during interpolation.

Defined in​

types.d.ts:131


QualitativeScheme​

QualitativeScheme: "Set2" | "Accent" | "Set1" | "Set3" | "Dark2" | "Paired" | "Pastel2" | "Pastel1"

The qualitative color scheme in the ColorBrewer colormap.

Defined in​

types.d.ts:464


ScaleValues​

ScaleValues: "050" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "950"

The value of the Tailwind color.

Defined in​

types.d.ts:529


SchemeOptions​

SchemeOptions: Pick<InterpolatorOptions, "easingFn" | "colorspace"> & {kind: SchemeType[];token: TokenOptions; }

Options for the scheme() palette generator function.

Type declaration​

kind?​

optional kind: SchemeType[]

token?​

optional token: TokenOptions

Defined in​

types.d.ts:393


SchemeType​

SchemeType: "analogous" | "triadic" | "tetradic" | "complementary"

The scheme to use when creating base palettes.

Defined in​

types.d.ts:39


SequentialScheme​

SequentialScheme: "OrRd" | "PuBu" | "BuPu" | "Oranges" | "BuGn" | "YlOrBr" | "YlGn" | "Reds" | "RdPu" | "Greens" | "YlGnBu" | "Purples" | "GnBu" | "Greys" | "YlOrRd" | "PuRd" | "Blues" | "PuBuGn" | "Viridis"

The sequential color scheme in the ColorBrewer colormap.

Defined in​

types.d.ts:477


SortByOptions​

SortByOptions: {against: ColorToken;colorspace: Colorspaces;factor: Factor[];order: "asc" | "desc";relative: boolean; }

Options for specifying sorting conditions.

Type declaration​

against?​

optional against: ColorToken

The color to compare the factor with. All the factors are calculated between this color and the ones in the colors array. Only works for the 'distance' and 'contrast' factor.

colorspace?​

optional colorspace: Colorspaces

The colorspace to perform the sorting operation in. It is ignored when the factor is 'luminance' | 'contrast' | 'distance'.

factor?​

optional factor: Factor[]

The factor to use for sorting the colors.

order?​

optional order: "asc" | "desc"

The arrangement order of the colors either asc | desc. Default is ascending (asc).

relative?​

optional relative: boolean

Use the against comparison color when ordering the color tokens.

It has no effect on contrast and distance factors because they're already relative.

Defined in​

types.d.ts:341


Stats​

Stats: { [T in Factor]: Object & Object }

The default structure of a Stats object as returned by stats() when invoked with default options.

Defined in​

types.d.ts:325


StatsOptions​

StatsOptions: {against: ColorToken;colorspace: Colorspaces;factor: Factor[];relative: boolean; }

Optional parameters to specify how the data should be computed.

Type declaration​

against?​

optional against: ColorToken

The color to compare the factor with. All the factors are calculated between this color and the ones in the colors array. Only works for the 'distance' and 'contrast' factor.

colorspace?​

optional colorspace: Colorspaces

The colorspace to perform the sorting operation in. It is ignored when the factor is 'luminance' | 'contrast' | 'distance'.

factor?​

optional factor: Factor[]

relative?​

optional relative: boolean

Choose whether to use the against color token for factors that support it as an overload (that is, all factors except distance and `contrast)

Defined in​

types.d.ts:373


Tailwind​

Tailwind: "indigo" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "sky" | "blue" | "violet" | "purple" | "fuchsia" | "pink" | "rose"

Color families in the default TailwindCSS palette.

Defined in​

types.d.ts:545


TokenOptions​

TokenOptions: {kind: "num" | "arr" | "obj" | "str";normalizeRgb: boolean;numType: "expo" | "hex" | "oct" | "bin";omitAlpha: boolean;omitMode: boolean;srcMode: Colorspaces;targetMode: Colorspaces; }

Overrides to customize the parsing and output behaviour.

Type declaration​

kind?​

optional kind: "num" | "arr" | "obj" | "str"

The type of color token to return. Default is 'str'.

normalizeRgb?​

optional normalizeRgb: boolean

If true and the passed in color token is an array or plain object and in the srcMode of 'rgb' or 'lrgb', it will have all channels normalized back to [0,1] range if any of the channe values is beyond 1.

This can help the parser to recognize RGB colors in the [0,255] range which Culori doesn't handle.

Default is true.

numType?​

optional numType: "expo" | "hex" | "oct" | "bin"

The type of number to return. Only valid if kind is set to 'number'. Default is 'literal'

omitAlpha?​

optional omitAlpha: boolean

If the kind is set to 'arr' it will remove the alpha channel value from color tuple. Default is false.

omitMode?​

optional omitMode: boolean

If the kind is set to 'arr' it will remove the mode string from color tuple. Default is false.

srcMode?​

optional srcMode: Colorspaces

The mode in which the channel values are valid in. It is used for color arrays if they have the colorspace string ommitted. Default is 'rgb'.

targetMode?​

optional targetMode: Colorspaces

The colorspace in which to return the color object or array in. Default is 'lch'.

Defined in​

types.d.ts:281


Tone​

Tone: "light" | "dark"

The tone to use.

Defined in​

types.d.ts:430