/nearest-palette

Primary LanguageJavaScriptMIT LicenseMIT

@ngoantr/nearest-palette

A search tool to search color palettes by color, try out on Vibrant Art

example

Installation

Install with npm as a local dependency (for API) or global (for CLI).

npm install nearest-palette [-g|--save]

How this work?

Big picture: nearest-palette calculates the distance from a color to every color in the given palettes to find the closest ones and return the top k closest palettes.

Given an array of color palettes or import from nice-color-palettes and a target color in hex. nearest-palette will return a list of (k) palettes and their distances to target, every color in these palettes may or may not be sorted in ascending order.

From the Wikipedia article on the subject:

The simplest solution to the NNS problem is to compute the distance from the query point to every other point in the database, keeping track of the "best so far". This algorithm, sometimes referred to as the naive approach, has a running time of O(Nd) where N is the cardinality of S and d is the dimensionality of M. There are no search data structures to maintain, so linear search has no space complexity beyond the storage of the database. Naive search can, on average, outperform space partitioning approaches on higher dimensional spaces.

How to use it?

  1. With your own colors

import prettyPalette from "nearest-palette";

var k = 1; var query = '#FF00FF'; var items = [ ["#00FF00", "#FF00FF"], ["#100000", "#1F00FF"] ];

var res = prettyPalette(query, items, k);

//_

res = [ { { distance: 0, colors: ["#00FF00", "#FF00FF"] } } ]

_//

  1. With nice-color-palettes

// get top k sorted array of every color in every palette

import prettyPalette from "nearest-palette";

var k = 10; var query = '#FF00FF'; var colors = require("nice-color-palettes");

var res = prettyPalette(query, colors, k);

//_

res = [
{ "minD": 0, "pal": [ { "targetDistance": 259.5399776527693, "color": "#fffcdd" }, { "targetDistance": 255.79093025359597, "color": "#dcf7f3" }, { "targetDistance": 235.18928547023566, "color": "#ffd8d8" }, { "targetDistance": 169.03845716285983, "color": "#f5a2a2" }, { "targetDistance": 0, "color": "#805841" } ]
}
]

_//

Test

npm run test

Limitations

Currently only support full hex colors. You can't use all CSS colors like: 'red' or '0xFFF' or transparency '0xf1f1f1f1'.

Author