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.
npm install javascript-color-gradientVerified import paths — ran on the pinned version, not inferred.
Demonstrates how to initialize a gradient with two colors and retrieve an array of 10 interpolated hex color values.
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.
Always use the chained method approach for initialization: `new Gradient().setColorGradient(...).setMidpoint(...)`. Avoid passing colors or midpoints directly to the `Gradient` constructor.
Upgrade to v2.5.0 or later to ensure all specified colors are correctly included in the gradient output array, especially the initial color.
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.
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.
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.
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.
Always instantiate the `Gradient` class using `new Gradient()` before calling its methods. The correct pattern is `new Gradient().setColorGradient(...)`.
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`).
No dependency data recorded yet.