@mapbox/to-color

2.0.0 • Public • Published

@mapbox/to-color

Procedurally generate a deterministic, perceptually distributed color palette.

Build Status

install

npm install @mapbox/to-color

Usage

import toColor from '@mapbox/to-color'

const color = new toColor('tmcw');

// Or a number
// const color = new toColor(1234);
// Or with options
// const color = new toColor('tmcw', { brightness: 0.25, saturation: 1.1 });

const { hsl } = color.getColor();

/*
Returns

{
  raw: [314, 97.95, 50.98],
  formatted: 'hsl(314, 97.95%, 50.98%)'
}
*/

const { hsl } = color.getColor();

/*
Returns

{
  raw: [2, 78.26, 54],
  formatted: 'hsl(2, 78.26%, 54%)'
}
*/

Options

Option Value Default Description
brightness Number undefined Adjusts brightness percentage from the derived min/max range.
saturation Number undefined Adjusts saturation percentage from the derived min/max range.

Developing

# Demo site
npm install & npm start

# Run tests
npm run test

Credit v2 is adapted from randomColor.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 2.0.0
    10
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 2.0.0
    10
  • 1.1.0
    0

Package Sidebar

Install

npm i @mapbox/to-color

Weekly Downloads

10

Version

2.0.0

License

ISC

Unpacked Size

55.5 kB

Total Files

14

Last publish

Collaborators

  • mbx-npm-ci-production
  • mbx-npm-ci-staging
  • mbx-npm-advanced-actions-production
  • mbx-npm-advanced-actions-staging
  • mbx-npm-09-production
  • mbx-npm-08-production
  • mbx-npm-07-production
  • mbx-npm-06-production
  • mbx-npm-05-production
  • mbx-npm-04-production
  • mbx-npm-03-production
  • mbx-npm-02-production
  • mbx-npm-01-production
  • mbx-npm-02-staging
  • mapbox-npm-01
  • mapbox-npm-02
  • mapbox-npm-07
  • mapbox-npm-03
  • mapbox-npm-04
  • mapbox-npm-09
  • mapbox-npm-05
  • mapbox-npm-06
  • mapbox-npm-08
  • mapbox-npm-advanced-actions
  • mapbox-npm-ci
  • mapbox-npm
  • mapbox-admin
  • mapbox-machine-user