Skip to content

mazznoer/colorgrad-js

master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
web
 
 
 
 
 
 
 
 
 
 
 
 

colorgrad (js)

npm

High-performance Javascript color gradient library powered by Rust + WebAssembly.

Benchmarks

cd examples
npm install
node bench.js

Result

@mazznoer/colorgrad x 3,545,478 ops/sec ±58.66% (63 runs sampled)
chroma-js x 1,269,533 ops/sec ±1.27% (93 runs sampled)
d3-scale x 1,833,694 ops/sec ±0.43% (91 runs sampled)
tinygradient x 360,247 ops/sec ±1.26% (93 runs sampled)
color-interpolate x 933,391 ops/sec ±1.81% (87 runs sampled)
Fastest is @mazznoer/colorgrad

Installation

npm i @mazznoer/colorgrad

Usage

import colorgrad from "@mazznoer/colorgrad";

let gradient = colorgrad.custom_gradient(["#C41189", "#00BFFF", "#FFD700"], null, "oklab", "linear");

// get the gradient domain min & max
console.log(gradient.domain()); // [0, 1]

// get single color at position 0.5
let hex = gradient.at(0.5).hex();

// get single color at position 0.75
let [r, g, b, a] = gradient.at(0.75).rgba8();

// get 100 colors evenly spaced along gradient
let colors = gradient.colors(100);

for (let c of colors) {
    console.log(c.hex());
}

API

Custom Gradient

// colorgrad.custom_gradient(colors, position, blending_mode, interpolation_mode);

let g = colorgrad.custom_gradient(["deeppink", "gold", "seagreen"]);

let g = colorgrad.custom_gradient(["deeppink", "gold", "seagreen"], [0, 0.35, 1.0]);

let g = colorgrad.custom_gradient(["deeppink", "gold", "seagreen"], null, "oklab", "catmull-rom");

Preset Gradients

let g = colorgrad.rainbow();

console.log(g.at(0.5).hex());

Building

Requirements:

cd colorgrad-js
wasm-pack build --target nodejs

Similar Projects

About

High-performance Javascript color gradient library powered by Rust + WebAssembly

Topics

Resources

License

Apache-2.0, MIT licenses found

Licenses found

Apache-2.0
LICENSE-APACHE
MIT
LICENSE-MIT

Stars

Watchers

Forks