Colorgrad

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

ColorsWeb Assembly
mazznoer/colorgrad-jsmazznoer.github.io/colorgrad-js/colorgrad-js

README

colorgrad-js

npm

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

No dependencies.
Faster than d3-scale, chroma-js, culori, tinygradient, color-interpolate.
Blend modes: rgb, linear-rgb, hsv, oklab.
Interpolation modes: linear, catmull-rom, basis.

Benchmarks


  1. ``` sh
  2. cd examples
  3. npm install
  4. node bench.js
  5. ```

Result

  1. ```
  2. colorgrad-js x 3,948,162 ops/sec ±5.55% (72 runs sampled)
  3. chroma-js x 1,150,657 ops/sec ±1.29% (91 runs sampled)
  4. culori x 1,912,210 ops/sec ±1.93% (88 runs sampled)
  5. d3-scale x 1,858,222 ops/sec ±0.14% (93 runs sampled)
  6. tinygradient x 372,325 ops/sec ±2.13% (92 runs sampled)
  7. color-interpolate x 939,965 ops/sec ±1.15% (92 runs sampled)
  8. Fastest is colorgrad-js
  9. ```

Installation


  1. ``` sh
  2. npm i colorgrad-js
  3. ```

Usage


Node.js


  1. ``` js
  2. import colorgrad from "colorgrad-js";

  4. const grad = colorgrad.customGradient(["#C41189", "#00BFFF", "#FFD700"], null, "oklab", "catmull-rom");

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

  9. // get color at 0.75
  10. console.log(grad.at(0.75).rgba8());

  12. // get 100 colors evenly spaced accross gradient domain
  13. console.log(grad.colors(100).map(c => c.hex()));
  14. ```

Bundler


  1. ``` js
  2. import * as colorgrad from "colorgrad-js/bundler";

  4. const grad = colorgrad.customGradient(["#C41189", "#00BFFF", "#FFD700"], null, "oklab", "catmull-rom");
  5. console.log(grad.at(0.75).rgba8());
  6. console.log(grad.colors(100).map(c => c.hex()));
  7. ```

Browser


  1. ``` html
  2. <html>
  3. <head>
  4. <script type="module">
  6. import init, * as colorgrad from "https://unpkg.com/colorgrad-js@0.1.0/web/colorgrad.js";
  8. async function run() {
  9.     await init();
  11.     const grad = colorgrad.customGradient(["#C41189", "#00BFFF", "#FFD700"], null, "oklab", "catmull-rom");
  12.     console.log(grad.at(0.75).rgba8());
  13.     console.log(grad.colors(100).map(c => c.hex()));
  14. }
  16. run();
  18. </script>
  19. </head>
  20. <body>
  21. </body>
  22. </html>
  23. ```

API


Custom Gradient


  1. ``` js
  2. // colorgrad.customGradient(colors, position, blending_mode, interpolation_mode);

  4. const g = colorgrad.customGradient(["deeppink", "gold", "seagreen"]);

  6. const g = colorgrad.customGradient(["deeppink", "gold", "seagreen"], [0, 0.35, 1.0]);

  8. const g = colorgrad.customGradient(["deeppink", "gold", "seagreen"], null, "oklab", "catmull-rom");
  9. ```

Preset Gradients


  1. ``` js
  2. colorgrad.rainbow()
  3. colorgrad.sinebow()
  4. colorgrad.turbo()
  5. colorgrad.cividis()
  6. colorgrad.cubehelixDefault()
  7. colorgrad.warm()
  8. colorgrad.cool()
  9. ```

  1. ``` js
  2. const g = colorgrad.rainbow();

  4. console.log(g.at(0.5).hex());
  5. ```

Building


Requirements:
+ Rust
+ wasm-pack

  1. ``` sh
  2. cd colorgrad-js
  3. wasm-pack build --target nodejs
  4. ```

Similar Projects


colorgrad (Rust)
colorgrad (Go)
chroma.js (Javascript)
d3-scale-chromatic (Javascript)