Nascent Plasticine Materialist
    Have ideas to improve npm?Join in the discussion! »

    @philipbaker4/color-utilities
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    color-utilities

    This is a lightweight library for color manipulation and linear gradient creation. The library was born out of frustration when trying to create and color vanilla Javascript data visualizations. I struggled to find lightweight, easy to use, and reliable resources to manipulate colors and generate customized multicolor linear gradients, so I started writing my own. Enjoy!

    Getting Started

    Installation

    $ npm install @philipbaker4/color-utilities

    Usage

    import { getMultiColorLinearGradient } from '@philipbaker4/color-utilities'
     
    const multiColorGradientDefinition = [
      {
        minVal: 0,
        minColor: 'red',
        maxVal: 1,
        maxColor: 'blue',
      },
      {
        minVal: 1,
        minColor: 'blue',
        maxVal: 3,
        maxColor: 'yellow',
      },
    ];
    getMultiColorDataGradient(multiColorGradientDefinition, 12, 'RGB_ARRAY')
    ---
    [
        { color: [204, 0, 51], minVal: 0, maxVal: 0.25 },
        { color: [153, 0, 102], minVal: 0.25, maxVal: 0.5 },
        { color: [102, 0, 153], minVal: 0.5, maxVal: 0.75 },
        { color: [51, 0, 204], minVal: 0.75, maxVal: 1 },
        { color: [28, 28, 227], minVal: 1, maxVal: 1.25 },
        { color: [57, 57, 198], minVal: 1.25, maxVal: 1.5 },
        { color: [85, 85, 170], minVal: 1.5, maxVal: 1.75 },
        { color: [113, 113, 142], minVal: 1.75, maxVal: 2 },
        { color: [142, 142, 113], minVal: 2, maxVal: 2.25 },
        { color: [170, 170, 85], minVal: 2.25, maxVal: 2.5 },
        { color: [198, 198, 57], minVal: 2.5, maxVal: 2.75 },
        { color: [227, 227, 28], minVal: 2.75, maxVal: 3 },
    ]
    ---
    getColorFromMultiColorDataGradient(multiColorGradientDefinition, 12, 0.5, 'RGB_ARRAY', true)
    ---
    [102, 0, 153]
    ---
     

    Complete Documentation

    Development

    Playground.ts can be used as a sandbox area to play around with existing functionality and develop new features. To run:

    $ npm run playground

    Testing

    $ npm run test

    Feedback & Contributions

    Feeback and contributions are both more than welcome. Feel free to submit issues and/or pull requests.

    Install

    npm i @philipbaker4/color-utilities

    DownloadsWeekly Downloads

    0

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    38.6 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar