Skip to content

Latest commit

 

History

History
1931 lines (1209 loc) · 44.9 KB

API.md

File metadata and controls

1931 lines (1209 loc) · 44.9 KB

Table of Contents

colorutil

endian

Get the endian used by the system.

https://developer.mozilla.org/en-US/docs/Glossary/Endianness

Returns number 0=little-endian, 1=big-endian, 2=unknown-endian

convert

Run conversion functions for single color, array of colors or matrix of colors.

Parameters

  • colors any Array of colors or single color
  • conversionFunctions ...function Rest of the parameters are conversion functions which are executed in the order they are listed.

Examples

colorutil.convert(0xFF0000, colorutil.int.to.hex);
// output: "#ff0000"

colorutil.convert([0xFF0000, 0x00FF00], colorutil.int.to.hex);
// output: ["#ff0000", "#00ff00"]

colorutil.convert([[0xFF0000, 0x00FF00], 0x0000FF], colorutil.int.to.hex);
// output: [['#ff0000', '#00ff00'], '#0000ff']

colorutil.convert([[0xFF0000, 0x00FF00], 0x0000FF], colorutil.int.to.hex, colorutil.hex.to.cssrgb);
// output: [['rgb(255,0,0)', 'rgb(0,255,0)'], 'rgb(0,0,255)']

Returns Array

repeat

stop

Stop gradient at the edge color

Parameters
  • position

repeat

Repeat gradient with the same pattern

Parameters
  • position

color

Immutable class which holds and caches all the color values

clone

Create clone of this color.

Returns Color

hueFromColor

Create clone of this color where hue is shifted to same as with the color in argument.

Parameters
  • color any Any color value

Returns Color

hue

Create new color which is the hue color of this color. Cached

Returns Color

rgb

Rgb conversion functions

Rgb object notation is {r:RRR, g:GGG, b:BBB, a:AAA} where each color component (red, grean, blue, alpha) range is 0-255. In some conversion functions alpha is not required. In those where it is required and not present in rgb object, a fully opaque value is used as a default.

test

Test validity of a color whether it is in correct notation for this class.

Parameters
  • color any The color

Returns boolean True if valid, False otherwise.

gradient

Creates a gradient.

Parameters
  • options Object Options
    • options.colors (Array | GradientData) Array of colors or instance of GradientData. There are multiple types of data structures. Data structure defines whether the gradient is one or two-dimensional.
    • options.type string Gradient type: linear | circular (optional, default 'linear')
    • options.verify boolean Verify that each of the colors in colors property have valid data structure. If set to true, createGradient will throw an error if data structure is not correct. Data structure is tested from one sample to identify the data structure. This does not affect that behavior. (optional, default false)
    • options.validate boolean Validate and add missing color stops and convert colors data structure to internal data structure (optional, default true)
    • options.defaultColor function Default color used to fill the missing color components in gradient colors. If options.colors is GradientData, specify the defaultColor for GradientData instead. (optional, default {r:0,g:0,b:0,a:255})
    • options.width number Set size of the gradient in pixels. (optional, default 100)
    • options.height number Set size of the gradient in pixels. (optional, default 100)
    • options.centerX number Center position of a gradient. Value in range 0 to 1 where 0 is the left edge of the gradient and 1 is the right edge. centerX can be used with linear type of gradients to set point of rotation. (optional, default 0)
    • options.centerY number Center position of a gradient. Value in range 0 to 1 where 0 is the top edge of the gradient and 1 is the bottom edge. centerY can be used with linear type of gradients to set point of rotation. (optional, default 0)
    • options.scale number Scale of the gradient. Value in range 0 to 1. (optional, default 1)
    • options.scaleX number Scale of the gradient on x axis. Value in range 0 to 1. (optional, default 1)
    • options.scaleY number Scale of the gradient on y axis. Value in range 0 to 1. (optional, default 1)
    • options.translateX number Translate gradient along x axis. Value in range 0 to 1. (optional, default 0)
    • options.translateY number Translate gradient along y axis. Value in range 0 to 1. (optional, default 0)
    • options.centralize boolean Overrides translate values and automatically adjusts the positioning to the center. (optional, default false)
    • options.rotation number Rotation of the gradient. Value in range 0 to 1. (optional, default 0)
    • options.repeatX function X repetition of gradient when calculating a color that is out of normal range 0 to 1. (optional, default colorutil.repeat.repeat)
    • options.repeatY function Y repetition of gradient when calculating a color that is out of normal range 0 to 1. (optional, default colorutil.repeat.repeat)

