{"id":11131,"library":"javascript-color-gradient","title":"JavaScript Color Gradient Generator","description":"javascript-color-gradient is a lightweight JavaScript library designed for generating an array of color gradients. It allows users to define a gradient by providing two or more hexadecimal start and end colors, along with the desired number of midpoints. The library is currently at version 2.5.0 and appears to have an active, though not rapid, release cadence with updates focused on improvements and bug fixes, such as refactoring color generation logic and adding support for short hex codes in its most recent release. Its key differentiator is its simplicity and direct focus on generating color arrays for gradients, making it suitable for web and Node.js projects requiring programmatic color interpolation without complex UI components. It avoids external dependencies, offering a lean solution for color manipulation.","status":"active","version":"2.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/Adrinlol/javascript-color-gradient","tags":["javascript","javascript-color-palette","color-gradient","javascript-palette","color-picker","color-generator","color-wavelengths"],"install":[{"cmd":"npm install javascript-color-gradient","lang":"bash","label":"npm"},{"cmd":"yarn add javascript-color-gradient","lang":"bash","label":"yarn"},{"cmd":"pnpm add javascript-color-gradient","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The library primarily uses ES modules (ESM). CommonJS `require()` may not work as expected in newer versions without specific transpilation or Node.js 'type: module' configuration.","wrong":"const Gradient = require('javascript-color-gradient')","symbol":"Gradient","correct":"import Gradient from 'javascript-color-gradient'"},{"note":"For dynamic ESM imports in environments that support it, or when mixing with CommonJS contexts.","symbol":"Gradient (dynamic)","correct":"const { default: Gradient } = await import('javascript-color-gradient')"}],"quickstart":{"code":"import Gradient from \"javascript-color-gradient\";\n\nconst startColor = \"#3F2CAF\";\nconst endColor = \"#e9446a\";\nconst numberOfMidpoints = 10; // Default if not set\n\nconst gradientGenerator = new Gradient();\nconst gradientArray = gradientGenerator\n  .setColorGradient(startColor, endColor)\n  .setMidpoint(numberOfMidpoints) // Explicitly setting, though it's the default\n  .getColors();\n\nconsole.log(gradientArray);\n/* Example output:\n[\n  '#3f2caf', '#522fa7',\n  '#6531a0', '#783498',\n  '#8b3790', '#9d3989',\n  '#b03c81', '#c33f79',\n  '#d64172', '#e9446a'\n]\n*/","lang":"javascript","description":"Demonstrates how to initialize a gradient with two colors and retrieve an array of 10 interpolated hex color values."},"warnings":[{"fix":"Review the output of `getColors()` and `getColor()` if upgrading from versions prior to 2.5.0, as the interpolation might have changed. Adjust any tests that rely on exact color outputs.","message":"The gradient color generation logic was refactored in v2.5.0. While intended as an improvement, it might introduce subtle changes in the interpolated color values.","severity":"breaking","affected_versions":">=2.5.0"},{"fix":"Always use the chained method approach for initialization: `new Gradient().setColorGradient(...).setMidpoint(...)`. Avoid passing colors or midpoints directly to the `Gradient` constructor.","message":"The library's initialization method became more intuitive in v2.3.2, moving towards chained method calls (e.g., `new Gradient().setColorGradient(...)`). Older, direct constructor parameter patterns might be deprecated or no longer supported.","severity":"breaking","affected_versions":">=2.3.2"},{"fix":"Upgrade to v2.5.0 or later to ensure all specified colors are correctly included in the gradient output array, especially the initial color.","message":"Prior to v2.5.0, there was a bug where the first color in the gradient might have been skipped from the output array returned by `getColors()`.","severity":"gotcha","affected_versions":"<2.5.0"},{"fix":"Upgrade to v2.5.0 or later to utilize short hex codes. For older versions, ensure all color inputs are provided as full 6-digit hexadecimal strings.","message":"Short hex codes (e.g., `#fff`) were not supported before v2.5.0; only full 6-digit hex codes (e.g., `#ffffff`) were accepted.","severity":"gotcha","affected_versions":"<2.5.0"},{"fix":"Ensure your project's build process or runtime environment natively supports ES Modules, or include a transpilation step to convert the module to a compatible format for your target environment.","message":"The library is written using ES6 syntax (e.g., `import`/`export`). Older browser environments or Node.js versions without full ES module support may require transpilation (e.g., Babel) or different module loading configurations.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For Node.js, ensure your `package.json` includes `\"type\": \"module\"`. For browser environments, use a bundler (Webpack, Rollup, Parcel) to transpile the module, or serve it in a `<script type=\"module\">` tag. Alternatively, consider dynamic `import()` for specific use cases.","cause":"Attempting to use ES module `import` syntax in a CommonJS environment (e.g., a Node.js script without 'type: module' in package.json, or an older browser without transpilation/bundling).","error":"SyntaxError: Cannot use import statement outside a module"},{"fix":"Verify that `import Gradient from 'javascript-color-gradient'` is correctly placed at the top of your ES module file. Ensure the file itself is treated as an ES module. If using CommonJS for other reasons, dynamic `import()` might be an option.","cause":"This error typically occurs if `Gradient` is undefined or not correctly imported/exposed. This could be due to a faulty import, or attempting to use a CommonJS `require` in an ESM-only context.","error":"TypeError: Gradient is not a constructor"},{"fix":"Always instantiate the `Gradient` class using `new Gradient()` before calling its methods. The correct pattern is `new Gradient().setColorGradient(...)`.","cause":"You are attempting to call `setColorGradient` on an object that is not an instance of the `Gradient` class, likely because the `new Gradient()` part of the chain was omitted or executed incorrectly.","error":"TypeError: this.setColorGradient is not a function"},{"fix":"Double-check all color strings passed to `setColorGradient`. Ensure they are valid hex codes, starting with `#`, and either 3 or 6 hexadecimal characters long (e.g., `#FFF`, `#RRGGBB`).","cause":"One or more of the color strings passed to the `setColorGradient` method is not a valid hexadecimal color code (e.g., missing '#', incorrect length, invalid characters).","error":"Error: Invalid color value provided"}],"ecosystem":"npm"}