CODEWITHSUNDEEP
javascriptrgbgetcomputedstyle
Abvishek kumar
Abvishek kumar

Reputation: 41

how to convert rgb color to color name string in javascript

how to convert rgb color to color name string in javascript

 let btn = document.querySelector("#demo");
         let css = getComputedStyle(btn);
           console.log(css.color);

output is in rgb value rgb (255,0,0)

Upvotes: 2

Views: 1904

Answers (1)

Andy
Andy

Reputation: 63587

You need to convert the RGB string to a hex value, and then you can compare it against a list like this of HTML color names.

const colors={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff"};

// Pass in the string
function toHex(rgb) {

  // Grab the numbers
  const match = rgb.match(/\d+/g);

  // `map` over each number and return its hex
  // equivalent making sure to `join` the array up
  // and attaching a `#` to the beginning of the string 
  return `#${match.map(color => {
    const hex = Number(color).toString(16);
    return hex.length === 1 ? `0${hex}` : hex;
  }).join('')}`;
}

// Now just iterate over the colors object and return the
// key from the property where the value matches the hex value
function findColor(hex) {
  const pair = Object.entries(colors).find(([key, value]) => {
    return value === hex;
  });
  return pair[0];
}

const hex1 = toHex('rgb(255, 228, 196)');
console.log(findColor(hex1));

const hex2 = toHex('rgb(127, 255, 212)');
console.log(findColor(hex2));

Upvotes: 1

Related Questions