gpotter-gradient

Get color of linear gradient at a certain step

Installation npm package

npm install gpotter-gradient

Usage npm package

const getColorFromGradient = require('gpotter-gradient').default;
const gradient = {
  0: '#ff3336',
  41: '#4a2138',
  60: '#aa7acc',
  100: '#0091ff'
};

const color = getColorFromGradient(gradient, 27); // #882737

Usage browser library

<script src="dist/gpotter-gradient.client.js"></script>
<script>
const gradient = {
  0: '#ff3336',
  41: '#4a2138',
  60: '#aa7acc',
  100: '#0091ff'
};

const color = getColorFromGradient(gradient, 33); // #6d2538
</script>

Input gradient format

You can use several color notations to specify gradient

1) #rrggbb notation

const gradient = {
  0: '#ff3336',
  60: '#aa7acc',
  100: '#0091ff'
};

2) #rgb notation

const gradient = {
  0: '#fa0',
  60: '#08f',
  100: '#a7f'
};

3) color words notation; you can use extended colors https://www.w3.org/TR/css3-color/

const gradient = {
  0: 'darkorchid',
  60: 'blue',
  100: 'orchid'
};

Output color format

Output color format in #rrggbb notation

Tests

You can run tests in npm: npm run test

Or you can test visually in the browser by using html files in "view" directory.