Skip to content

Latest commit

 

History

History
172 lines (116 loc) · 4.5 KB

README.md

File metadata and controls

172 lines (116 loc) · 4.5 KB
Raw

contrast-color NPM version Build Status Dependency Status Coverage percentage

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)

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" })

License

ISC © Buster Collings