Descobrir cor mais próxima com JavaScript

3d atrás

A função abaixo, escrita em #JavaScript, recebe uma cor hexadecimal e array com várias cores hexadecimais e retorna a cor mais próxima nesse grupo.

Primeiro, vamos definir, algumas funções de utilidade. A primeira, converte uma cor hex para RGB, pra facilitar os cálculos futuros.

function hexParaRgb(hex) {
	const
		r = parseInt(hex.slice(1, 3), 16),
		g = parseInt(hex.slice(3, 5), 16),
		b = parseInt(hex.slice(5, 7), 16);

	return [r, g, b];
}

A segunda função, vai retornar a distância entre duas cores RGB, usando o método euclidiano.

function distancia(rgb1, rgb2) {
	const
		r = rgb1[0] - rgb2[0],
		g = rgb1[1] - rgb2[1],
		b = rgb1[2] - rgb2[2];
	
	return Math.sqrt(r * r + g * g + b * b);
}

E agora, podemos definir a função principal:

function corMaisProxima(hex, cores) {
	const rgb = hexParaRgb(hex);

	let cor = null;
	let menorDistancia = Infinity;

	for (const c of cores) {
		const cRgb = hexParaRgb(c);
		const d = distancia(rgb, cRgb);

		if (d < menorDistancia) {
			menorDistancia = d;
			cor = c;
		}
	}

	return cor;
}

Exemplos de uso

Para usar a função, basta chamá-la da seguinte maneira:

corMaisProxima('#FF0000', ['#F44336', '#4CAF50', '#2196F3']); // #F44336

corMaisProxima('#00FF00', ['#F44336', '#4CAF50', '#2196F3']); // #4CAF50

corMaisProxima('#0000FF', ['#F44336', '#4CAF50', '#2196F3']); // #2196F3

Exemplos de uso

Comentários (0)