node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

invert-color

invert-color

build-status npm release Coverage Status dependencies Known Vulnerabilities maintained license

© 2017, Onur Yıldırım (@onury). MIT License.

Generates inverted (opposite) version of the given color.

This passes a long test suite of Adobe Photoshop CC inverted colors...
Generating exactly the same results with it.

Invert Animation

Installation

via npm:

npm i invert-color --save

via yarn:

yarn add invert-color

For browser, use dist/invert.min.js in a <script> tag.

Usage

const invert = require('invert-color');
// OR
import invert from 'invert-color';

invert(color[, bw])

  • color : String|Array|Object
    Color in HEX string, RGB array or RGB object to be inverted.
  • bw : Boolean|Object
    Optional. A boolean value indicating whether the output should be amplified to black (#000000) or white (#ffffff), according to the luminance of the original color. You can set custom black/white values by passing an object.
invert('#000')              // —> #ffffff
invert('#282b35')           // —> #d7d4ca
 
// amplify to black or white
invert('#282b35', true)     // —> #ffffff
 
// amplify to custom black or white color
invert('#282b35', { black: '#3a3a3a', white: '#fafafa' })     // —> #fafafa
 
// input color as RGB array or object
invert([69, 191, 189])              // —> #ba4042
invert({ r: 249, g: 119, b: 121 })  // —> #068886

invert.asRgbArray(color[, bw])

Invert and output result as RGB array.

invert.asRgbArray('#000')           // —> [255, 255, 255]

invert.asRgbObject(color[, bw])

Invert and output result as RGB object.

invert.asRgbObject('#fff')          // —> { r: 0, g: 0, b: 0 }

bw option

This is useful in case, you need to create contrast (i.e. background vs foreground, for better readability). The animation at the top is a demonstration.

Contributing

Clone original project:

git clone https://github.com/onury/invert-color.git

Install (dev) dependencies:

yarn install

Add tests into test/unit.test.js and run:

yarn build && yarn cover

Use included eslintrc.json and editorconfig for style and linting.
Travis build should pass, coverage should not degrade.

Change-Log

v1.2.2 (2017-12-07)

  • Fixed an issue with UMD output. Fixes #7.
  • (Dev) Adapted webpack for UMD.

v1.2.0 (2017-11-24)

  • Added UMD support. (PR #6 by @criography - revised for latest Babel.)
  • (Dev) Migrated tests to Jest (dropped Jasmine).

v1.1.0 (2017-11-07)

  • Added ability to customize black/white color values. (PR #3 by @BrainCrumbz)
  • Fixed typo. (PR #1 by @villfa)
  • Minor revisions.

v1.0.0 (2017-08-22)

  • Initial version.

License

MIT.