Neutron Polarization Manipulator

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

    10.0.0 • Public • Published

    hex-to-css-filter

    Greenkeeper badge npm

    npm version npm downloads MIT License

    Build Status Coverage Status Dependency Status

    NPM NPM

    Easy way to generate colors from HEX to CSS Filters 😎

    Contributing

    Please check our contributing.md to know more about setup and how to contribute.

    Setup and installation

    Make sure that you are using the NodeJS version is the same as .nvmrc file version. If you don't have this version please use a version manager such as nvm or n to manage your local nodejs versions.

    Please make sure that you are using NodeJS version 6.10.2

    Assuming that you are using nvm, please run the commands inside this folder:

    $ nvm install $(cat .nvmrc); # install required nodejs version 
    $ nvm use $(cat .nvmrc); # use nodejs version 

    In Windows, please install NodeJS using one of these options:

    Via NVM Windows package: Dowload via this link. After that, run the commands:

    $ nvm install $(cat .nvmrc); # install required nodejs version 
    $ nvm use $(cat .nvmrc); # use nodejs version 

    Via Chocolatey:

    $ choco install nodejs.install -version 6.10.2

    Install yarn

    We use yarn as our package manager instead of npm

    Install it following these steps

    After that, just navigate to your local repository and run

    $ yarn install

    Demo

    Try out our demo on Stackblitz!

    Perf marks in action

    Run the tests

    $ yarn test # run the tests 

    Run the build

    $ yarn build # run the tests 

    Run the bundlesize check

    $ yarn bundlesize # run the tests 

    Run the code lint

    $ yarn lint # run the tests 

    Usage

    Important!!!!

    Please make sure the background of the element is #000 for better performance and color similarity.

    The reason for this is because all the calcs done by the library to generate a CSS Filter are based on the color #000

    Using default options

    import { hexToCSSFilter } from 'hex-to-css-filter';
     
    const cssFilter = hexToCSSFilter('#00a4d6');
    console.log(cssFilter);

    Overriding default options

    You can override the default options by passing a second parameter into hexToCSSFilter method. You can also use HexToCssConfiguration for type support on it.

    import { hexToCSSFilter, HexToCssConfiguration } from 'hex-to-css-filter';
     
    const config: HexToCssConfiguration = {
      acceptanceLossPercentage: 1,
      maxChecks: 10,
    };
     
    const cssFilter = hexToCSSFilter('#00a4d6', config);
    console.log(cssFilter);
     
    // Calling different colors to create CSS Filters
    [
      hexToCSSFilter('#FFF'),
      hexToCSSFilter('#000'),
      hexToCSSFilter('#802e1c'),
      hexToCSSFilter('#00a4d6'),
      hexToCSSFilter('#FF0000'),
      hexToCSSFilter('#173F5E'),
      hexToCSSFilter('#24639C'),
      hexToCSSFilter('#3CAEA4'),
      hexToCSSFilter('#F6D55C'),
      hexToCSSFilter('#ED553C'),
    ].forEach(cssFilter => {
      console.log(`\n${cssFilter.hex}-[${cssFilter.rgb}]: ${cssFilter.filter}`);
    });

    It returns an object with the values:

    • called: how many times the script was called to solve the color;
    • filter: CSS filter generated based on the HEX color;
    • hex: the received color;
    • loss: percentage loss value for the generated filter;
    • rgb: HEX color in RGB;
    • values: percentage loss per each color type organized in RGB: red, green, blue, h, s, l. Used for debug purposes - if needed;

    Options

    acceptanceLossPercentage: Acceptable color percentage to be lost. Default: 5; maxChecks: Maximum checks that needs to be done to return the best value. Default: 10;

    Publish

    this project is using np package to publish, which makes things straightforward. EX: np <patch|minor|major>

    For more details, please check np package on npmjs.com

    Author

    Wilson Mendes (willmendesneto)

    Install

    npm i my-playground

    DownloadsWeekly Downloads

    10

    Version

    10.0.0

    License

    MIT

    Unpacked Size

    136 kB

    Total Files

    39

    Last publish

    Collaborators

    • willmendesneto