CODEWITHSUNDEEP
javascriptjqueryhtmlcsscolors
user3537990
user3537990

Reputation:

Changing text depending on background.

So I have a page where the color changes dynamically. And so will the text. Here's what I'm using.

if (parseInt(color, 16) > 0xffffff / 2) {}

The problem is that the code isn't applying to 000000, so when I enter that in the hex box, the text stays black, making it unreadable. Here's a demo

Upvotes: 3

Views: 360

Answers (5)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

You need to update your hex keyup function like below. So when you enter "000" or "000000" on the hex textbox, the text will become white. if not it will stay in black color.

$('.hex').keyup(function () {
var a = $(this).val();
$('#example').text(a);
console.log(a);
$('body').css('background', '#' + a);

  if(a == "000" || a == "000000")
  {
   $('body').css('color','#fff');
  }
  else
  {$('body').css('color','#000');}
function hex2rgb(a) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)

  } : null;
}

console.log(hex2rgb(a).r);
console.log(hex2rgb(a).g);
console.log(hex2rgb(a).b);


$('.r').val(hex2rgb(a).r);
$('.g').val(hex2rgb(a).g);
$('.b').val(hex2rgb(a).b);

 });

Fiddle Demo Here

Upvotes: 0

user3728283
user3728283

Reputation:

The text remains black because you don't actually change text color in the method you specify.

This, is incorrect because you have text in the middle of nowhere (and missing a semi-colon, if it were valid to begin with):

if(parseInt(color, 16) > 0xffffff/2)
{'black'
} else {
  'white';
}

To make this do something, I changed it to:

function updateTextColors(color) {
    //CHANGE TEXT COLOR
    if(parseInt(color, 16) > 0xffffff/2)
    {
        $("body").css('color', 'black');
    } else {
        $("body").css('color', 'white');
    }
}

Note that made use of jQuery for the sample, for the simplicity of showing you. You can then call this method with the color and will adjust appropriately.

http://jsfiddle.net/YLeZC/3/

PS. While not in the scope of your question, you'll want to make sure to prevent invalid hex colors from causing a text color update as well as add better support for 3 digit hex codes.

Upvotes: 0

Oriol
Oriol

Reputation: 288010

I have fixed and cleaned your code: Demo

// Current color
var cColor = {};

function setColor(color, dontUpdate) {
    //Change BG color 
    document.body.style.backgroundColor = "#" + color;

    //Change text color
    document.body.style.color =
        parseInt(color, 16) > 0xffffff/2
    ? 'black'
    : 'white';

    // Update HEX field
    $('.hex').val(color);

    // Only update RGB fields if needed    
    if(!dontUpdate) {
        $('.r').val(parseInt(cColor.r = color.substr(0,2), 16));
        $('.g').val(parseInt(cColor.g = color.substr(2,2), 16));
        $('.b').val(parseInt(cColor.b = color.substr(4,2), 16)); 
    }
}

// Listen to space key
$(document).keydown(function (e) {
    if (e.keyCode == '32') {
        // Generate random HEX color
        setColor(Math.random().toString(16).slice(2, 8));
    }
});

// Listen to changes in fields. Consider using "input" event instead
// of "keyup" to detect changes no produced by keyboard, e.g. pasting.
// It won't work on IE8, though.

// Change BG on input on HEX       
$('.hex').on('keyup', function () {
    setColor($(this).val());
});

// Change BG on input on RGB
$('.r, .g, .b').on('keyup', function() {
    var primary = this.className;
    this.value = Math.max(Math.min(this.value|0, 255), 0) || 0;
    cColor[primary] = hex(+this.value);
    setColor(cColor.r + cColor.g + cColor.b, true);
});

function hex(num) {
    return ("0" + num.toString(16)).slice(-2);
}

// Set default BG color
setColor('000000');

Also see Colourity Demo

Upvotes: 0

Akhlesh
Akhlesh

Reputation: 2399

isDark method is not giving correct result you can use another function to check color.

var getRGB = function (b) {
  var a;
  if (b && b.constructor == Array && b.length == 3) return b;
  if (a = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(b)) return [parseInt(a[1]), parseInt(a[2]), parseInt(a[3])];
  if (a = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(b)) return [parseFloat(a[1]) * 2.55, parseFloat(a[2]) * 2.55, parseFloat(a[3]) * 2.55];
  if (a = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(b)) return [parseInt(a[1], 16), parseInt(a[2], 16), parseInt(a[3],
16)];
  if (a = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(b)) return [parseInt(a[1] + a[1], 16), parseInt(a[2] + a[2], 16), parseInt(a[3] + a[3], 16)];
return (typeof (colors) != "undefined") ? colors[jQuery.trim(b).toLowerCase()] : null
};

var isDark = function (color) {
  var rgb = getRGB(color);
  if (!rgb) return null;
  return (0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]) > 180 ? false : true;
}

Fiddle Demo

Upvotes: 1

Vishwa
Vishwa

Reputation: 1545

You have added a property to change background color but not the text color. I've added an extra line your code.

document.body.style.color = "#" + txt_color;

Hope this is what you need. http://jsbin.com/jilibabi/2

Upvotes: 0

Related Questions