Change Text Color Based On Background Color Using Javascript

Websolutionstuff | Dec-25-2020 | Categories : PHP jQuery CSS HTML

In this article, we will see a change text color based on background color using javascript. Sometimes we have requirements to change text or font color dependent on background color and at that time if you are changing text color manually then this post will definitely help you. So, you can change font color dynamically based on background color using jquery.

So, let's see how to dynamically change text color based on a background color javascript and jquery change text color based on background.

Create HTML File

In this step, we will create an HTML file and add the below code.

<html> 
  
<head> 
    <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> 
    
</head> 
  
<body id="body" align="center" > 
    <h1 style="color:#03aa96;">   
            Websolutionstuff.com  
        </h1> 
    <p id="col_UP" style="font-size: 15px; font-weight: bold;"> </p> 
    <button onclick="col_Fun()">
        click here 
    </button> 
    <br> 
    <br> 
    <div id="backG">Welcome to websolutionstuff.</div> 
    
</body> 
  
</html>

 

 

Add CSS For Designing

Now, add CSS to add a head tag.

#backG { 
    width: 200px; 
    height: 30px; 
    color: white; 
    background: #03aa96; 
    margin: 0 auto;
    padding-top:10px;
  } 

 

 

Add Javascript Code

In this step, we will create a jquery function and change the text color based on the background color selection.

var el_up = document.getElementById('col_UP'); 
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 > 125) ? 'black' : 'white'; 
    var backColor =  
        'rgb(' + rgbValue[0] + ', ' + rgbValue[1] + ', ' 
     + rgbValue[2] + ')'; 
      
    $('#backG').css('color', textColor); 
    $('#backG').css('background-color', backColor); 
} 

function col_Fun() { 
    setColor(); 
}

 

Output:

change_textcolor_based_on_background_color

 


You might also like:

Recommended Post
Featured Post
Laravel 9 User Role and Permission
Laravel 9 User Role and Permis...

In this article, we will show you laravel 9 user role and permission with an example. here we will see how to set u...

Read More

Mar-02-2022

jQuery After And Before Example
jQuery After And Before Exampl...

In this article I will give you example of jquery after() and before() method. The after() method inserts spec...

Read More

Dec-10-2021

Laravel 9 Livewire File Upload Example
Laravel 9 Livewire File Upload...

In this article, we will see the laravel 9 livewire file upload example. Here, we will learn how to upload files us...

Read More

Dec-02-2022

How to Downgrade PHP 8.2 to 8.1 in Ubuntu
How to Downgrade PHP 8.2 to 8....

Hey there, I recently found myself in a situation where I needed to downgrade my PHP version from 8.2 to 8.1 on my Ubunt...

Read More

Nov-01-2023