![]() ![]() Returns a color from the color temperature scale. GL is a variant of RGB(A), with the only difference that the components are normalized to the range of 0.1. chroma.hcl(130, 40, 80) Ĭhroma.oklch (Lightness, chromacity, hue) chroma.oklch(0.5, 0.2, 240) Ĭhroma.cmyk (cyan, magenta, yellow, black)Įach between 0 and 1. Lightness and hue channels are switched to be more consistent with HSL. The range for lightness and chroma depend on the hue, but go roughly from 0.100-150. chroma.hsl(330, 1, 0.6)Ĭhroma.hsv (hue, saturation, value) chroma.lab (Lightness, a, b)ĬIELAB color space chroma.lab(40,-20,50) For a list of all supported color spaces, check the appendix. New (since 2.0): you can also construct colors by passing an plain JS object with attributes corresponding to a color space supported by chroma.js: chroma() Īlso new: you can use chroma.valid to try if a color argument can be correctly parsed as color by chroma.js: chroma.valid('red') Īlternatively, every color space has its own constructor function under the chroma namespace. Here we define the same color in HSL by passing the h ue angle (0-360) and percentages for s aturation and l*ightness: chroma(330, 1, 0.6, 'hsl') You can construct colors from different color spaces by passing the name of color space as the last argument. You can pass the numbers as individual arguments or as an array. You also can pass RGB values individually. In addition to hex strings, hexadecimal numbers (in fact, just any number between 7215) will be recognized, too. So, any of these are valid hexadecimal representations: #ff3399, FF3399, #f39, etc. It ignores case, the # sign is optional, and it can recognize the shorter three letter format as well. If there's no matching named color, chroma.js checks for a hexadecimal string. ![]() For instance, it will recognize any named color from the W3CX11 specification: chroma('hotpink') This function attempts to guess the format of the input color for you. That's what the generic constructor chroma() does. The first step is to get your color into chroma.js. chroma.scale()Ĭhroma.js has a lot more to offer, but that's the gist of it. Here's an example for a simple read / manipulate / output chain: chroma('pink').darken().saturate(2).hex()Īside from that, chroma.js can also help you generate nice colors using various methods, for instance to be used in color palette for maps or data visualization.
0 Comments
Leave a Reply. |