TypeScript icon, indicating that this package has built-in type declarations

    0.0.6 • Public • Published

    Finding the highest contrast colour

    Utility for determining the highest constrasting colour. Built on color. It is implemented in TypeScript.

    Getting Started


    npm install --save @phbalance/contrast-colour # Note the non-American spelling
    npm install --save color # This is a peer dependency for contrast-colour. Install if you don't already use it in your project.


    import { chooseHighestContrastColour } from "@phbalance/constrast-colour";
    const contrastColour: string = chooseHighestContrastColour(foregroundColour, foregroundOpacity, backgroundColour)


    chooseHighestContrastColour was created with itch to have the highest contrast (black or white) text on the blended colour of a surface. It makes the assumption that both of the 2 possible surfaces that can blend can each be represented by a single colour. The method requires 1 parameter for the simple case of no opacity, but supports up to 3 parameters for more complex cases:

    • foregroundColour (required) is the colour of the surface you want to put your text on.
    • foregroundOpacity (optional - default is 1.0) is the opacity of the surface you want to put your text on. You can omit this if the surface you're painting on is not see through at all. Otherwise, you should provide this and the backgroundColour so the effective blended colour can be determined.
    • backgroundColour (optional - default is white) is the colour of the surface behind the main surface that the text will be put on.

    The return value is a colour, either white or black, as a 3 byte RGB hex value string.

    Reporting Issues

    You can report bugs here. Feel free to make suggestions as well.


    npm i @phbalance/contrast-colour

    DownloadsWeekly Downloads






    Unpacked Size

    11.1 kB

    Total Files


    Last publish


    • phbalance