Returns function Function that calculates a color for a single point on gradient. Accepts x and y parameters. Though the x and y may exceed the limit, but gradient repeat will take effect.

gradientData

Create a gradient data object which allows conversion between the supported data structures

Parameters
  • data Array Array of colors. There are multiple types of data structures.
  • defaultColor Object The default color (optional, default {r:0,g:0,b:0,a:255})

Returns GradientData

hueColors

Returns Array Array of hue colors

hue

Parameters

Returns Object hue color in Rgb object notation

to

int

Convert rgb object {r:RRR, g:GGG, b:BBB, a:AAA} to 24-bit number 0xRRGGBB. Alpha is ignored.

Parameters
Examples
colorutil.rgb.to.int({r: 0, g: 128, b: 255});
// output: 33023

Returns number

hex

Convert rgb object {r:RRR, g:GGG, b:BBB, a:AAA} to 24-bit hex string '#RRGGBB'. Alpha is ignored.

Parameters
Examples
colorutil.rgb.to.hex({r: 0, g: 128, b: 255});
// output: "#0080ff"

Returns string

cssrgb

Convert rgb object {r:RRR, g:GGG, b:BBB} to rgb functional notation string 'rgb(RRR,GGG,BBB)'. Alpha is converted from range 0-255 to 0-1.

Parameters
Examples
colorutil.rgb.to.cssrgb({r: 0, g: 128, b: 255});
// output: "rgb(0,128,255)"

Returns string

cssrgba

Convert rgb object {r:RRR, g:GGG, b:BBB, a:AAA} to rgb functional notation string 'rgba(RRR,GGG,BBB,A)'. Alpha is converted from range 0-255 to 0-1.

Parameters
Examples
colorutil.rgb.to.cssrgba({r: 0, g: 128, b: 255, a: 85});
// output: "rgba(0,128,255,0.3333333333333333)"

Returns string

uintabgr

Convert rgb object {r:RRR, g:GGG, b:BBB, a:AAA} to 32-bit number 0xAABBGGRR (little-endian) Resulting value is positive

Parameters
Examples
colorutil.rgb.to.uintabgr({r: 0, g: 128, b: 255, a: 255});
// output: 4294934528
colorutil.rgb.to.uintabgr({r: 0, g: 128, b: 255, a: 85});
// output: 1442807808

Returns number

uintabgrOpaque

Convert rgb object {r:RRR, g:GGG, b:BBB} to 32-bit number 0xAABBGGRR (little-endian) Alpha value is discarded and fully opaque value is used. Resulting value is positive

Parameters
Examples
colorutil.rgb.to.uintabgrOpaque({r: 0, g: 128, b: 255})
// output: 4294934528

Returns number

uintrgba

Convert rgb object {r:RRR, g:GGG, b:BBB, a:AAA} to 32-bit number 0xRRGGBBAA (big-endian) Resulting value is positive

Parameters
Examples
colorutil.rgb.to.uintrgba({r: 0, g: 128, b: 255, a: 255});
// output: 8454143
colorutil.rgb.to.uintrgba({r: 0, g: 128, b: 255, a: 85});
// output: 8453973

Returns number

intabgr

Convert rgb object {r:RRR, g:GGG, b:BBB, a:AAA} to 32-bit number 0xAABBGGRR (little-endian) Resulting value can be negative.

Parameters
Examples
colorutil.rgb.to.intabgr({r: 0, g: 128, b: 255, a: 255});
// output: -32768
colorutil.rgb.to.intabgr({r: 0, g: 128, b: 255, a: 85});
// output: 1442807808

Returns number

intabgrOpaque

Convert rgb object {r:RRR, g:GGG, b:BBB} to 32-bit number 0xAABBGGRR (little-endian) Alpha value is discarded and fully opaque value is used. Resulting value can be negative.

Parameters
Examples
colorutil.rgb.to.intabgrOpaque({r: 0, g: 128, b: 255})
// output: -32768

Returns number

intrgba

Convert rgb object {r:RRR, g:GGG, b:BBB, a:AAA} to 32-bit number 0xRRGGBBAA (big-endian). Resulting value can be negative.

