Skip to main content

Introduction​

Whenever possible, the library passes internal defaults to make sure that the least amount of errors surface unnecessarily.

For example all options objects are optional but in certain scenarios these options have to be specified to remove ambiguity.

tip

In this article when I say color object I mean a color token defined either as an Array instance or plain object.

Color parsing behaviour​

caution

A good example is with token(), if you pass in the color token as an array or plain object without the mode specified it will treat the color as if it is in the mode 'rgb'. This can lead to incorrect final results or error.


import { token } from 'huetiful-js';



// c1 is an array of RGB channels
const c1 = [0.8, 0.5, 0.3],
	// c2 is an array of LCH channels.
	// Its treated as RGB and normalized to the range [0,1]
	// if normalizeRgb is true
	c2 = [80, 55, 30],
	// this works because the default srcMode is rgb
	c3 = { r: 0.8, g: 0.5, b: 0.3 },
	// this just produces black because the default channel keys 
	// differ from the color token's
	c4 = { l: 80, c: 55, h: 30 };

const res = [];
for (const c of [c1, c2, c3, c4]) {
	res.push(token(c));
}

console.log(res)

// [ '#cc804dff', '#50371eff', '#cc804dff', '#000000ff' ]

Always try to define the mode of your color objects (be it arrays or plain objects) or explicitly via the srcMode property if your omit it from the color object.

The srcMode is inferred from the passed in color token during parsing in the following order of precedence:

  1. A mode property (if object) or the first element (if Array) which is expected to be of type string.

  2. If the color token is of type string (regardless its a CSS named color, serialized color string or hex), number or boolean then the mode is 'rgb'.

However in utilities that perform hue dependant operations like hueshift(), then the default colorspace is lch.

caution

The srcMode property will override the color object's mode.

// the mode will be 'lab'
const c1 = ['lch',65,38,19,0.3]

token(c1,{ srcMode:'lab',kind:'arr' })

// ['lab',65,38,19,0.3]

Default baseColor for palette generators​

Every utility that takes an individual color token (known as baseColor) provides 'cyan' as the default color.

Default options for collection utilities​

For every utility that takes an options object, its internally guarded with default parameters to ensure that you can customize just what you want and let the rest be.

Common errors​

The sources of bias when manipulating color are nuanced and sometimes not immediately obvious.

Why am I only getting achromatic (grey) colors ?​

One of the bugs I encountered was when I got gray colors if I tried to interpolate via black. The bug stemmed from the fact that black has an undefined hue channel therefore all the resulting colors would have NaN as their hue channel value. The way around this was to explicitly pass all channels as 0 in the target hue based colorspace.

Generated color samples are a bit off​

At the mopment there's inevitable precision loss when converting across certain colorspaces. This can slightly alter the final result of the color. In the future, I may provide a fix for this.