我有一个网站，我试图创建一个页面的按钮的所有不同的颜色，但我想改变文字的基础上，背景是白色或黑色，让用户容易阅读它。我已经尝试了这么多，但可以得到它。我有渲染选项的顶部，然后我加粗的地方，我试图把它，如果我是布局错误或任何请纠正我
'

// Renders color options
  var rgbValue = [255, 0, 0];
  function setColor() {
    rgbValue[0] = Math.round(Math.random() * 255);
    rgbValue[1] = Math.round(Math.random() * 255);
    rgbValue[2] = Math.round(Math.random() * 255);
    var color = Math.round(((parseInt(rgbValue[0]) * 299) +
        (parseInt(rgbValue[1]) * 587) +
        (parseInt(rgbValue[2]) * 114)) / 1000);
    var textColor = (color > 120) ? 'black' : 'white';
      
    $('.background').css('color', textColor);
}
function BG_Color() {
  setColor();
}

// here is the javascript i am putting it into
return filterColors.alphabetical > 0 ? filterColors.map((item, index) => {
x1米2英寸x1米3英寸

<li
    style={{
      backgroundImage: `url(${item.url})`
      }}
      key={item.url}
      className={classnames('d-inline-block', 'background_shirts',{
        // 'me-25': !isLastColor,
        selected_color: selectedColorImage ? item.url == selectedColorImage : index == 0
      })}
      onClick={() => { SelectedColorView(item) }}
      
    >
    </li>
  )
}) : data.colors.map((item, index) => {
  // console.log('item---color', item)
  return (

    <li
      style={{
      backgroundImage: `url(${item.url})`
      }}
      key={item.url}
      className={classnames('d-inline-block', 'background_shirts',{
        // 'me-25': !isLastColor,
        selected_color: selectedColorImage ? item.url == selectedColorImage : ""
      })}
      onClick={() => { SelectedColorView(item) }}
    >**<h5 id={(BG_Color)} className='item-color, background'>{item.color}</h5>**
    </li>
  )
})

}

`