Parameters
Examples
colorutil.rgb.to.intrgba({r: 0, g: 128, b: 255, a: 255});
// output: 8454143
colorutil.rgb.to.intrgba({r: 0, g: 128, b: 255, a: 85});
// output: 8453973

Returns number

hsl

Convert rgb object {r:RRR, g:GGG, b:BBB, a:AAA} to hsl object {h:H, s:S, l:L, a:A} where h, s, l, a (saturation, luminosity, alpha) are in range 0-1.

Parameters
Examples
colorutil.rgb.to.hsl({r: 255, g: 0, b: 0, a: 255});
// output: {h: 0, s: 1, l: 0.5, a: 1}

Returns Object

hsv

Convert rgb object {r:RRR, g:GGG, b:BBB, a:AAA} to hsv object {h:H, s:S, v:V, a:A} where h, s, v, a (hue, saturation, value, alpha) are in range 0-1.

Parameters
Examples
colorutil.rgb.to.hsv({r: 255, g: 0, b: 0, a: 255});
// output: {h: 0, s: 1, v: 1, a: 1}

Returns Object

any

Any conversion functions.

Converts color notations to any notation. (Except for Intrgba and Int32ABGR)

The any conversion functions provide an easy way to convert to specific notation without knowing the notation of a source color. This is just a collection of convenience methods making the usage a little bit easier. These functions are not as fast as the direct conversion functions.

to

rgb

Convert any color to rgb object notation {r:RRR, g:GGG, b:BBB, a:AAA}

Parameters
  • color Object Color in any notation
Examples
colorutil.any.to.rgb(0xFF0000);
// output: {r: 255, g: 0, b: 0, a: 255}

colorutil.any.to.rgb({h: 1/6, s: 0.5, l: 0.5});
// output: {r: 191, g: 191, b: 64, a: 255}

Returns Object

int

Convert any color to number notation 0xRRGGBB

Parameters
  • color Object Color in any notation
Examples
colorutil.any.to.int('hsl(180, 50%, 60%)');
// output: 6737100

Returns number

hex

Convert any color to hex notation '#RRGGBB'

Parameters
  • color Object Color in any notation
Examples
colorutil.any.to.hex('hsl(180, 50%, 60%)');
// output: "#66cccc"

Returns string

cssrgb

Convert any color to rgb functional notation 'rgb(RRR,GGG,BBB)'

Parameters
  • color Object Color in any notation
Examples
colorutil.any.to.cssrgb('hsl(180, 50%, 60%)');
// output: "rgb(102,204,204)"

Returns string

cssrgba

Convert any color to rgb functional notation 'rgba(RRR,GGG,BBB,A)'

Parameters
  • color Object Color in any notation
Examples
colorutil.any.to.cssrgba('hsl(180, 50%, 60%)');
// output: "rgba(102,204,204,1)"

Returns string

hsl

Convert any color to hsl object notation {h:H, s:S, v:V, a:A}

Parameters
  • color Object Color in any notation
Examples
colorutil.any.to.hsl('hsl(180, 50%, 60%)');
// output: {h: 0.5, s: 0.5, l: 0.6, a: 1}

Returns Object

hsv

Convert any color to hsv object notation {h:H, s:S, v:V, a:A}

Parameters
  • color Object Color in any notation
Examples
colorutil.any.to.hsv('hsl(180, 50%, 60%)');
// output: {h: 0.5, s: 0.5000000000000001, v: 0.8, a: 1}

Returns Object

csshsl

Convert any color to hsl functional notation string 'hsl(HHH,SSS%,LLL%)'

Parameters
  • color Object Color in any notation
Examples
colorutil.any.csshsl({h: 0.5, s: 0.5, l: 0.6, a: 1});
// output: "hsl(180,50%,60%)"

Returns string

csshsla

Convert any color to hsl functional notation string 'hsla(HHH,SSS%,LLL%,A)'

Parameters
  • color Object Color in any notation
Examples
colorutil.any.csshsla({h: 0.5, s: 0.5, l: 0.6, a: 1});
// output: "hsla(180,50%,60%,1)"

Returns string

int

Number conversion functions.

Int notation is 24-bit number representing the RGB values 0xRRGGBB.

test

Test validity of a color whether it is in correct notation for this class.

