{"id":23175831,"url":"https://github.com/blakegearin/hex-to-css-filter-library-with-db","last_synced_at":"2026-05-01T14:32:39.999Z","repository":{"id":128737203,"uuid":"578906601","full_name":"blakegearin/hex-to-css-filter-library-with-db","owner":"blakegearin","description":"Library of CSS filters to change the color of an HTML element","archived":false,"fork":false,"pushed_at":"2022-12-27T22:31:03.000Z","size":165,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T01:23:37.647Z","etag":null,"topics":["javascript","sqlite"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/blakegearin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2022-12-16T07:02:16.000Z","updated_at":"2024-08-27T04:06:23.000Z","dependencies_parsed_at":"2023-07-15T21:01:22.015Z","dependency_job_id":null,"html_url":"https://github.com/blakegearin/hex-to-css-filter-library-with-db","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/blakegearin/hex-to-css-filter-library-with-db","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blakegearin%2Fhex-to-css-filter-library-with-db","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blakegearin%2Fhex-to-css-filter-library-with-db/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blakegearin%2Fhex-to-css-filter-library-with-db/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blakegearin%2Fhex-to-css-filter-library-with-db/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blakegearin","download_url":"https://codeload.github.com/blakegearin/hex-to-css-filter-library-with-db/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blakegearin%2Fhex-to-css-filter-library-with-db/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32501399,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["javascript","sqlite"],"created_at":"2024-12-18T06:09:41.685Z","updated_at":"2026-05-01T14:32:39.975Z","avatar_url":"https://github.com/blakegearin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Tests](https://img.shields.io/badge/tests-mocha-brightgreen)\n![Statements](https://img.shields.io/badge/statements-100%25-brightgreen.svg?style=flat)\n![Branches](https://img.shields.io/badge/branches-100%25-brightgreen.svg?style=flat)\n![Functions](https://img.shields.io/badge/functions-100%25-brightgreen.svg?style=flat)\n![Lines](https://img.shields.io/badge/lines-100%25-brightgreen.svg?style=flat)\n[![javascript style guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![MIT License](https://img.shields.io/badge/license-MIT%20License-blue.svg)](LICENSE)\n\n# hex-to-css-filter-library-with-db\n\nA JavaScript library to access a [local database](data/hex-to-css-filter-db.sqlite3) of CSS filters to change HTML elements to any hex color code. Not published on NPM due to size. Also mirrored on [GitLab](https://gitlab.com/blakegearin/hex-to-css-filter-library-with-db) in case of bandwidth limits.\n\n## Usage\n\n1. Install the dependency\n\n   - NPM: `npm install https://github.com/blakegearin/hex-to-css-filter-library-with-db#1.0.1`\n   - Yarn: `yarn add https://github.com/blakegearin/hex-to-css-filter-library-with-db#1.0.1`\n\n1. Add the dependency into your file\n\n    ```js\n    import HexToCssFilterLibraryWithDb from 'hex-to-css-filter-library-with-db'\n    ```\n\n1. Fetch a CSS filter or query the database\n\n    ```js\n    const filter = new HexToCssFilterLibraryWithDbWithDb().fetchFilter('#42dead')\n    ```\n\n## Documentation\n\n### Constructor\n\n```js\nconst hexToCssFilterLibraryWithDb = new HexToCssFilterLibraryWithDb()\n\nconst dbPath = '...'\nconst hexToCssFilterLibraryWithDb = new HexToCssFilterLibraryWithDb(dbPath)\n```\n\n| Parameter |  Type  | Default                                     | Description             |\n| --------- | :----: | ------------------------------------------- | ----------------------- |\n| `dbPath`  | String | path to `data/hex-to-css-filter-db.sqlite3` | path to SQLite database |\n\n### Fetch Filter\n\n```js\nconst filter = hexToCssFilterLibraryWithDb.fetchFilter('#42dead')\n// invert(66%) sepia(56%) saturate(416%) hue-rotate(110deg) brightness(98%) contrast(100%)\n\nconst options = {\n  filterPrefix: true,\n  preBlacken: true\n}\nconst filter = hexToCssFilterLibraryWithDb.fetchFilter('#42dead', options)\n// filter: brightness(0) saturate(1) invert(66%) sepia(56%) saturate(416%) hue-rotate(110deg) brightness(98%) contrast(100%)\n```\n\n| Parameter  |  Type  | Description                                                         |\n| ---------- | :----: | ------------------------------------------------------------------- |\n| `hexColor` | String | case insensitive, valid formats: `#333333`, `#333`, `333`, `333333` |\n\n#### Options\n\n| Name           |  Type   | Default | Description                                    |\n| -------------- | :-----: | ------- | ---------------------------------------------- |\n| `filterPrefix` | Boolean | `false` | flag for `filter:` inclusion                   |\n| `preBlacken`   | Boolean | `false` | flag for `brightness(0) saturate(1)` inclusion |\n\n### Query DB\n\n```js\nconst sql = 'SELECT COUNT() FROM color'\nconst response = hexToCssFilterLibraryWithDb.queryDb(sql)\n// { 'COUNT()': 16777216 }\n\nconst options = { getFirstValue: true }\nconst response = hexToCssFilterLibrary.queryDb(sql, options)\n// 16777216\n```\n\n| Parameter |  Type  | Description  |\n| --------- | :----: | ------------ |\n| `sql`     | String | query to run |\n\n#### Options\n\n| Name            |  Type   | Default | Description                                               |\n| --------------- | :-----: | ------- | --------------------------------------------------------- |\n| `getFirstValue` | Boolean | `false` | flag for getting the value of the first response property |\n\n## FAQ\n\n- A filter isn't working/accurate, what's going on?\n\n  - The filters in the database assume a starting color of black (#000000). If your HTML element isn't black, you'll need to use the [`preBlacken` option](#options).\n\n- What if I'm not using JavaScript?\n\n  - The code in this package should be easy to port since there's not a lot of logic and SQLite is pretty common.\n\n    - Ruby: [sqlite3-ruby](https://rubygems.org/gems/sqlite3-ruby)\n    - Python: [sqlite3](https://docs.python.org/3/library/sqlite3.html)\n    - Go: [go-sqlite3](https://pkg.go.dev/github.com/mattn/go-sqlite3)\n    - Java: [sqlite-jdbc](https://github.com/xerial/sqlite-jdbc)\n\n- What if I don't want to store the database locally?\n\n  - Use the sister package, [hex-to-css-filter-library](https://www.npmjs.com/package/hex-to-css-filter-library), which calls a [remote copy](https://dbhub.io/blakegearin/hex-to-css-filter-db.sqlite3) of the database.\n\n## About Problem Domain\n\nThe current leading method to convert a hex color to a CSS filter is through trial \u0026 error with loss minimization.\n\n- Search using [SPSA](https://en.wikipedia.org/wiki/Simultaneous_perturbation_stochastic_approximation) by [MultiplyByZer0 on Stack Overflow](https://stackoverflow.com/a/43960991/5988852)\n\n- NPM package: [hex-to-css-filter](https://github.com/willmendesneto/hex-to-css-filter)\n\n- Brute force with partial color coverage by [Dave on Stack Overflow](https://stackoverflow.com/a/43959856/5988852)\n\nInstead of spending your own time \u0026 resources doing this, you can use this library to lookup already calculated [low loss](#loss-statistics) values. Currently all colors have less than **1%** loss.\n\nI don't have plans to process lower values due to diminishing returns. If you are interested in doing this though, please get in touch and I can share my code.\n\n## Database\n\nThere are 16,777,216 RGB hex colors. This is equal to 256\u003csup\u003e3\u003c/sup\u003e, with 256 values for red, green, and blue.\n\nField|Type|Description\n-----|----|-----------\n`id`|`INTEGER`|primary key, represents the hex color\n`sepia`|`INTEGER`|percentage value for the [sepia filter function](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia)\n`saturate`|`INTEGER`|percentage value for the [saturate filter function](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate)\n`hue-rotate`|`INTEGER`|degree value for the [hue-rotate filter function](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate)\n`brightness`|`INTEGER`|percentage value for the [brightness filter function](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness)\n`contrast`|`INTEGER`|percentage value for the [contrast filter function](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast)\n`loss`|`REAL`|percentage value of the filter's loss (lower is better)\n\nFor reference: [SQLite datatypes](https://www.sqlite.org/datatype3.html)\n\n### Loss Statistics\n\nAverage|Max|Min|0%|0.0%|0.1%|0.2%|0.3%|0.4%|0.5%|0.6%|0.7%|0.8%|0.9%|Total\n-------|---|---|--|----|----|----|----|----|----|----|----|----|----|-----\n0.40267|0.99999|0|8|1,233,492|2,944,170|3,259,251|2,388,299|1,716,667|1,323,179|1,106,540|987,981|920,722|896,907|16,777,216\n\n```mermaid\npie showData\n\"0% loss\" : 8\n\"0.0% loss\" : 1233492\n\"0.1% loss\" : 2944170\n\"0.2% loss\" : 3259251\n\"0.3% loss\" : 2388299\n\"0.4% loss\" : 1716667\n\"0.5% loss\" : 1323179\n\"0.6% loss\" : 1106540\n\"0.7% loss\" : 987981\n\"0.8% loss\" : 920722\n\"0.9% loss\" : 896907\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblakegearin%2Fhex-to-css-filter-library-with-db","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblakegearin%2Fhex-to-css-filter-library-with-db","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblakegearin%2Fhex-to-css-filter-library-with-db/lists"}