-
Notifications
You must be signed in to change notification settings - Fork 0
2b. Color 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.
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)"
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)"
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)"
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)"
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)"
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)"
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)"
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)"