Parameters
  • color any The color

Returns boolean True if valid, False otherwise.

to

rgb

24-bit number 0xRRGGBB to rgb {r:RRR, g:GGG, b:BBB, a:AAA}

Parameters
  • int number Integer
  • a number Alpha value in range 0-255 (optional, default 0xFF)
Examples
colorutil.int.to.rgb(0xFF0000);
// output: {r: 255, g: 0, b: 0, a: 255}

colorutil.int.to.rgb(0xFF0000, 128);
// output: {r: 255, g: 0, b: 0, a: 128}

Returns Object

hex

24-bit number 0xRRGGBB to 24-bit hex string '#RRGGBB'.

Parameters
Examples
colorutil.int.to.hex(0x00FF00);
// output: "#00ff00"

Returns string

cssrgb

24-bit number 0xRRGGBB to rgb functional notation string 'rgb(RRR,GGG,BBB)'

Parameters
Examples
colorutil.int.to.cssrgb(0x00FF00);
// output: "rgb(0,255,0)"

Returns string

cssrgba

24-bit number 0xRRGGBB to rgb functional notation string 'rgba(RRR,GGG,BBB,A)'

Parameters
  • int number Integer
  • a number Alpha value in range 0-1 (optional, default 1)
Examples
colorutil.int.to.cssrgba(0x00FF00);
// output: "rgba(0,255,0,1)"

colorutil.int.to.cssrgba(0x00FF00, 0.5);
// output: "rgba(0,255,0,0.5)"

Returns string

hex

Hexadecimal conversion functions

Hex notation is 24-bit hex string representing the RGB values '#RRGGBB'.

test

Test validity of a color whether it is in correct notation for this class.

Parameters
  • color any The color

Returns boolean True if valid, False otherwise.

to

rgb

24-bit hex string '#RRGGBB' to rgb object {r:RRR, g:GGG, b:BBB, a:AAA}

Parameters
  • hex string Hexadecimal string
  • a number Alpha value in range 0-255 (optional, default 0xFF)
Examples
colorutil.hex.to.rgb('#00FF00');
// output: {r: 0, g: 255, b: 0, a: 255}
colorutil.hex.to.rgb('#00FF00', 127);
// output: {r: 0, g: 255, b: 0, a: 127}

Returns Object

int

24-bit hex string '#RRGGBB' to 24-bit integer 0xRRGGBB

Parameters
  • hex string Hexadecimal string
Examples
colorutil.hex.to.int('#00FF00');
// output: 65280

Returns number

cssrgb

24-bit hex string '#RRGGBB' to rgb functional notation string 'rgb(RRR,GGG,BBB)'

Parameters
  • hex string Hexadecimal string
Examples
colorutil.hex.to.cssrgb('#00FF00')
// output: "rgb(0,255,0)"

Returns string

cssrgba

24-bit hex string '#RRGGBB' to rgb functional notation string 'rgba(RRR,GGG,BBB,A)'

Parameters
  • hex string Hexadecimal string
  • a number Alpha value in range 0-1 (optional, default 1)
Examples
colorutil.hex.to.cssrgba('#00FF00')
// output: "rgba(0,255,0,1)"

colorutil.hex.to.cssrgba('#00FF00', 0.5)
// output: "rgba(0,255,0,0.5)"

Returns string

cssrgb

cssrgb conversion functions

cssrgb notation is 'rgb(RRR,GGG,BBB)'

test

Test validity of a color whether it is in correct notation for this class.

Parameters
  • color any The color

Returns boolean True if valid, False otherwise.

to

rgb

Rgb functional notation string 'rgb(RRR,GGG,BBB)' to rgb object {r:RRR, g:GGG, b:BBB, a:AAA}

Parameters
  • cssrgb string Rgb string
  • a number Alpha value in range 0-255 (optional, default 0xFF)
Examples
colorutil.cssrgb.to.rgb('rgb(0,255,0)')
// output: {r: 0, g: 255, b: 0, a: 255}

Returns Object

int

Rgb functional notation string 'rgb(RRR,GGG,BBB)' to 24-bit integer 0xRRGGBB. Alpha is ignored.

Parameters
Examples
colorutil.cssrgb.to.int('rgb(0,255,0)')
// output: 65280

Returns number

hex

