Have ideas to improve npm?Join in the discussion! »

    contrast-color

    1.0.1 • Public • Published

    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

    Install

    npm i contrast-color

    DownloadsWeekly Downloads

    618

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    23.8 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar