A tiny library for color management.
Example usage
var header = color("red"); // header.rgb() => "rgb(255, 0, 0)"
var paragraph = header.clone().lum(20); // paragraph.rgb() => "rgb(255, 102, 102)"
Property | Description |
---|---|
input |
The argument passed to the color function. It can be a color string or an RGB array. |
type |
Type of the color, e.g., "rgb" , "rgba" , "hsl" , "hsla" . |
values |
Color values for the given type of color, e.g., [255, 0, 0] for "red" in "rgb" . |
Conversion | Description | Usage | Output |
---|---|---|---|
hex() |
Returns color in hex format. | color("red").hex() |
"#ff0000" |
rgb() |
Returns color in RGB format. | color("red").rgb() |
"rgb(255, 0, 0)" |
rgba() |
Returns color in RGBA format. If the color doesn't have alpha value, it is set to 1. |
color("red").rgba() |
"rgba(255, 0, 0, 1)" |
hsl() |
Returns color in HSL format. | color("red").hsl() |
"hsl(0, 100%, 50%)" |
hsla() |
Returns color in HSLA format. If the color doesn't have alpha value, it is set to 1. |
color("red").hsla() |
"hsla(0, 100%, 50%, 1)" |
Modification | Description | Usage |
---|---|---|
hue() |
Shifts the hue by the entered amount. | color("red").hue(70) |
sat() |
Increases/decreases the saturation by the entered amount. | color("slateblue").sat(20) |
lum() |
Increases/decreases the luminosity by the entered amount. | color("slateblue").lum(-20) |
alpha() |
Increases/decreases the alpha (opacity) by the entered amount. | color("slateblue").alpha(-0.25) |
First three methods, converts the color to HSL format, and then applies the change. If your color is in Hex or RGB format, you'll end up with HSL.