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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent