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

Overview

colorgrad-js

npm

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

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

You might also like...
Tiny color conversion library for TUI application builders
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

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

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

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

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.

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

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

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

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

Comments
  • TextEncoder is not a constructor

    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
🚀 JavaScript driver for ScyllaDB, harnessing Rust's power through napi-rs for top performance. Pre-release stage. 🧪🔧

?? JavaScript driver for ScyllaDB. Pre-release stage. ???? ⚠️ Disclaimer ⚠️ This repository and the associated npm package are currently in a ?? pre-r

Daniel Boll 16 Oct 21, 2023
🐚+🦞 Ultra-portable Rust game engine suited for offline 2D games powered by WebAssembly

pagurus ?? + ?? Ultra-portable Rust game engine suited for offline 2D games powered by WebAssembly. Examples Snake Traditional snake game: examples/sn

Takeru Ohta 20 Mar 7, 2023
A high-performance Rust library designed to seamlessly integrate with the Discord API.

Rucord - Rust Library for Discord API Interactions Note: This library is currently under development and is not yet recommended for production use. Ov

Coders' Collab 4 Feb 26, 2023
Schemars is a high-performance Python serialization library, leveraging Rust and PyO3 for efficient handling of complex objects

Schemars Introduction Schemars is a Python package, written in Rust and leveraging PyO3, designed for efficient and flexible serialization of Python c

Michael Gendy 7 Nov 21, 2023
Rust bindings to the Vectorscan high-performance regex library

vectorscan-rs Overview This repository contains Rust bindings to the high-performance Vectorscan regular expression library. The bindings are organize

Brad Larsen 5 Apr 9, 2024
A modern high-performance open source file analysis library for automating localization tasks

?? Filecount Filecount is a modern high-performance open source file analysis library for automating localization tasks. It enables you to add file an

Babblebase 4 Nov 11, 2022
A high-performance WebSocket integration library for streaming public market data. Used as a key dependency of the `barter-rs` project.

Barter-Data A high-performance WebSocket integration library for streaming public market data from leading cryptocurrency exchanges - batteries includ

Barter 23 Feb 3, 2023
A dead simple ANSI terminal color painting library for Rust.

yansi A dead simple ANSI terminal color painting library for Rust. use yansi::Paint; print!("{} light, {} light!", Paint::green("Green"), Paint::red(

Sergio Benitez 169 Dec 25, 2022
Rust library to convert RGB 24-bit colors into ANSI 256 (8-bit) color codes with zero dependencies and at compile-time.

rgb2ansi256 rgb2ansi256 is a small Rust library to convert RGB 24-bit colors into ANSI 256 (8-bit) color codes with zero dependencies and const fn. Th

Linda_pp 7 Nov 17, 2022
An abstract, safe, and concise color conversion library for rust nightly This requires the feature adt_const_params

colortypes A type safe color conversion library This crate provides many methods for converting between color types. Everything is implemented abstrac

Jacob 13 Dec 7, 2022