colorgrad

Quick and easy linear color mappings

Usage no npm install needed!

<script type="module">
  import colorgrad from 'https://cdn.skypack.dev/colorgrad';
</script>

README

The node module color is a better module for most things. Building out linear luminosity increases and decreases was needed for my project so I wrote this thing. If you have a central color or end point colors and want a color map array which linearly increases or decreases away from it, this is a helpful module. It also does't care if you chuck in rgb or hex, it just spits out whatever you put in. For example:

var cg =  require('./colorgrad')()

var cops = {
  "lum": -1
, "nshades": 10
, "type": "linear"
}

var cglwr = cg.colorgrad('#0000FF', '#FFFFFF',cops)
var cgupr = cg.colorgrad('#FFFFFF', '#FF0000',cops)

cglwr.pop() // pop off centre duplicate
var c = cglwr.concat(cgupr)
console.log(c)

which outputs

[ '#0000ff',
  '#1c1cff',
  '#3939ff',
  '#5555ff',
  '#7171ff',
  '#8e8eff',
  '#aaaaff',
  '#c6c6ff',
  '#e3e3ff',
  '#ffffff',
  '#ffe3e3',
  '#ffc6c6',
  '#ffaaaa',
  '#ff8e8e',
  '#ff7171',
  '#ff5555',
  '#ff3939',
  '#ff1c1c',
  '#ff0000' ]

Right now the only style of progression is linear, though I would like to implement exponential and square root. The defaults are nshades = 100, type = linear, lum = 1. The lum option sets the percentage total luminosity increase. The luminosity step size is lum / number of steps. For rgb input it would look like:

var ops = {
  "lum": 10
, "nshades": 10
}

var cga = cg.colorgrad([10,10,10], ops)

console.log(cga)

which outputs

[ [ 10, 10, 10 ],
  [ 21, 21, 21 ],
  [ 32, 32, 32 ],
  [ 43, 43, 43 ],
  [ 54, 54, 54 ],
  [ 66, 66, 66 ],
  [ 77, 77, 77 ],
  [ 88, 88, 88 ],
  [ 99, 99, 99 ],
  [ 110, 110, 110 ] ]

Install

$ npm install colorgrad

You can put colorgrad in the browser using browserify