hex-to-css-filter-library-with-db

A JavaScript library to access a local database of CSS filters to change HTML elements to any hex color code. Not published on NPM due to size. Also mirrored on GitLab in case of bandwidth limits.

Usage

1. Install the dependency

   • NPM: npm install https://github.com/blakegearin/hex-to-css-filter-library-with-db#1.0.1
   • Yarn: yarn add https://github.com/blakegearin/hex-to-css-filter-library-with-db#1.0.1

2. Add the dependency into your file

   import HexToCssFilterLibraryWithDb from 'hex-to-css-filter-library-with-db'

3. Fetch a CSS filter or query the database

   const filter = new HexToCssFilterLibraryWithDbWithDb().fetchFilter('#42dead')

Documentation

Constructor

const hexToCssFilterLibraryWithDb = new HexToCssFilterLibraryWithDb()

const dbPath = '...'
const hexToCssFilterLibraryWithDb = new HexToCssFilterLibraryWithDb(dbPath)

Parameter	Type	Default	Description
dbPath	String	path to data/hex-to-css-filter-db.sqlite3	path to SQLite database

Fetch Filter

const filter = hexToCssFilterLibraryWithDb.fetchFilter('#42dead')
// invert(66%) sepia(56%) saturate(416%) hue-rotate(110deg) brightness(98%) contrast(100%)

const options = {
  filterPrefix: true,
  preBlacken: true
}
const filter = hexToCssFilterLibraryWithDb.fetchFilter('#42dead', options)
// filter: brightness(0) saturate(1) invert(66%) sepia(56%) saturate(416%) hue-rotate(110deg) brightness(98%) contrast(100%)

Parameter	Type	Description
hexColor	String	case insensitive, valid formats: #333333, #333, 333, 333333

Options

Name	Type	Default	Description
filterPrefix	Boolean	false	flag for filter: inclusion
preBlacken	Boolean	false	flag for brightness(0) saturate(1) inclusion

Query DB

const sql = 'SELECT COUNT() FROM color'
const response = hexToCssFilterLibraryWithDb.queryDb(sql)
// { 'COUNT()': 16777216 }

const options = { getFirstValue: true }
const response = hexToCssFilterLibrary.queryDb(sql, options)
// 16777216

Parameter	Type	Description
sql	String	query to run

Options

Name	Type	Default	Description
getFirstValue	Boolean	false	flag for getting the value of the first response property

FAQ

• A filter isn't working/accurate, what's going on?

  • 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.

• What if I'm not using JavaScript?

  • The code in this package should be easy to port since there's not a lot of logic and SQLite is pretty common.

    • Ruby: sqlite3-ruby
    • Python: sqlite3
    • Go: go-sqlite3
    • Java: sqlite-jdbc

• What if I don't want to store the database locally?

  • Use the sister package, hex-to-css-filter-library, which calls a remote copy of the database.

About Problem Domain

The current leading method to convert a hex color to a CSS filter is through trial & error with loss minimization.

• Search using SPSA by MultiplyByZer0 on Stack Overflow

• NPM package: hex-to-css-filter

• Brute force with partial color coverage by Dave on Stack Overflow

Instead of spending your own time & resources doing this, you can use this library to lookup already calculated low loss values. Currently all colors have less than 1% loss.

I 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.

Database

There are 16,777,216 RGB hex colors. This is equal to 256³, with 256 values for red, green, and blue.

Field	Type	Description
id	INTEGER	primary key, represents the hex color
sepia	INTEGER	percentage value for the sepia filter function
saturate	INTEGER	percentage value for the saturate filter function
hue-rotate	INTEGER	degree value for the hue-rotate filter function
brightness	INTEGER	percentage value for the brightness filter function
contrast	INTEGER	percentage value for the contrast filter function
loss	REAL	percentage value of the filter's loss (lower is better)

For reference: SQLite datatypes

Loss Statistics

Average	Max	Min	0%	0.0%	0.1%	0.2%	0.3%	0.4%	0.5%	0.6%	0.7%	0.8%	0.9%	Total
0.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

pie showData
"0% loss" : 8
"0.0% loss" : 1233492
"0.1% loss" : 2944170
"0.2% loss" : 3259251
"0.3% loss" : 2388299
"0.4% loss" : 1716667
"0.5% loss" : 1323179
"0.6% loss" : 1106540
"0.7% loss" : 987981
"0.8% loss" : 920722
"0.9% loss" : 896907

Loading