{"id":43217685,"url":"https://github.com/mazznoer/colorgrad-js","last_synced_at":"2026-02-01T08:13:59.926Z","repository":{"id":50591527,"uuid":"518487997","full_name":"mazznoer/colorgrad-js","owner":"mazznoer","description":"High-performance Javascript color gradient library powered by Rust + WebAssembly","archived":false,"fork":false,"pushed_at":"2022-08-16T12:19:13.000Z","size":125,"stargazers_count":168,"open_issues_count":0,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-09-19T06:37:58.600Z","etag":null,"topics":["color","colormap","gradient","nodejs","rainbow","visualization","wasm","webassembly"],"latest_commit_sha":null,"homepage":"https://mazznoer.github.io/colorgrad-js/","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mazznoer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-APACHE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-27T14:18:26.000Z","updated_at":"2025-08-27T13:20:26.000Z","dependencies_parsed_at":"2022-08-12T21:50:23.673Z","dependency_job_id":null,"html_url":"https://github.com/mazznoer/colorgrad-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mazznoer/colorgrad-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mazznoer%2Fcolorgrad-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mazznoer%2Fcolorgrad-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mazznoer%2Fcolorgrad-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mazznoer%2Fcolorgrad-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mazznoer","download_url":"https://codeload.github.com/mazznoer/colorgrad-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mazznoer%2Fcolorgrad-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28973365,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-01T06:46:42.625Z","status":"ssl_error","status_checked_at":"2026-02-01T06:44:56.173Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color","colormap","gradient","nodejs","rainbow","visualization","wasm","webassembly"],"created_at":"2026-02-01T08:13:59.360Z","updated_at":"2026-02-01T08:13:59.920Z","avatar_url":"https://github.com/mazznoer.png","language":"Rust","funding_links":[],"categories":[],"sub_categories":[],"readme":"# colorgrad-js\n\n[![npm](https://img.shields.io/npm/v/colorgrad-js.svg)](https://www.npmjs.com/package/colorgrad-js)\n\nHigh-performance Javascript color gradient library powered by [Rust](https://github.com/mazznoer/colorgrad-rs) + WebAssembly.\n\n* No dependencies.\n* Faster than [d3-scale](https://www.npmjs.com/package/d3-scale), [chroma-js](https://www.npmjs.com/package/chroma-js), [culori](https://www.npmjs.com/package/culori), [tinygradient](https://www.npmjs.com/package/tinygradient), [color-interpolate](https://www.npmjs.com/package/color-interpolate).\n* Blend modes: `rgb`, `linear-rgb`, `hsv`, `oklab`.\n* Interpolation modes: `linear`, `catmull-rom`, `basis`.\n\n## [Benchmarks](https://github.com/mazznoer/colorgrad-js/tree/master/examples/bench.js)\n\n```shell\ncd examples\nnpm install\nnode bench.js\n```\n\n**Result**\n\n```\ncolorgrad-js x 3,948,162 ops/sec ±5.55% (72 runs sampled)\nchroma-js x 1,150,657 ops/sec ±1.29% (91 runs sampled)\nculori x 1,912,210 ops/sec ±1.93% (88 runs sampled)\nd3-scale x 1,858,222 ops/sec ±0.14% (93 runs sampled)\ntinygradient x 372,325 ops/sec ±2.13% (92 runs sampled)\ncolor-interpolate x 939,965 ops/sec ±1.15% (92 runs sampled)\nFastest is colorgrad-js\n```\n\n## Installation\n\n```shell\nnpm i colorgrad-js\n```\n\n## Usage\n\n### Node.js\n\n```js\nimport colorgrad from \"colorgrad-js\";\n\nconst grad = colorgrad.customGradient([\"#C41189\", \"#00BFFF\", \"#FFD700\"], null, \"oklab\", \"catmull-rom\");\n\n// get the gradient domain min \u0026 max\nconsole.log(grad.domain()); // [0, 1]\n\n// get color at 0.75\nconsole.log(grad.at(0.75).rgba8());\n\n// get 100 colors evenly spaced accross gradient domain\nconsole.log(grad.colors(100).map(c =\u003e c.hex()));\n```\n\n### Bundler\n\n```js\nimport * as colorgrad from \"colorgrad-js/bundler\";\n\nconst grad = colorgrad.customGradient([\"#C41189\", \"#00BFFF\", \"#FFD700\"], null, \"oklab\", \"catmull-rom\");\nconsole.log(grad.at(0.75).rgba8());\nconsole.log(grad.colors(100).map(c =\u003e c.hex()));\n```\n\n### Browser\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n\u003cscript type=\"module\"\u003e\n\nimport init, * as colorgrad from \"https://unpkg.com/colorgrad-js@0.1.0/web/colorgrad.js\";\n\nasync function run() {\n    await init();\n\n    const grad = colorgrad.customGradient([\"#C41189\", \"#00BFFF\", \"#FFD700\"], null, \"oklab\", \"catmull-rom\");\n    console.log(grad.at(0.75).rgba8());\n    console.log(grad.colors(100).map(c =\u003e c.hex()));\n}\n\nrun();\n\n\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## API\n\n### Custom Gradient\n\n```js\n// colorgrad.customGradient(colors, position, blending_mode, interpolation_mode);\n\nconst g = colorgrad.customGradient([\"deeppink\", \"gold\", \"seagreen\"]);\n\nconst g = colorgrad.customGradient([\"deeppink\", \"gold\", \"seagreen\"], [0, 0.35, 1.0]);\n\nconst g = colorgrad.customGradient([\"deeppink\", \"gold\", \"seagreen\"], null, \"oklab\", \"catmull-rom\");\n```\n\n### Preset Gradients\n\n```js\ncolorgrad.rainbow()\ncolorgrad.sinebow()\ncolorgrad.turbo()\ncolorgrad.cividis()\ncolorgrad.cubehelixDefault()\ncolorgrad.warm()\ncolorgrad.cool()\n```\n\n```js\nconst g = colorgrad.rainbow();\n\nconsole.log(g.at(0.5).hex());\n```\n\n## Building\n\nRequirements:\n+ [Rust](https://www.rust-lang.org/tools/install)\n+ [wasm-pack](https://github.com/rustwasm/wasm-pack)\n\n```shell\ncd colorgrad-js\nwasm-pack build --target nodejs\n```\n\n## Similar Projects\n\n* [colorgrad](https://github.com/mazznoer/colorgrad-rs) (Rust)\n* [colorgrad](https://github.com/mazznoer/colorgrad) (Go)\n* [chroma.js](https://gka.github.io/chroma.js/#color-scales) (Javascript)\n* [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic/) (Javascript)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmazznoer%2Fcolorgrad-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmazznoer%2Fcolorgrad-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmazznoer%2Fcolorgrad-js/lists"}