How to change text color as per background color using javascript?

Question

I want to change text color as per background between lighter to darker color.

What I wanted to do as below:

[background Color] + -------- - Text with Background

So here if I choose background Green then " Text with background " text color can switch from lighter color to darker color using + -

I've used below code.

Code

<input type="range" name="bgopacity" id="bgopacity" value="0" min="0" max="765" step="1" onchange="rangevalue.value=value">

<span class="txtcolor">Text With Background</span>

<script>
    var rval = bval = gval = 0;
    $('#bgopacity').on('change keyup mouseout keypress click mouseenter mouseup', function (value) {

        var valcnt = $(this).val();

        if (valcnt <= 255) {
            rval = valcnt;
            gval = bval = 0;
        } else if (valcnt >= 255 && valcnt <= 510) {
            rval = 255;
            gval = valcnt - rval;
            bval = 0;
        } else if (valcnt >= 510) {
            rval =  gval = 255;
            bval = valcnt - (gval + rval);
        }

        $('.txtcolor').css('color','rgb('+Math.round(rval)+','+Math.round(gval)+','+Math.round(bval)+')');
    });
</script>

This code is working perfectly, but only some colors are changing. So I need more color switch between 0 to 765.

Can you please help me to find out relative code? Thanks in advance.

Answer 1

If I understood correctly, you want to have the user pick a color and, after that, have a slider that allows the user to lighten or darken the color selected.

Instead of the RGB model (0 - 255 for Red, Green and Blue, respectively), I'd recommend you check out the HSL model .

HSL stands for Hue , Saturation and Luminosity . This CodePen project demonstrates very well how HSL and RGB differ.

• The Hue is an angle from 0° - 360° (the deg suffix in CSS is optional)

  • It defines what color you're working with. Red is at 0°, green is at 120° and blue is at 240°, looping back to red at 360°. You can pick any of the beautiful nuances of color in between 0° and 360°.

    

• The Saturation is a percentage from 0% to 100% (with the % suffix in CSS)

  • It defines how colorful the color is. 100% saturation means the color is at its full potential. 0% saturation is just a sad, gray mess.

    

• The Luminosity is a percentage from 0% to 100% (with the % suffix in CSS)

  • It defines how bright the color is, how close it is to being black or white.

    

The hsl() usage in CSS is very similar to the rgb() 's:

element {
    color: hsl(190, 90%, 55%);  /* this is a beautiful cyan color */
}

Basically, where in RGB you have to pick the amount of each color to add up, in HSL you can pick what color and what to do with it .

---

So, in your case, the user would first choose the H ( hue ) part, which defines what color it is.

Then you could have a slider for L ( luminosity ), and let the user define just how bright the background color is.

---

Here's a working example of your task, but with HSL (I've added saturation as well but it can be easily removed if unnecessary):

 var hue_picker = document.getElementById("hue-picker"); var sat_picker = document.getElementById("sat-picker"); var lum_picker = document.getElementById("lum-picker"); var txt = document.getElementById("txt"); var div = document.getElementById("div"); function filter_input(input, min, max) { return Math.max(min, Math.min(input, max)) } function update_color() { // Filter out inputs that are greater than max or lesser than min var hue = filter_input(hue_picker.value, 0, 360); var sat = filter_input(sat_picker.value, 0, 100); var lum = filter_input(lum_picker.value, 0, 100); // (background has a fixed 50% luminosity) div.style.backgroundColor = "hsl(" + hue + ", " + sat + "%, 50%)"; txt.style.color = "hsl(" + hue + ", " + sat + "%, " + lum + "%)"; // Update the text to display current HSL values txt.innerText = "background-color: hsl(" + hue + ", " + sat + "%, 50%);\\n" + "color: hsl(" + hue + ", " + sat + "%, " + lum + "%);"; } hue_picker.onchange = hue_picker.oninput = update_color; sat_picker.onchange = sat_picker.oninput = update_color; lum_picker.onchange = lum_picker.oninput = update_color; 

 #div { height: 100px; width: 300px; } #txt { font-family: monospace; } 

 <input type="range" id="hue-picker" value="0" min="0" max="360" step="1"/> <input type="range" id="sat-picker" value="100" min="0" max="100" step="1"/> <input type="range" id="lum-picker" value="75" min="0" max="100" step="1"/> <div id="div"> <span id="txt">Text With Background</span> </div> 

Hopefully this is still relevant / useful to you! Cheers!