Rgb functional notation string 'rgb(RRR,GGG,BBB)' to hexadecimal string '#RRGGBB'. Alpha is ignored.

Parameters
Examples
colorutil.cssrgb.to.hex('rgb(0,255,0)')
// output: "#00ff00"

Returns string

cssrgba

cssrgba conversion functions

cssrgba notation is 'rgba(RRR,GGG,BBB,A)'

test

Test validity of a color whether it is in correct notation for this class.

Parameters
  • color any The color

Returns boolean True if valid, False otherwise.

to

rgb

Rgba functional notation string 'rgba(RRR,GGG,BBB,A)' to rgb object {r:RRR, g:GGG, b:BBB, a:AAA}

Parameters
Examples
colorutil.cssrgba.to.rgb('rgba(0,255,0,0.5)')
// output: {r: 0, g: 255, b: 0, a: 127}

Returns Object

int

Rgba functional notation string 'rgba(RRR,GGG,BBB,A)' to 24-bit integer 0xRRGGBB. Alpha is ignored.

Parameters
Examples
colorutil.cssrgba.to.int('rgba(0,255,0,0.5)')
// output: 65280

Returns number

hex

Rgba functional notation string 'rgba(RRR,GGG,BBB,A)' to hexadecimal string '#RRGGBB'. Alpha is ignored.

Parameters
Examples
colorutil.cssrgba.to.hex('rgba(0,255,0,0.5)')
// output: "#00ff00"

Returns string

hsl

Hsl conversion functions

Hsl notation is {h:H, s:S, l:L, a:A} where each component (hue, saturation, luminosity, alpha) is in range 0-1.

test

Test validity of a color whether it is in correct notation for this class.

Parameters
  • color any The color

Returns boolean True if valid, False otherwise.

gradient

Creates a gradient.

Parameters
  • options Object Options provided by user
    • options.colors (Array | GradientData) Array of colors or instance of GradientData. There are multiple types of data structures. Data structure defines whether the gradient is one or two-dimensional.
    • options.type string Gradient type: linear | circular (optional, default 'linear')
    • options.verify boolean Verify that each of the colors in colors property have valid data structure. If set to true, createGradient will throw an error if data structure is not correct. Data structure is tested from one sample to identify the data structure. This does not affect that behavior. (optional, default false)
    • options.validate boolean Validate and add missing color stops and convert colors data structure to internal data structure (optional, default true)
    • options.defaultColor function Default color used to fill the missing color components in gradient colors. If options.colors is GradientData, specify the defaultColor for GradientData instead. (optional, default {h:0,s:0,l:0,a:1})
    • options.width number Set size of the gradient in pixels. (optional, default 100)
    • options.height number Set size of the gradient in pixels. (optional, default 100)
    • options.centerX number Center position of a gradient. Value in range 0 to 1 where 0 is the left edge of the gradient and 1 is the right edge. centerX can be used with linear type of gradients to set point of rotation. (optional, default 0)
    • options.centerY number Center position of a gradient. Value in range 0 to 1 where 0 is the top edge of the gradient and 1 is the bottom edge. centerY can be used with linear type of gradients to set point of rotation. (optional, default 0)
    • options.scale number Scale of the gradient. Value in range 0 to 1. (optional, default 1)
    • options.scaleX number Scale of the gradient on x axis. Value in range 0 to 1. (optional, default 1)
    • options.scaleY number Scale of the gradient on y axis. Value in range 0 to 1. (optional, default 1)
    • options.translateX number Translate gradient along x axis. Value in range 0 to 1. (optional, default 0)
    • options.translateY number Translate gradient along y axis. Value in range 0 to 1. (optional, default 0)
    • options.centralize boolean Overrides translate values and automatically adjusts the positioning to the center. (optional, default false)
    • options.rotation number Rotation of the gradient. Value in range 0 to 1. (optional, default 0)
    • options.repeatX function X repetition of gradient when calculating a color that is out of normal range 0 to 1. (optional, default colorutil.repeat.repeat)
    • options.repeatY function Y repetition of gradient when calculating a color that is out of normal range 0 to 1. (optional, default colorutil.repeat.repeat)

Returns function Function that calculates a color for a single point on gradient. Accepts x and y parameters. Though the x and y may exceed the limit, but gradient repeat will take effect.

gradientData

