Skip to content
Related Articles

Related Articles

How to change text color depending on background color using JavaScript?
  • Last Updated : 06 Sep, 2019

The task is to set the foreground color based on the background color so that it will become visible. Here few of the important techniques are discussed. We are going to use JavaScript.

Approach:

  • First select the random Background color(by selecting random RGB values) or a specific one.
  • Use the YIQ formula to get the YIQ value.
  • Depending on the YIQ value select the effective foreground color.

Example 1: This example using the approach discussed above.




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to change text color depending 
      on background color using JavaScript?
    </title>
    <script src=
    </script>
    <style>
        #backG {
            width: 200px;
            height: 50px;
            color: white;
            background: green;
            margin: 0 auto;
        }
    </style>
</head>
  
<body id="body" align="center">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 15px;
              font-weight: bold;">
    </p>
    <button onclick="GFG_Fun()">
        click here
    </button>
    <br>
    <br>
    <div id="backG">This is GeeksForGeeks.</div>
    <script>
        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();
        }
    </script>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example using the approach discussed above but not using only black and white color for the foreground.




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to change text color depending
      on background color using JavaScript?
    </title>
    <script src=
    </script>
    <style>
        #backG {
            width: 200px;
            height: 50px;
            color: white;
            background: green;
            margin: 0 auto;
        }
    </style>
</head>
  
<body id="body" align="center">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 15px; font-weight: bold;">
    </p>
    <button onclick="GFG_Fun()">
        click here
    </button>
    <br>
    <br>
    <div id="backG">This is GeeksForGeeks.</div>
    <script>
        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();
        }
    </script>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :