Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

gradient-color

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gradient-color

Gradient color generator that lives in 21st

  • 2.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Gradient color

Gradient color generator

Attention: This doc is for v2.0, v1.x usage is at the end of the doc, and it's deprecated

Installation

npm install gradient-color -S

Usage

// commonjs style
const gradient = require('gradient-color')
// module import style
// import gradient from 'gradient-color'

const colors = gradient([
  '#E5404C',
  '#FD743C',
  '#FD9C3C'
], 20)

// array of 20 colors in `rgb(x, x, x)` format
console.log(colors)

API

gradient(colorArray, n)

where

  • colorArray is either

    • An array of color strings. This way, each gradient's step is the same
    // hex string is supported
    ['#fff', '#ddd', '#eee']
    // rgb string is also ok
    ['rgb(23, 23, 23)', 'rgb(33, 33, 33)']
    
    • An array of color object. You can specify each gradient's step value by frac field.
    [
      {
        color: '#fff',
        frac: 0.4
      },
      {
        color: '#eee',
        frac: 0.4
      },
      {
        color: '#aaa',
        frac: 0.2
      },
      // the last color could either be an object
      {
        color: '#fefefe'
      }
      // or a string value
      // '#fefefe'
    ]
    

    If you are using this method, there're several things you should remember:

    1. The last color should not have a frac field, so it can be either an Object with only color field or a String value
    2. The sum of all the fracs should equal to 1
  • n is the number of color that will be generated. It should be greater than the length of your colorArray, i.e. n > colorArray.length

Upcoming features

  • Alpha channel support

Nasty old v1.x usage (deprecated)

var getGradient = require('gradient-color').getGradient

var number = 30 // How many units between the two colors
var startColor = "#7e93f5" // start color, must in hex mode
var endColor = "#f32b65" // end color, must in hex mode

var colors = getGradient(number, startColor, endColor)
// output an array, each unit is a color string in "rgb(r,g,b)" format

Keywords

FAQs

Package last updated on 01 Dec 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc