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

Nor Khasyatillah

Last update: Apr 25, 2023

Related tags

Command-line visualization nodejs color webassembly wasm rainbow colormap gradient

Overview

colorgrad-js

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

cd examples
npm install
node bench.js

Result

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

Installation

npm i colorgrad-js

Usage

Node.js

import colorgrad from "colorgrad-js";

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

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

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

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

Bundler

import * as colorgrad from "colorgrad-js/bundler";

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

Browser

<html>
<head>
<script type="module">

import init, * as colorgrad from "https://unpkg.com/[email protected]/web/colorgrad.js";

async function run() {
    await init();

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

run();

</script>
</head>
<body>
</body>
</html>

API

Custom Gradient

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

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

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

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

Preset Gradients

colorgrad.rainbow()
colorgrad.sinebow()
colorgrad.turbo()
colorgrad.cividis()
colorgrad.cubehelixDefault()
colorgrad.warm()
colorgrad.cool()

const g = colorgrad.rainbow();

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

Building

Requirements:

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

Similar Projects

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

You might also like...

Tiny color conversion library for TUI application builders

Definition of ANSI, RGB and HSL color types and all the conversions between them. There are many other color conversion crates. This one may be useful

8 Dec 15, 2022

Rust in Anger: high-performance web applications

Rust in Anger: Book demo This is the code repository that accompanies the Rust in Anger blog post. The following folders each come with their own buil

26 Apr 9, 2023

An extremely high performance logging system for clients (iOS, Android, Desktop), written in Rust.

Pinenut Log 中文文档・ English An extremely high performance logging system for clients (iOS, Android, Desktop), written in Rust. Overview Compression Pin

4 Dec 1, 2023

A lightweight and high-performance order-book designed to process level 2 and trades data. Available in Rust and Python

ninjabook A lightweight and high-performance order-book implemented in Rust, designed to process level 2 and trades data. Available in Python and Rust

134 Jul 22, 2024

High-performance and normalised trading interface capable of executing across many financial venues

High-performance and normalised trading interface capable of executing across many financial venues. Also provides a feature rich simulated exchange to assist with backtesting and dry-trading.

7 Dec 28, 2022

High-performance asynchronous computation framework for system simulation

Asynchronix A high-performance asynchronous computation framework for system simulation. What is this? Warning: this page is at the moment mostly addr

7 Dec 7, 2022

High-performance, low-level framework for composing flexible web integrations

High-performance, low-level framework for composing flexible web integrations. Used mainly as a dependency of `barter-rs` project

8 Dec 28, 2022

High performance wlroots screen recording, featuring hardware encoding

wl-screenrec High performance wlroots based screen recorder. Uses dma-buf transfers to get surface, and uses the GPU to do both the pixel format conve

32 Jan 21, 2023

The Amp programming language: a language designed for building high performance systems.

A language designed for building high performance systems. Platform Support x86_64-pc-windows ✅ x86_64-unknown-linux ⚠️ untested x86_64-unknown-darwin

5 Mar 17, 2023

Comments

TextEncoder is not a constructor

I'm getting an error just importing this module, any ideas?

Uncaught TypeError: TextEncoder is not a constructor

This is what I did.

npm init -y
npm install @mazznoer/colorgrad
npm install --save-dev parcel

I made an index.html that pulled in an index.js

--index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <title>Colorgrad</title>

    <script src="index.js" type="module" />
  </head>
  <body>
    Colorgrad
  </body>
</html>

--index.js

import colorgrad from "@mazznoer/colorgrad";

Then I added a script in package.json

...
  "scripts": {
    "dev:watch": "parcel index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...

Then npm run dev:watch and when I open the browser http://localhost:1234/ I get the error above in the console. Any ideas?

opened by larksoftware 3