0.1.0 • Published 2 years ago

colorgrad-js v0.1.0

Weekly downloads
-
License
MIT OR Apache-2.0
Repository
github
Last release
2 years ago

colorgrad-js

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

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, {
    customGradient
} from "./node_modules/colorgrad-js/web/colorgrad.js";

async function run() {
    await init();

    const grad = 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());

Similar Projects