How to change text color depending on background color using JavaScript?

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 uses the approach discussed above. 

html

<script src=
 "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<style>
    #backG {
        width: 200px;
        height: 50px;
        color: white;
        background: green;
        margin: 0 auto;
    }
</style>
<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>

Output:

How to change text color depending on background color using JavaScript?

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

html

<title>
    How to change text color depending
    on background color using JavaScript?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<style>
    #backG {
        width: 200px;
        height: 50px;
        color: white;
        background: green;
    }
</style>
<h1 style="color:green;">
    GeeksforGeeks
</h1>
<p id="GFG_UP">
</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>

Output:

How to change text color depending on background color using JavaScript?