A cor é fundamental em design, marca e ux. Escolher a cor certa é crucial para qualquer produto ou site, mas navegar inúmeros tons e tons pode ser um desafio. Este artigo detalha a criação de uma biblioteca de correspondência de cores que aproveita a distância euclidiana para identificação de cores eficiente e precisa.

a necessidade de uma biblioteca de correspondência de cores

Esta biblioteca simplifica a correspondência de cores para os desenvolvedores, oferecendo várias funcionalidades -chave:

1. conversão hex-to-rgb: converte códigos de cores hexáticos para o formato RGB mais versátil.
2. correspondência de cores: identifica a correspondência de cores mais próxima em uma determinada paleta.
3. Cálculo da distância: mede a diferença entre duas cores usando a distância euclidiana.
4. exato de detecção de correspondência: verifica se uma cor corresponde precisamente a uma entrada da paleta.

A simplicidade e a eficiência desta biblioteca são atribuídas diretamente ao uso da distância euclidiana.

Distância euclidiana: a pedra angular da correspondência de cores

A distância euclidiana calcula a "distância" entre duas cores no espaço 3D RGB. Cada cor (vermelha, verde, azul) é um ponto neste espaço. A fórmula determina a distância entre esses pontos, representando a similaridade visual das cores. Uma distância menor indica maior similaridade.

por que escolher a distância euclidiana?

A distância euclidiana se destaca na correspondência de cores devido a:

• Precision: fornece uma medida precisa da similaridade de cores.
• Simplicity: fácil de implementar e entender.
• escalabilidade: lida com eficiência paletas de cores grandes.

Esta biblioteca usa distância euclidiana para comparar uma cor hexadecimal com uma paleta e encontrar a partida mais próxima, garantindo velocidade e precisão.

Aplicativos da distância euclidiana na biblioteca

a biblioteca oferece:

1. correspondência de cor precisa: identifica a cor mais próxima em uma paleta usando a distância euclidiana. Por exemplo:

const { colorName, exactMatch, closestHex } = identifyColor("#DD4C22");
console.log(colorName);  // Output: "Vivid Orange"
console.log(exactMatch); // Output: true (if exact match)
console.log(closestHex); // Output: "#DD4C22" (closest hex code)

2. HEX-TO-RGB Conversão: uma função de utilitário converte hexadecimal em rgb:

const rgb = rgb("#DD4C22");
console.log(rgb); // Output: [221, 76, 34] (RGB array)

3. Cálculo da distância de cor: calcula a distância euclidiana entre duas cores RGB:

const rgb1 = [221, 76, 34];
const rgb2 = [255, 255, 255];
const distance = calculateDistance(rgb1, rgb2);
console.log(distance); // Output: a numeric value representing the distance

4. exato correspondência de detecção: o exactmatch sinalizadores booleanos da paleta exata correspondências.

Esta biblioteca simplifica a seleção de cores e a correspondência para desenvolvedores e designers.

Começando

instale o pacote via npm:

npm install @iamsuz/color-kit

Exemplo de uso:

const { identifyColor } = require("@iamsuz/color-kit");
const { colorName, closestHex, exactMatch } = identifyColor("#DD4C22");
console.log(colorName);  // "Vivid Orange"
console.log(exactMatch); // true
console.log(closestHex); // "#DD4C22"

Esta biblioteca oferece suporte ao TypeScript.