Contrast-color NPM

contrast-color

Determines the best contrast color to use. Give it a background color and it returns a foreground color (black or white by default but customizable).

FYI

Demo (try it for yourself)

npm.io

Installation

$ npm install contrast-color

Usage

// Use via class instance
const ContrastColor = require('contrast-color');
const cc = new ContrastColor({
  bgColor: "navy",
  fgDarkColor: "navy",
  fgLightColor: "water",
  customNamedColors: {
    water: "#00D0FF",
  },
});

const defaultFgColor = cc.contrastColor();
const hasAquaBgColor = cc.contrastColor({ bgColor: "aqua" });

/* Results
{
  defaultFgColor: '#00D0FF', // water
  hasAquaBgColor: '#000080'  // navy
}
*/

// OR ...

// Use via static method
const { contrastColor } = require('contrast-color');

const hasRedBg = contrastColor({ bgColor: '#f00' });
const hasRedBgWithBlackFg = contrastColor({ bgColor: '#f00', threshold: 76 });
const hasYellowBg = contrastColor({ bgColor: 'yellow' });
const hasWhiteBgWithGreenFg = contrastColor({ fgDarkColor: '#008000' });
const hasBlackBgWithLimeFg = contrastColor({ bgColor: '#000000', fgLightColor: 'lime' });
const hasKitchenSink = contrastColor({ 
  bgColor: '#808080', 
  fgDarkColor: 'dirty', 
  fgLightColor: 'clean', 
  threshold: 129, 
  customNamedColors: { 
    dirty: '#f90', 
    clean: '#ff99ff' 
  } 
});

/* Results:
{
  hasRedBg: '#FFFFFF',              // white
  hasRedBgWithBlackFg: '#000000',   // black
  hasYellowBg: '#000000',           // black
  hasWhiteBgWithGreenFg: '#008000', // green
  hasBlackBgWithLimeFg: '#00FF00',  // lime
  hasKitchenSink: '#ff99ff'         // clean
}
*/

API

ContrastColor(defaults)

defaults
Optional: Object with parameters to use.
- bgColor
  - Optional : String hex or named (e.g.#ff0000, red)
  - Default : #FFFFFF
- fgDarkColor
  Is returned if bgColor is determined to be light
  - Optional : String hex or named (e.g.#ff0000, red)
  - Default : #000000
- fgLightColor
  Is returned if bgColor is determined to be dark
  - Optional : String hex or named (e.g.#ff0000, red)
  - Default : #FFFFFF
- defaultColor
  Is returned if bgColor is determined to be invalid
  - Optional : String hex or named (e.g.#ff0000, red)
  - Default : #000000
- threshold
  - Optional : Number (0-255) used to adjust variance
  - Default : 128
- customNamedColors
  - Optional : Object used to override or add named colors (e.g. { blue: "#0074D9" })

.contrastColor(options)

options
Requrired: Object with parameters to use.
- bgColor
  - Required : String hex or named (e.g.#ff0000, red)
- fgDarkColor
  Is returned if bgColor is determined to be light
  - Optional : String hex or named (e.g.#ff0000, red)
  - Default : #000000
- fgLightColor
  Is returned if bgColor is determined to be dark
  - Optional : String hex or named (e.g.#ff0000, red)
  - Default : #FFFFFF
- defaultColor
  Is returned if bgColor is determined to be invalid
  - Optional : String hex or named (e.g.#ff0000, red)
  - Default : #000000
- threshold
  - Optional : Number (0-255) used to adjust variance
  - Default : 128
- customNamedColors
  - Optional : Object used to override or add named colors (e.g. { blue: "#0074D9" })