npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

hex-to-css-filter

v5.4.0

Published

hex-to-css-filter - Easy way to generate colors from HEX to CSS Filters

Downloads

51,933

Readme

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 && yarn husky:install

Demo

Try out our demo on Stackblitz!

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:

  • cache: returns a boolean to confirm if value was previously computed and is coming from local memory cache or not;
  • 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;
  • forceFilterRecalculation: Boolean value that forces recalculation for CSS filter generation. Default: false;

Removing memory cache

In some cases the memory cache is quite handy. However, it doesn't need to stored after called in some cases. If you're using it in some frontend libraries/frameworks, have that in memory can become an issue.

In order to solve that, you can now use the function clearCache to remove the memory cache. The method can receive the stored hex color. In this case, only the received key will be removed. E.G.

// Creating CSS filters for `#24639C` and `#FF0000`
// They memory cache stored is based on the received hex value
const [firstResult, secondResult, thirdResult, forthResult] = [
  hexToCSSFilter('#24639C', { forceFilterRecalculation: false } as HexToCssConfiguration),
  hexToCSSFilter('#24639C', { forceFilterRecalculation: false } as HexToCssConfiguration),
  hexToCSSFilter('#FF0000', { forceFilterRecalculation: false } as HexToCssConfiguration),
  hexToCSSFilter('#FF0000', { forceFilterRecalculation: false } as HexToCssConfiguration),
];

// ...
// ✨ Here is the place where the magic happens in your App ✨
// ...

// Removing the memory cache only for `#24639C`
// It means that `#FF0000` is still cached.
// It's quite handy in scenarios of colors that are called for several times,
// Having other ones called twice or thrice
clearCache('#24639C');

// `fifthResult` will be computed again, since there's no cache
// `sixthResult` won't be computed because of the existent memory cache for the value
const [fifthResult, sixthResult] = [
  hexToCSSFilter('#24639C', { forceFilterRecalculation: false } as HexToCssConfiguration),
  hexToCSSFilter('#FF0000', { forceFilterRecalculation: false } as HexToCssConfiguration),
];

Also, it covers the scenario of removing all the cache by calling the function with no arguments. E.G.

// Creating CSS filters for `#24639C` and `#FF0000`
// They memory cache stored is based on the received hex value
const [firstResult, secondResult, thirdResult, forthResult] = [
  hexToCSSFilter('#24639C', { forceFilterRecalculation: false } as HexToCssConfiguration),
  hexToCSSFilter('#24639C', { forceFilterRecalculation: false } as HexToCssConfiguration),
  hexToCSSFilter('#FF0000', { forceFilterRecalculation: false } as HexToCssConfiguration),
  hexToCSSFilter('#FF0000', { forceFilterRecalculation: false } as HexToCssConfiguration),
];

// ...
// ✨ Here is the place where the magic happens in your App ✨
// ...

// Removing all cached values from memory
clearCache();

// `fifthResult` and `sixthResult` will be computed again, since there's no cache
const [fifthResult, sixthResult] = [
  hexToCSSFilter('#24639C', { forceFilterRecalculation: false } as HexToCssConfiguration),
  hexToCSSFilter('#FF0000', { forceFilterRecalculation: false } as HexToCssConfiguration),
];

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)