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.
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
- colorgrad (Rust)
- colorgrad (Go)
- chroma.js (Javascript)
- d3-scale-chromatic (Javascript)