Get Similar Color: TypeScript/Javascript Kütüphanesi ile Renk Benzerliği Hesaplama

Merhaba! Bugün sizlere geliştirdiğim ve NPM’de yayınladığım Get Similar Color adlı TypeScript/JavaScript kütüphanesini tanıtmak istiyorum. Bu kütüphane, belirli bir renk paleti içindeki bir renge en yakın rengi bulmanızı sağlar. Hem frontend hem de backend projelerinizde kolaylıkla kullanabilirsiniz. Bu yazıda, kütüphanenin nasıl kurulacağını, kullanılacağını ve sunduğu özellikleri detaylı bir şekilde anlatacağım.

Get Similar Color: TypeScript/Javascript Kütüphanesi ile Renk Benzerliği Hesaplama

Kütüphaneyi projelerinize dahil etmek oldukça basit. Aşağıdaki komutları kullanarak NPM veya Yarn ile yükleyebilirsiniz:

npm install get-similar-color

yarn add get-similar-color

Kullanım

Kütüphaneyi kullanarak bir renk paleti içindeki en benzer rengi nasıl bulabileceğinizi göstereceğim. Hem JavaScript hem de TypeScript örnekleri ile anlatacağım.

JavaScript Örneği

const getSimilarColor = require("get-similar-color").default;

const defaultColorArray = [
  { name: "red", hex: "#ff0000" },
  { name: "green", hex: "#00ff00" },
  { name: "blue", rgb: { r: 0, g: 0, b: 255 } },
  { name: "yellow", hex: "#ffff00" },
  { name: "purple", rgb: { r: 128, g: 0, b: 128 } },
  { name: "orange", hex: "#ffa500" },
];

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

console.log(findColor);

TypeScript Örneği

import getSimilarColor, { IDefaultColor } from "get-similar-color";

const defaultColorArray: IDefaultColor[] = [
  { name: "red", hex: "#ff0000" },
  { name: "green", hex: "#00ff00" },
  { name: "blue", rgb: { r: 0, g: 0, b: 255 } },
  { name: "yellow", hex: "#ffff00" },
  { name: "purple", rgb: { r: 128, g: 0, b: 128 } },
  { name: "orange", hex: "#ffa500" },
];

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

console.log(findColor);

Kütüphaneyi çalıştırdığınızda, konsol çıktısı aşağıdaki gibi olacaktır:

{
  name: "red",
  hex: "#ff0000",
  rgb: {
    r: 255,
    g: 0,
    b: 0
  },
  similarity: 0.93
}

Birden Fazla Renk Formatı Desteği

Kütüphane, HEX ve RGB formatlarının yanı sıra HSL ve HSV formatlarını da destekler. Bu, renkleri çeşitli formatlarda girebilmenizi ve karşılaştırabilmenizi sağlar.

HSL Örneği

const findColor = getSimilarColor({
  targetColor: { h: 240, s: 100, l: 50 },
  colorArray: defaultColorArray,
  similarityThreshold: 0.5,
});

console.log(findColor);

HSV Örneği

const findColor = getSimilarColor({
  targetColor: { h: 0, s: 100, v: 100 },
  colorArray: defaultColorArray,
  similarityThreshold: 0.5,
});

console.log(findColor);

Gelişmiş Benzerlik Hesaplaması

Kütüphane, renk farklarını hesaplamak için CIEDE2000 algoritmasını kullanır. Bu algoritma, basit RGB veya HEX karşılaştırmalarına göre daha doğru sonuçlar sağlar.

Katkıda Bulunma

Katkılarınızı bekliyoruz! Eğer herhangi bir hata bildirimi, özellik isteği veya kod katkısında bulunmak isterseniz, bir sorun açabilir veya bir pull request gönderebilirsiniz.

https://github.com/bymustfa/get-similar-color

Sonuç

Get Similar Color kütüphanesi, projelerinizde renk benzerliği hesaplamalarını kolaylaştıran kullanışlı bir araçtır. Kütüphaneyi indirip deneyin ve geri bildirimlerinizi benimle paylaşın. İyi kodlamalar!