Natively Pronounced Mandarin

    javascript-color-gradient
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/javascript-color-gradient package

    2.4.4 • Public • Published

    JavaScript Color Gradient

    Lightweight JavaScript library, used to generate an array of color gradients by providing start and finish colors, as well as the required number of midpoints.

    MIT License Version Size

    Installation

    For Node.js: Install the javascript-color-gradient npm module:

    npm install javascript-color-gradient

    Then import the module into your JavaScript:

    import { Gradient } from "javascript-color-gradient";

    Demo

    A demo is worth a thousand words.

    Note: All the examples are using ES6, be sure is supported in your browser or modify as needed, Chrome recommended.

    Methods

    Method Description
    setColorGradient() Initializes {Gradient} with two or more hex color values. Should always be defined.
    setMidpoint(n) Defines number of midpoints. Defaults to 10.
    getColors() Returns an array of hex color values .
    getColor(n) Returns single hex color value corresponding to the provided index.

    Usage

    Using 2 colors and default (10) midpoints to generate an array of hex color values:

    import { Gradient } from "javascript-color-gradient";
    
    const gradientArray = new Gradient()
      .setColorGradient("#3F2CAF", "e9446a")
      .getColors();
    
    console.log(gradientArray);
    // ["#502ea8", "#6131a1", "#72339a", "#833693", "#94388d", "#a53a86", "#b63d7f", "#c73f78", "#d84271", "#e9446a"]

    Using 4 colors and 20 midpoints to generate an array of hex color values :

    import colorGradient from "javascript-color-gradient";
    
    const gradientArray = new Gradient()
      .setColorGradient("#3F2CAF", "#e9446a", "#edc988", "#607D8B")
      .setMidpoint(20)
      .getColors();
    
    console.log(gradientArray);
    // ["#5930a5", "#72339a", "#8c3790", "#a53a86", "#bf3e7b", "#d84271", "#e94b6c", "#ea5f70", "#ea7375", "#eb8779", …]

    Using two colors and default (10) midpoints to return single hex color value corresponding to the provided index:

    import { Gradient } from "javascript-color-gradient";
    
    const colorAtIndexTwo = new Gradient()
      .setColorGradient("#3F2CAF", "e9446a")
      .setMidpoint(20)
      .getColor(2);
    
    console.log(colorAtIndexTwo);
    // #5930a5

    Contributing

    Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

    Please make sure to update tests as appropriate.

    License

    javascript-color-gradient is MIT licensed.

    Contributors

    Special thanks to all the contributors who have contributed for this project.

    Install

    npm i javascript-color-gradient

    DownloadsWeekly Downloads

    5,434

    Version

    2.4.4

    License

    MIT

    Unpacked Size

    16.6 kB

    Total Files

    8

    Last publish

    Collaborators

    • adrinlol