Skip to content

2b. Color functions

CookieShade edited this page Jul 18, 2016 · 1 revision

Color format functions

BETA.js includes a few functions to enable the use of several color formats, as well as enable color operations between color formats.
These functions all return color objects in RGBA format, which can be directly used in canvas rendering functions without needing to convert to strings, including the built-in functions on a canvas 2D context.

BETA.rgba(red, green, blue, alpha)

Constructs a color object with the given color channels.
red, green, blue are integers in [0, 255],
alpha is a number in [0, 1].

var color = BETA.rgba(200, 150, 100, 0.5); // Color {r: 200, g: 150, b: 100, a: 0.5} => "rgba(200, 150, 100, 0.5)"

BETA.rgb(red, green, blue)

Shorthand for BETA.rgba(red, green, blue, 1)
red, green, blue are integers in [0, 255].

var color = BETA.rgb(200, 150, 100); // Color {r: 200, g: 150, b: 100, a: 1} => "rgb(200, 150, 100)"

BETA.hsla(hue, saturation, lightness, alpha)

Constructs an RGB color from HSL color coordinates, with an additional alpha channel.
hue is an angle in degrees,
saturation and lightness are percentages in [0, 100],
alpha is a number in [0, 1].

var color = BETA.hsla(300, 100, 50, 0.75); // Color {r: 255, g: 0, b: 255, a: 0.75} => "rgba(255, 0, 255, 0.75)"

BETA.hsl(hue, saturation, lightness)

Alias for BETA.hsla(hue, saturation, lightness, 1)
hue is an angle in degrees,
saturation and lightness are percentages in [0, 100].

var color = BETA.hsl(300, 100, 50); // Color {r: 255, g: 0, b: 255, a: 1} => "rgb(255, 0, 255)"

BETA.hsva(hue, saturation, value, alpha)

Constructs an RGB color from HSV color coordinates, with an additional alpha channel.
hue is an angle in degrees,
saturation and value are percentages in [0, 100],
alpha is a number in [0, 1].

var color = BETA.hsva(300, 100, 50, 0.75); // Color {r: 128, g: 0, b: 128, a: 0.75} => "rgba(128, 0, 128, 0.75)"

BETA.hsv(hue, saturation, value)

Alias for BETA.hsva(hue, saturation, value, 1)
hue is an angle in degrees,
saturation and value are percentages in [0, 100].

var color = BETA.hsv(300, 100, 50); // Color {r: 128, g: 0, b: 128, a: 1} => "rgb(128, 0, 128)"

BETA.hwba(hue, whiteness, blackness, alpha)

Constructs an RGB color from HWB color coordinates, with an additional alpha channel.
hue is an angle in degrees,
whiteness and blackness are percentages in [0, 100],
alpha is a number in [0, 1].

var color = BETA.hwba(300, 25, 50, 0.5); // Color {r: 128, g: 64, b: 128, a: 0.5} => "rgba(128, 64, 128, 0.5)"

BETA.hwb(hue, whiteness, blackness)

Alias for BETA.hwba(hue, whiteness, blackness, 1)
hue is an angle in degrees,
whiteness and blackness are percentages [0, 100].

var color = BETA.hwb(300, 25, 50); // Color {r: 128, g: 64, b: 128, a: 1} => "rgb(128, 64, 128)"