Find element with the given color property

Write a function to find all the elements with the given color. Here the color will be provided in any format like, plain text (white), HEXA value (#fff or #ffffff), or RGB value (RGB(255, 255, 255)).

Example

Input:
<div id="root">
  <span style="color:#fff;">1</span>
<span style="color:#eee;">2</span>
  <span style="color:white;">3</span>
  <span style="color:rgb(255, 255, 255);">4</span>
</div>

findElementByColor(document.getElementById('root'), 'rgb(255, 255, 255)');

Output:
[
<span style="color:#fff;">1</span>,
<span style="color:white;">3</span>,
<span style="color:rgb(255, 255, 255);">4</span>
]

The most challenging part of this problem is to convert the color values to a single format that can be used for the comparison.

For this, we can create a function that will temporarily create a new element and apply the input color as its style, then using the getComputedStyle() method, we can get the RGB value of the color and convert it to HEXA code for comparison.

function getHexColor(color){
    // create a new element
    const div = document.createElement('div');
  
    // apply the color to the element
    div.style.color = color;
  
    // get the computed style of the div
    let colors = window.getComputedStyle(document.body.appendChild(div));
  
    // get the RGB value of the color
    colors = colors.color.match(/\d+/g).map(function(a){ return parseInt(a, 10); });
  
    // remove the div
    document.body.removeChild(div);
  
    // convert the RGB value to HEXA and return it.
    return (colors.length >= 3) ? '#' + (((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substr(1)) : false;
}

For finding the elements with the given color value, we will first convert the input color value to the HEXA using this function.

Then recursively traverse all the DOM elements and get their color values and convert them to HEXA and compare it with the input color value's HEXA.

If they match, push the element to the result array and return it.

function findElementByColor(element, colorValue){

  // convert input color to HEXA
  const inputColorHexa = getHexColor(colorValue);
  
  // to store the result
  const result = [];
  
  // helper function to traverse the DOM
  const search = (element, attrValue) => {
    // get the color value of the element
    let value = element.style['color'];
    
    // convert the value to the HEXA
    value = getHexColor(value);
    
    // if both the HEXA value matches
    // store the result
    if(value === inputColorHexa){
      result.push(element);
    }
    
    // recursively search for each child of the element
    for(const child of element.children) {
      search(child, attrValue);
    }
  };
  
  // begin the search
  search(element, colorValue);
  
  // return the result
  return result;
}

Input:
<div id="root">
  <span style="color:#fff;">1</span>
  <span style="color:#eee;">2</span>
  <span style="color:white;">3</span>
  <span style="color:rgb(255, 255, 255);">4</span>
</div>

console.log(findElementByColor(document.getElementById('root'), 'white'));

Output:
[
<span style="color:#fff;">1</span>,
<span style="color:white;">3</span>,
<span style="color:rgb(255, 255, 255);">4</span>
]