nearest-color package
Tags: color, design, ux
Published: 2021-10-18 02:35:40

  Want a palette that matches your logo color? Ever need a tool for faster color palettes search? Why bother writing 30 lines of code when [nearest-palette](https://www.npmjs.com/package/nearest-palette) is finally published. Install  now on [npmjs.com](https://www.npmjs.com/package/nearest-palette) or check out the demo on [ Vibrant Art](https://vibrant-art-map.netlify.app/).  

## How can this be used?

I created this package to serve the purpose of quicker searching for color palettes and less code in a project that I'm contributing to


You may want to use this tool for other different purposes of yours 

* Pick out a color palettes for your outfits to match your favorite jacket/ expensive hand bag/ fancy shoes... 

* Choose a color palette for your online business to capture your customer's attention

* Need a palette of which suits your instagram for more likes and followers

* Look for best theme color for your furniture or a paint color that matches your personality...

* Find a theme to best fit your favorite flower Iris for your remarkable wedding...

nearest-color is a tool for quick color palettes search from a list of color palettes with a given color.

Like so:

![vibrant-art-map](https://b.f8.photo.talk.zdn.vn/487825497916186847/a7bd068d8e00475e1e11.jpg)

  

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

  
Check it out on [Github](https://github.com/tnngoan/nearest-palette)


## Quick start

**With your own colors:**

Provide a list of color palettes in your code and add this package to search for the closest palettes to a given color in hex.

* install nearest-palette package
     ``` npm install nearest-palette ```

```js
// import the package into your project where you want to use it
	import nearestPalette from ("nearest-palette");

// add your own collection of colors
	
	const colors = [ ["#69d2e7", "#a7dbd8", "#e0e4cc"], 
	    ["#fe4365", "#fc9d9a", "#f9cdad", "#c8c8a9", "#83af9b"],
	    ["#FF00FF", "#cbe86b", "#f2e9e1", "#1c140d"] ];

// define a number of palettes you want
	const k = 2;

// and a target color
	let target = "#FF00FF";

// call nearestPalette() with target, colors and k as its arguments
	const result = nearestPalette(target, colors, k);

// try console.log() to see the result
	console.log(result);
```

**Expected result to be:**

```json
    /*
    [ { distance: 0, palette: [ '#FF00FF', '#cbe86b', '#f2e9e1', '#1c140d' ] },{ distance: 167.94642002734085, palette: [ '#fe4365', '#fc9d9a', '#f9cdad', '#c8c8a9', '#83af9b' ] }]
    */
```

###### Use nearest-palette with [nice-color-palettes](https://www.npmjs.com/package/nice-color-palettes) 
 Install nice-color-palettes to have access to thousands of color palettes and search for the closest ones.  


* install nearest-palette and nice-color-palettes
	npm install nearest-palette;
	npm install nice-color-palettes;

```js		
// import the 2 packages where you want to use them
	import nearestPalette = ("nearest-palette);
	const colors = require("nice-color-palettes");
		
// define your target color and the number of palettes you want to get
	const target = "#FFFF00";
	const k = 2;

// call nearestPalette with target, colors and k
	const result = nearestPalette(target, colors, k);

// console.log() to see result
	nearestPalette(target, colors, k);
```

###### Expected result:
		
```json
/* [{distance: 53.46026561849464, palette: ["#490a3d", "#bd1550", "#8a9b0f", "#e97f02", "#f8ca00"]}, {distance: 55, palette: ["#040004", "#4b000f", "#413d3d", "#fa023c", "#c8ff00" ]}]
*/
```

## Limitations

  

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

  
  

## Author

  

* [Gmail](mailto:ngoan.n.tr@gmail.com)

  

* [Github](https://github.com/tnngoan)

  

* [LinkedIn](https://www.linkedin.com/in/tnngoan/)