Create a gradient data object which allows conversion between the supported data structures

Parameters
  • data Array Array of colors. There are multiple types of data structures.
  • defaultColor Object The default color (optional, default {h:0,s:0,l:0,a:1})

Returns GradientData

to

rgb

Hsl object {h:H, s:S, l:L, a:A} to rgb object {r:RRR, g:GGG, b:BBB, a:AAA}

Parameters
Examples
colorutil.hsl.to.rgb({h: 1/6, s: 0.5, l: 0.5});
// output: {r: 191, g: 191, b: 64, a: 255}

colorutil.hsl.to.rgb({h: 1/6, s: 0.5, l: 0.5, a: 0.5});
// output: {r: 191, g: 191, b: 64, a: 128}

Returns Object

hsv

Hsl object {h:H, s:S, l:L, a:A} to hsv object {h:H, s:S, v:V, a:A}

Parameters
Examples
colorutil.hsl.to.hsv({h: 1/6, s: 0.5, l: 0.5});
// output: {h: 0.16666666666666666, s: 0.6666666666666666, v: 0.75, a: 1}

Returns Object

csshsl

Convert hsl object {h:H, s:S, l:L} to hsl functional notation string 'hsl(HHH,SSS%,LLL%)'.

Parameters
Examples
colorutil.hsl.to.cssHsl({h:2/6, s:0.5, l:0.5});
// output: "hsl(120,50%,50%)"

Returns string

csshsla

Convert hsl object {h:H, s:S, l:L, a:A} to hsl functional notation string 'hsla(HHH,SSS%,LLL%,A)'.

Parameters
Examples
colorutil.hsl.to.csshsla({h:2/6, s:0.5, l:0.5, a:0.5});
// output: "hsla(120,50%,50%,0.5)"

Returns string

csshsl

csshsl conversion functions

Hsl functional notation is 'hsl(HHH,SSS%,LLL%)'

test

Test validity of a color whether it is in correct notation for this class.

Parameters
  • color any The color

Returns boolean True if valid, False otherwise.

to

hsl

Hsl functional notation string 'hsl(HHH,SSS%,LLL%)' to hsl object {h:H, s:S, l:L, a:A}

Parameters
  • csshsl string Hsl string
  • a number Alpha value in range 0-1 (optional, default 1)
Examples
colorutil.csshsl.to.hsl('hsl(180, 50%, 60%)');
// output: {h: 0.5, s: 0.5, l: 0.6, a: 1}

Returns Object

csshsla

csshsla conversion functions

Hsla functional notation is 'hsla(HHH,SSS%,LLL%,A)'

test

Test validity of a color whether it is in correct notation for this class.

Parameters
  • color any The color

Returns boolean True if valid, False otherwise.

to

hsl

Hsl functional notation string 'hsla(HHH,SSS%,LLL%,A)' to hsl object {h:H, s:S, l:L, a:A}

Parameters
Examples
colorutil.csshsla.to.hsl('hsla(180, 50%, 60%, 0.5)');
// output: {h: 0.5, s: 0.5, l: 0.6, a: 0.5}

Returns Object

hsv

Hsv conversion functions

Hsv notation is {h:H, s:S, v:V, a:A} where each component (hue, saturation, value, alpha) are in range 0-1.

gradient

Test validity of a color whether it is in correct notation for this class.

Parameters
  • color any The color

Returns boolean True if valid, False otherwise.

gradient

Creates a gradient.

