How to change text color depending on background color using JavaScript? Last Updated : 23 Jan, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report 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? Comment More infoAdvertise with us Next Article Design Background color changer using HTML CSS and JavaScript P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Change Background Color of a Div on Mouse Move Over using JavaScript ? The background color of the div box can be easily changed using HTML, CSS, and Javascript. We will use the querySelector() and addEventListener() methods to select the element and then apply some math logic to change its background color. The below sections will guide you on how to create the effect 2 min read Design Background color changer using HTML CSS and JavaScript Background color changer is a project which enables to change the background color of web pages with ease. There are color boxes on a web page when the user clicks on any one of them, then the resultant color will appear in the background of the web page. It makes web pages look attractive.File stru 3 min read How to Change Background Color According to Mouse Location using JavaScript? To change the background color based on the mouse location in JavaScript, we can track the cursor's position on the screen and adjust the background color as the mouse moves. This is done by capturing the X and Y coordinates of the mouse and applying those values to change the background color dynam 1 min read How to change background color of canvas-type text using Fabric.js ? In this article, we are going to see how to change the background color of the canvas-like text using FabricJS. The canvas means text written is movable, rotatable, resizable, and can be stretched. But in this article, we will change the background color. Further, the text itself cannot be edited li 2 min read How to change style/class of an element using JavaScript ? In this article, we will learn how we can change the style/class of an element. If you want to build a cool website or app then UI plays an important role. We can change, add or remove any CSS property from an HTML element on the occurrence of any event with the help of JavaScript. There are two com 4 min read How to change background color of paragraph on double click using jQuery ? In this article, we will see how to change the background color of a paragraph using jQuery. To change the background color, we use on() method. The on() method is used to listen the event on an element. Here we are going to use dblclick event. For changing the background color we are going to use c 2 min read Like