如何使用 JavaScript 根据背景颜色更改文本颜色？

任务是根据背景颜色设置前景色，使其可见。这里讨论了一些重要的技术。我们将使用 JavaScript。

方法：

• 首先选择随机背景颜色（通过选择随机 RGB 值）或特定颜色。
• 使用 YIQ 公式获得 YIQ 值。
• 根据 YIQ 值选择有效的前景色。

示例 1：此示例使用上述方法。

  

    
        How to change text color depending 
      on background color using JavaScript?
    
    
    
    
        #backG {
            width: 200px;
            height: 50px;
            color: white;
            background: green;
            margin: 0 auto;
        }
    

  

      
            GeeksForGeeks  
        
    
    
    
        click here
    
    
    
    This is GeeksForGeeks.
    
        var el_up = document.getElementById('GFG_UP');
        var rgbValue = [255, 0, 0];
        el_up.innerHTML = 
          "Click on the button to select effective pattern.";
  
        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 > 125) ? 'black' : 'white';
            var backColor = 
                'rgb(' + rgbValue[0] + ', ' + rgbValue[1] + ', '
             + rgbValue[2] + ')';
              
            $('#backG').css('color', textColor);
            $('#backG').css('background-color', backColor);
        }
  
        function GFG_Fun() {
            setColor();
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 2：此示例使用上面讨论的方法，但不只使用黑色和白色作为前景。

  

    
        How to change text color depending
      on background color using JavaScript?
    
    
    
    
        #backG {
            width: 200px;
            height: 50px;
            color: white;
            background: green;
            margin: 0 auto;
        }
    

  

      
            GeeksForGeeks  
        
    
    
    
        click here
    
    
    
    This is GeeksForGeeks.
    
        var el_up = document.getElementById('GFG_UP');
        var rgbValue = [255, 0, 0];
        el_up.innerHTML = 
          "Click on the button to select effective pattern.";
  
        function getforeGColor(rgb) {
            var cols = rgb.match(/^rgb\((\d+), \s*(\d+), \s*(\d+)\)$/);
            var b = 1;
            var rValue = cols[1];
            var gValue = cols[2];
            var bValue = cols[3];
            var rV = Math.floor((255 - rValue) * b);
            var gV = Math.floor((255 - gValue) * b);
            var bV = Math.floor((255 - bValue) * b);
            return 'rgb(' + rV + ', ' + gV + ', ' + bV + ')';
        }
  
        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 backColor = 
                'rgb(' + rgbValue[0] + ', ' + rgbValue[1] + ', '
             + rgbValue[2] + ')';
              
            var textColor = getforeGColor(backColor);
            $('#backG').css('color', textColor);
            $('#backG').css('background-color', backColor);
        }
  
        function GFG_Fun() {
            setColor();
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：