DEV Community

Cover image for nearest-color package
Ann
Ann

Posted on

3 2

nearest-color package

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:

vibrant-art-map

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);
Enter fullscreen mode Exit fullscreen mode

Expected result to be:

    /*
    [ { distance: 0, palette: [ '#FF00FF', '#cbe86b', '#f2e9e1', '#1c140d' ] },{ distance: 167.94642002734085, palette: [ '#fe4365', '#fc9d9a', '#f9cdad', '#c8c8a9', '#83af9b' ] }]
    */
Enter fullscreen mode Exit fullscreen mode
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);
Enter fullscreen mode Exit fullscreen mode
Expected result:
/* [{distance: 53.46026561849464, palette: ["#490a3d", "#bd1550", "#8a9b0f", "#e97f02", "#f8ca00"]}, {distance: 55, palette: ["#040004", "#4b000f", "#413d3d", "#fa023c", "#c8ff00" ]}]
*/
Enter fullscreen mode Exit fullscreen mode

Limitations

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

Author

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more