ColorItem

ColorItem

HSVA color manipulation

Constructor

new ColorItem(color, format, disableHexInputFallback)

Source:
Parameters:
Name Type Default Description
color ColorItem | HSVAColor | QixColor | String | * | null null

Color data
format String | null null

Color model to convert to by default. Supported: 'rgb', 'hsl', 'hex'.
disableHexInputFallback boolean false

Disable fixing hex3 format

Members

(static) colorFormulas :Object

List of hue-based color formulas used by ColorItem.prototype.generate()

Source:
Type:
  • Object

(static) HSVAColor

Returns the HSVAColor class

Source:
Example
let colorData = new ColorItem.HSVAColor(360, 100, 100, 1);

alpha

Sets the alpha value. It will be rounded to 2 decimals.

Source:

alpha

Alpha value from 0.0 to 1.0

Source:

format

Default color format to convert to when calling toString() or string()

Source:

format

Sets the default color format

Source:

hue

Hue value from 0 to 360

Source:

hue

Sets the hue value

Source:

original

Returns the original ColorItem constructor data, plus a 'valid' flag to know if it's valid or not.

Source:

saturation

Sets the saturation value

Source:

saturation

Saturation value from 0 to 100

Source:

value

Value channel value from 0 to 100

Source:

value

Sets the 'value' channel value

Source:

Methods

(static) isHex(str) → {boolean}

Detects if a value is a string and a color in hexadecimal format (in any variant).

Source:
Parameters:
Name Type Description
str String
Returns:
Type:
boolean
Examples
ColorItem.isHex('rgba(0,0,0)'); // false
ColorItem.isHex('ffaa00'); // true
ColorItem.isHex('#ffaa00'); // true

(static) parse(color, disableHexInputFallback) → {QixColor|null}

Parses the color returning a Qix Color object or null if cannot be parsed.

Source:
Parameters:
Name Type Default Description
color ColorItem | HSVAColor | QixColor | String | * | null

Color data
disableHexInputFallback boolean false

Disable fixing hex3 format
Returns:
Type:
QixColor | null
Example
let qColor = ColorItem.parse('rgb(255,0,0)');

(static) sanitizeFormat(format) → {String}

Sanitizes a color format to one supported by web browsers. Returns an empty string of the format can't be recognised.

Source:
Parameters:
Name Type Description
format String | *
Returns:
Type:
String

'rgb', 'hsl', 'hex' or ''.

Examples
ColorItem.sanitizeFormat('rgba'); // 'rgb'
ColorItem.isHex('hex8'); // 'hex'
ColorItem.isHex('invalid'); // ''

(static) sanitizeString(str) → {String|*}

Sanitizes a color string, adding missing hash to hexadecimal colors and converting 'transparent' to a color code.

Source:
Parameters:
Name Type Description
str String | *

Color string
Returns:
Type:
String | *
Example
let colorStr = ColorItem.sanitizeString('ffaa00');

api(fn, …args) → {ColorItem|QixColor|*}

Applies a method of the QixColor API and returns a new Color object or the return value of the method call.

If no argument is provided, the internal QixColor object is returned.

Source:
Parameters:
Name Type Attributes Description
fn String

QixColor function name
args <repeatable>

QixColor function arguments
Returns:
Type:
ColorItem | QixColor | *
Examples
let darkerColor = color.api('darken', 0.25);
let luminosity = color.api('luminosity');
color = color.api('negate');
let qColor = color.api().negate();

equals(color) → {boolean}

Returns true if the given color values equals this one, false otherwise. The format is not compared. If any of the colors is invalid, the result will be false.

Source:
Parameters:
Name Type Description
color ColorItem | HSVAColor | QixColor | String | * | null

Color data
Returns:
Type:
boolean

generate(formula) → {Array.<ColorItem>}

Generates a list of colors using the given hue-based formula or the given array of hue values. Hue formulas can be extended using ColorItem.colorFormulas static property.

Source:
Parameters:
Name Type Description
formula String | Array.<Number>

Examples: 'complementary', 'triad', 'tetrad', 'splitcomplement', [180, 270]
Returns:
Type:
Array.<ColorItem>
Examples
let colors = color.generate('triad');
let colors = color.generate([45, 80, 112, 200]);

getClone() → {ColorItem}

Creates a copy of this instance

Source:
Returns:
Type:
ColorItem

getCloneHueOnly() → {ColorItem}

Creates a copy of this instance, only copying the hue value, and setting the others to its max value.

Source:
Returns:
Type:
ColorItem

getCloneOpaque() → {ColorItem}

Creates a copy of this instance setting the alpha to the max.

Source:
Returns:
Type:
ColorItem

hasAlpha() → {boolean}

Returns true if the alpha value is numeric, false otherwise

Source:
Returns:
Type:
boolean

hasTransparency() → {boolean}

Returns true if the alpha value is numeric and less than 1, false otherwise

Source:
Returns:
Type:
boolean

isDark() → {boolean}

Returns true if the color is dark, false otherwhise. This is useful to decide a text color.

Source:
Returns:
Type:
boolean

isDesaturated() → {boolean}

Returns true if the saturation value is zero, false otherwise

Source:
Returns:
Type:
boolean

isLight() → {boolean}

Returns true if the color is light, false otherwhise. This is useful to decide a text color.

Source:
Returns:
Type:
boolean

isTransparent() → {boolean}

Returns true if the alpha value is zero, false otherwise

Source:
Returns:
Type:
boolean

isValid() → {boolean}

Returns true if the color is valid, false if not.

Source:
Returns:
Type:
boolean

replace(color, format, disableHexInputFallback)

Replaces the internal QixColor object with a new one. This also replaces the internal original color data.

Source:
Parameters:
Name Type Default Description
color ColorItem | HSVAColor | QixColor | String | * | null

Color data to be parsed (if needed)
format String | null null

Color model to convert to by default. Supported: 'rgb', 'hsl', 'hex'.
disableHexInputFallback boolean false

Disable fixing hex3 format
Examples
color.replace('rgb(255,0,0)', 'hsl');
color.replace(hsvaColorData);

string(format) → {String}

Converts the current color to its string representation, using the given format.

Source:
Parameters:
Name Type Default Description
format String | null null

Format to convert to. If empty or null, the internal format will be used.
Returns:
Type:
String

toHexString() → {String}

Converts the color to a Hexadecimal string

Source:
Returns:
Type:
String

toHslString() → {String}

Converts the color to a HSL string

Source:
Returns:
Type:
String

toHsva() → {HSVAColor}

Alias of toObject()

Source:
Returns:
Type:
HSVAColor

toObject() → {HSVAColor}

Returns a new HSVAColor object, based on the current color

Source:
Returns:
Type:
HSVAColor

toRgbString() → {String}

Converts the color to a RGB string

Source:
Returns:
Type:
String

toString() → {String}

Converts the current color to its string representation, using the internal format of this instance.

Source:
Returns:
Type:
String