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 is finally published. Install now on npmjs.com or check out the demo on Vibrant Art.
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:
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
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
// 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:
/*
[ { distance: 0, palette: [ '#FF00FF', '#cbe86b', '#f2e9e1', '#1c140d' ] },{ distance: 167.94642002734085, palette: [ '#fe4365', '#fc9d9a', '#f9cdad', '#c8c8a9', '#83af9b' ] }]
*/
Use nearest-palette with 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;
// 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:
/* [{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'
Top comments (0)