Recently I was asked to find the closest RGB component (red or green or blue) from a color. I had no clue at that time. Later I Googleed and found out there is a formula to calculate the distance between two colors.
This is the formula I found on wiki
Let's say we have two colors, rgb(0,206,102) and rgb(118,184,225). If we assume rgb(0,206,102) to (x1,y1,z1) and rgb(118,184,225) to (x2,y2,z2). We can draw two points (0,206,102) and (118,184,225) on a three dimensional co-ordinate graph.
We can calculate the distance between two points as follows
let distance = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)+(z1-z2)*(z1-z2))
distance = Math.sqrt((0-118)*(0-118)+(206-184)*(206-184)+(102-225)*(102-225))
distance = 171.86331778480246
Now, let's solve the current problem.
Create a function which will find the distance between two colors.
const distanceBetweenTwoColors = (color1, color2) => {
const [r1,g1,b1] = color1;
const [r2,g2,b2] = color2;
return (r1-r2) * (r1-r2) + (g1-g2) * (g1-g2) + (b1-b2) * (b1-b2);
};
If you notice the function, we skip Math.sqrt because we are required to do comparison between values instead of absolute computation of a value.
Create a list of colors so that we can compare the distance between given color to our list.
const colorList = {'black':[0,0,0], 'white':[255,255,255], 'red':[255,0,0], 'green': [0,255,0], 'blue':[0,0,255]};
Create a function which will loop through our colorlist and compare distance one by one with the given color and return to the closest one from the list.
const getClosestRGBComponentFromColor = (givenColor) => {
let closestDistance = null;
let closestColor = [];
for (let color in colorList) {
const distance = distanceBetweenTwoColors(colorList[color], givenColor);
if (closestDistance === null || distance < closestDistance) {
closestDistance = distance;
closestColor = [color];
} else if (closestDistance === distance) {
closestColor.push(color);
}
}
return closestColor;
}
Now we can use it as shown below.
const color = [0,155,0];
console.log(`Closest to the color "${getClosestRGBComponentFromColor(color)}"`);
// output: Closest to the color "green"
Hope you find this article useful. Thank you for reading till the end.
Top comments (0)