Parameters
  • options Object Options provided by user
    • options.colors (Array | GradientData) Array of colors or instance of GradientData. There are multiple types of data structures. Data structure defines whether the gradient is one or two-dimensional.
    • options.type string Gradient type: linear | circular (optional, default 'linear')
    • options.verify boolean Verify that each of the colors in colors property have valid data structure. If set to true, createGradient will throw an error if data structure is not correct. Data structure is tested from one sample to identify the data structure. This does not affect that behavior. (optional, default false)
    • options.validate boolean Validate and add missing color stops and convert colors data structure to internal data structure (optional, default true)
    • options.defaultColor function Default color used to fill the missing color components in gradient colors. If options.colors is GradientData, specify the defaultColor for GradientData instead. (optional, default {h:0,s:0,v:0,a:1})
    • options.width number Set size of the gradient in pixels. (optional, default 100)
    • options.height number Set size of the gradient in pixels. (optional, default 100)
    • options.centerX number Center position of a gradient. Value in range 0 to 1 where 0 is the left edge of the gradient and 1 is the right edge. centerX can be used with linear type of gradients to set point of rotation. (optional, default 0)
    • options.centerY number Center position of a gradient. Value in range 0 to 1 where 0 is the top edge of the gradient and 1 is the bottom edge. centerY can be used with linear type of gradients to set point of rotation. (optional, default 0)
    • options.scale number Scale of the gradient. Value in range 0 to 1. (optional, default 1)
    • options.scaleX number Scale of the gradient on x axis. Value in range 0 to 1. (optional, default 1)
    • options.scaleY number Scale of the gradient on y axis. Value in range 0 to 1. (optional, default 1)
    • options.translateX number Translate gradient along x axis. Value in range 0 to 1. (optional, default 0)
    • options.translateY number Translate gradient along y axis. Value in range 0 to 1. (optional, default 0)
    • options.centralize boolean Overrides translate values and automatically adjusts the positioning to the center. (optional, default false)
    • options.rotation number Rotation of the gradient. Value in range 0 to 1. (optional, default 0)
    • options.repeatX function X repetition of gradient when calculating a color that is out of normal range 0 to 1. (optional, default colorutil.repeat.repeat)
    • options.repeatY function Y repetition of gradient when calculating a color that is out of normal range 0 to 1. (optional, default colorutil.repeat.repeat)

Returns function Function that calculates a color for a single point on gradient. Accepts x and y parameters. Though the x and y may exceed the limit, but gradient repeat will take effect.

gradientData

Create a gradient data object which allows conversion between the supported data structures

Parameters
  • data Array Array of colors. There are multiple types of data structures.
  • defaultColor Object The default color (optional, default {h:0,s:0,v:0,a:1})

Returns GradientData

to

rgb

Hsv object {h:H, s:S, v:V, a:A} to rgb object {r:RRR, g:GGG, b:BBB, a:AAA}

Parameters
Examples
colorutil.hsv.to.rgb({h: 0, s: 1, v: 1});
// output: {r: 255, g: 0, b: 0, a: 255}
colorutil.hsv.to.rgb({h: 0, s: 1, v: 1, a: 0.5});
// output: {r: 255, g: 0, b: 0, a: 128}

Returns Object

hsl

Hsv object {h:H, s:S, v:V, a:A} to hsl object {h:H, s:S, l:L, a:A}

Parameters
Examples
colorutil.hsv.to.hsl({h: 1/6, s: 0.5, v: 0.5});
// output: {h: 0.16666666666666666, s: 0.3333333333333333, l: 0.375, a: 1}

Returns Object

intabgr

Number conversion functions.

Int32 notation converion functions for 32-bit numbers 0xAABBGGRR (little-endian).

to

rgb

32-bit number 0xAABBGGRR (little-endian) to rgb {r:RRR, g:GGG, b:BBB, a:AAA}

Parameters
Examples
colorutil.intabgr.to.rgb(0xFF112233)
// output: {a: 255, b: 17, g: 34, r: 51}

Returns Object

intrgba

Number conversion functions.

Int32 notation converion functions for 32-bit numbers 0xRRGGBBAA (big-endian).

to

rgb

32-bit number 0xRRGGBBAA (big-endian) to rgb {r:RRR, g:GGG, b:BBB, a:AAA}

Parameters
Examples
colorutil.intrgba.to.rgb(0xFF112233)
// output: {r: 255, g: 17, b: 34, a: 51}

Returns Object

draw

Draw a gradient on canvas

Parameters

  • target (HTMLCanvasElement | string) The canvas on which gradient is drawn. Target may be canvas or css selector to canvas (evaluated with querySelector)
  • options (Object | Function) Options of gradient or gradient function

draw

Draw a gradient on canvas

Parameters

  • target (HTMLCanvasElement | string) The canvas on which gradient is drawn. Target may be canvas or css selector to canvas (evaluated with querySelector)
  • options (Object | Function) Options of gradient or gradient function

draw

Draw a gradient on canvas

Parameters

  • target (HTMLCanvasElement | string) The canvas on which gradient is drawn. Target may be canvas or css selector to canvas (evaluated with querySelector)
  • options (Object | Function) Options of gradient or gradient function