{"id":20014682,"url":"https://github.com/willmendesneto/hex-to-css-filter","last_synced_at":"2025-04-05T14:04:28.461Z","repository":{"id":32981808,"uuid":"148580358","full_name":"willmendesneto/hex-to-css-filter","owner":"willmendesneto","description":"Easy way to generate colors from HEX to CSS Filters","archived":false,"fork":false,"pushed_at":"2025-03-28T22:20:37.000Z","size":2064,"stargazers_count":37,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T08:34:01.060Z","etag":null,"topics":["color","css","filter","hacktoberfest","hex","hex-to-css-filter","rgb"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/willmendesneto.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"contributing.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-13T04:07:30.000Z","updated_at":"2025-03-11T14:19:27.000Z","dependencies_parsed_at":"2024-02-16T00:33:43.521Z","dependency_job_id":"d3af9eae-865e-401d-8809-d3718173d744","html_url":"https://github.com/willmendesneto/hex-to-css-filter","commit_stats":{"total_commits":84,"total_committers":6,"mean_commits":14.0,"dds":0.2142857142857143,"last_synced_commit":"badd2e6875ee8ab822de6ba3517531c2a6bbf669"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fhex-to-css-filter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fhex-to-css-filter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fhex-to-css-filter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fhex-to-css-filter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/willmendesneto","download_url":"https://codeload.github.com/willmendesneto/hex-to-css-filter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247345850,"owners_count":20924102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color","css","filter","hacktoberfest","hex","hex-to-css-filter","rgb"],"created_at":"2024-11-13T07:43:28.618Z","updated_at":"2025-04-05T14:04:28.445Z","avatar_url":"https://github.com/willmendesneto.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hex-to-css-filter\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/willmendesneto/hex-to-css-filter.svg)](https://greenkeeper.io/)\n[![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/hex-to-css-filter-playground)\n\n[![npm version](https://badge.fury.io/js/hex-to-css-filter.svg)](http://badge.fury.io/js/hex-to-css-filter) [![npm downloads](https://img.shields.io/npm/dm/hex-to-css-filter.svg)](https://npmjs.org/hex-to-css-filter)\n[![MIT License](https://img.shields.io/badge/license-MIT%20License-blue.svg?style=flat-square)](LICENSE)\n\n[![Build Status](https://circleci.com/gh/willmendesneto/hex-to-css-filter.svg?style=shield)](https://circleci.com/gh/willmendesneto/hex-to-css-filter)\n[![Coverage Status](https://coveralls.io/repos/willmendesneto/hex-to-css-filter/badge.svg?branch=master)](https://coveralls.io/r/willmendesneto/hex-to-css-filter?branch=master)\n[![Dependency Status](https://david-dm.org/willmendesneto/hex-to-css-filter.svg)](https://david-dm.org/willmendesneto/hex-to-css-filter)\n\n[![NPM](https://nodei.co/npm/hex-to-css-filter.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://npmjs.org/hex-to-css-filter)\n[![NPM](https://nodei.co/npm-dl/hex-to-css-filter.png?height=3\u0026months=3)](https://npmjs.org/hex-to-css-filter)\n\n\u003e Easy way to generate colors from HEX to CSS Filters 😎\n\n## Contributing\n\nPlease check our [contributing.md](https://github.com/willmendesneto/hex-to-css-filter/blob/master/contributing.md) to know more about setup and how to contribute.\n\n## Setup and installation\n\nMake 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.\n\n\u003e Please make sure that you are using NodeJS version 6.10.2\n\nAssuming that you are using `nvm`, please run the commands inside this folder:\n\n```bash\n$ nvm install $(cat .nvmrc); # install required nodejs version\n$ nvm use $(cat .nvmrc); # use nodejs version\n```\n\nIn Windows, please install NodeJS using one of these options:\n\nVia `NVM Windows` package: Dowload via [this link](https://github.com/coreybutler/nvm-windows). After that, run the commands:\n\n```bash\n$ nvm install $(cat .nvmrc); # install required nodejs version\n$ nvm use $(cat .nvmrc); # use nodejs version\n```\n\nVia Chocolatey:\n\n```bash\n$ choco install nodejs.install -version 6.10.2\n```\n\n### Install yarn\n\nWe use `yarn` as our package manager instead of `npm`\n\n[Install it following these steps](https://yarnpkg.com/lang/en/docs/install/#mac-tab)\n\nAfter that, just navigate to your local repository and run\n\n```bash\n$ yarn install \u0026\u0026 yarn husky:install\n```\n\n## Demo\n\nTry out our [demo on Stackblitz](https://hex-to-css-filter-playground.stackblitz.io)!\n\n### Run the tests\n\n```bash\n$ yarn test # run the tests\n```\n\n### Run the build\n\n```bash\n$ yarn build # run the tests\n```\n\n### Run the bundlesize check\n\n```bash\n$ yarn bundlesize # run the tests\n```\n\n### Run the code lint\n\n```bash\n$ yarn lint # run the tests\n```\n\n## Usage\n\n### Important!!!!\n\n_Please make sure the background of the element is `#000` for better performance and color similarity_.\n\nThe reason for this is because all the calcs done by the library to generate a CSS Filter are based on the color `#000`\n\n### Using default options\n\n```js\nimport { hexToCSSFilter } from 'hex-to-css-filter';\n\nconst cssFilter = hexToCSSFilter('#00a4d6');\nconsole.log(cssFilter);\n```\n\n### Overriding default options\n\nYou can override the default options by passing a second parameter into `hexToCSSFilter` method. You can also use `HexToCssConfiguration` for type support on it.\n\n```ts\nimport { hexToCSSFilter, HexToCssConfiguration } from 'hex-to-css-filter';\n\nconst config: HexToCssConfiguration = {\n  acceptanceLossPercentage: 1,\n  maxChecks: 10,\n};\n\nconst cssFilter = hexToCSSFilter('#00a4d6', config);\nconsole.log(cssFilter);\n\n// Calling different colors to create CSS Filters\n[\n  hexToCSSFilter('#FFF'),\n  hexToCSSFilter('#000'),\n  hexToCSSFilter('#802e1c'),\n  hexToCSSFilter('#00a4d6'),\n  hexToCSSFilter('#FF0000'),\n  hexToCSSFilter('#173F5E'),\n  hexToCSSFilter('#24639C'),\n  hexToCSSFilter('#3CAEA4'),\n  hexToCSSFilter('#F6D55C'),\n  hexToCSSFilter('#ED553C'),\n].forEach(cssFilter =\u003e {\n  console.log(`\\n${cssFilter.hex}-[${cssFilter.rgb}]: ${cssFilter.filter}`);\n});\n```\n\nIt returns an object with the values:\n\n- `cache`: returns a boolean to confirm if value was previously computed and is coming from local memory cache or not;\n- `called`: how many times the script was called to solve the color;\n- `filter`: CSS filter generated based on the HEX color;\n- `hex`: the received color;\n- `loss`: percentage loss value for the generated filter;\n- `rgb`: HEX color in RGB;\n- `values`: percentage loss per each color type organized in RGB: `red`, `green`, `blue`, `h`, `s`, `l`. Used for debug purposes - if needed;\n\n### Options\n\n- `acceptanceLossPercentage`: Acceptable color percentage to be lost during wide search. Does not guarantee `loss`. Default: `5`;\n- `maxChecks`: Maximum checks that needs to be done to return the best value. Default: `10`;\n- `forceFilterRecalculation`: Boolean value that forces recalculation for CSS filter generation. Default: `false`;\n\n### Removing memory cache\n\nIn 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.\n\nIn 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.\n\n```ts\n// Creating CSS filters for `#24639C` and `#FF0000`\n// They memory cache stored is based on the received hex value\nconst [firstResult, secondResult, thirdResult, forthResult] = [\n  hexToCSSFilter('#24639C', { forceFilterRecalculation: false } as HexToCssConfiguration),\n  hexToCSSFilter('#24639C', { forceFilterRecalculation: false } as HexToCssConfiguration),\n  hexToCSSFilter('#FF0000', { forceFilterRecalculation: false } as HexToCssConfiguration),\n  hexToCSSFilter('#FF0000', { forceFilterRecalculation: false } as HexToCssConfiguration),\n];\n\n// ...\n// ✨ Here is the place where the magic happens in your App ✨\n// ...\n\n// Removing the memory cache only for `#24639C`\n// It means that `#FF0000` is still cached.\n// It's quite handy in scenarios of colors that are called for several times,\n// Having other ones called twice or thrice\nclearCache('#24639C');\n\n// `fifthResult` will be computed again, since there's no cache\n// `sixthResult` won't be computed because of the existent memory cache for the value\nconst [fifthResult, sixthResult] = [\n  hexToCSSFilter('#24639C', { forceFilterRecalculation: false } as HexToCssConfiguration),\n  hexToCSSFilter('#FF0000', { forceFilterRecalculation: false } as HexToCssConfiguration),\n];\n```\n\nAlso, it covers the scenario of removing all the cache by calling the function with no arguments. E.G.\n\n```ts\n// Creating CSS filters for `#24639C` and `#FF0000`\n// They memory cache stored is based on the received hex value\nconst [firstResult, secondResult, thirdResult, forthResult] = [\n  hexToCSSFilter('#24639C', { forceFilterRecalculation: false } as HexToCssConfiguration),\n  hexToCSSFilter('#24639C', { forceFilterRecalculation: false } as HexToCssConfiguration),\n  hexToCSSFilter('#FF0000', { forceFilterRecalculation: false } as HexToCssConfiguration),\n  hexToCSSFilter('#FF0000', { forceFilterRecalculation: false } as HexToCssConfiguration),\n];\n\n// ...\n// ✨ Here is the place where the magic happens in your App ✨\n// ...\n\n// Removing all cached values from memory\nclearCache();\n\n// `fifthResult` and `sixthResult` will be computed again, since there's no cache\nconst [fifthResult, sixthResult] = [\n  hexToCSSFilter('#24639C', { forceFilterRecalculation: false } as HexToCssConfiguration),\n  hexToCSSFilter('#FF0000', { forceFilterRecalculation: false } as HexToCssConfiguration),\n];\n```\n\n## Publish\n\nthis project is using `np` package to publish, which makes things straightforward. EX: `np \u003cpatch|minor|major\u003e`\n\n\u003e For more details, [please check np package on npmjs.com](https://www.npmjs.com/package/np)\n\n## Author\n\n**Wilson Mendes (willmendesneto)**\n\n- \u003chttps://twitter.com/willmendesneto\u003e\n- \u003chttp://github.com/willmendesneto\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillmendesneto%2Fhex-to-css-filter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwillmendesneto%2Fhex-to-css-filter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillmendesneto%2Fhex-to-css-filter/lists"}