Simplify Color Matching With Get Similar Color Library

Category: Color , Javascript | August 9, 2023
Author:bymustfa
Views Total:40 views
Official Page:Go to website
Last Update:August 9, 2023
License:MIT

Preview:

Simplify Color Matching With Get Similar Color Library

Description:

Get Similar Color is a lightweight TypeScript/JavaScript library that quickly finds close color matches. With just your target color and palette array, it returns the most similar shades.

How to use it:

1. Import the Get Similar Color into your project.

# Yarn
$ yarn add get-similar-color
# NPM
$ npm i get-similar-color
// index.ts
import getSimilarColor, {IDefaultColor} from "get-similar-color";

2. Utilize the IDefaultColor interface to structure your color array.

const myColorArray: IDefaultColor[] = [
  { name: "red", hex: "#ff0000" },
  { name: "green", hex: "#00ff00" },
  { name: "blue", rgb: { r: 0, g: 0, b: 255 } },
  // ...
];

3. Specify the desired color and a similarity threshold (0.01 – 1), and let the getSimilarColor function to navigate through the color array you just defined and scout the closest shade for you.

const findColor = getSimilarColor({
  targetColor: "#e30b0b",
  colorArray: mytColorArray,
  similarityThreshold: 0.5,
});

Changelog:

08/09/2024

  • Added Add HSL and HSV support

You Might Be Interested In:


Leave a Reply