CODEWITHSUNDEEP
phpjavascriptjquerycolorsrgb
Paulo
Paulo

Reputation: 538

how to see if a rgb color is too light

I have an aplication in which the customer chooses a color. I can't let this color be too light. Is there a way to see this, to prevent the customer from chosing a color that is too light?

Thank you a lot!

too light in the case is a color almost white....i have a web site with a white background and the user can choose a color through a jquery plugin.

I want to allow the user to choose the color he wants, but cant be too light.

Upvotes: 13

Views: 4228

Answers (3)

Jakub Hampl
Jakub Hampl

Reputation: 40523

If contrast is what you are looking for then check out this article.

They show a function like this to choose text color based on any arbitrary color:

function isTooLightYIQ(hexcolor){
  var r = parseInt(hexcolor.substr(0,2),16);
  var g = parseInt(hexcolor.substr(2,2),16);
  var b = parseInt(hexcolor.substr(4,2),16);
  var yiq = ((r*299)+(g*587)+(b*114))/1000;
  return yiq >= 128;
}

// usage:
element.style.color = isTooLightYIQ('ff0045') ? '#000' : '#fff';

The above function will return true if the color is too light for white text to be readable on top of this color.

Upvotes: 27

awesomeguy
awesomeguy

Reputation: 290

You're not being too specific, but assuming you are using Javascript,

var v = Math.round((r+g+b)/3) and check that it is below a certain threshold?

Also, what form is the color in? RGB? HSL? Hex?

Upvotes: -1

Marc B
Marc B

Reputation: 360562

'too light' relative to what? Some image? pure white? some shade of grey? Easiest method is to just make sure that one of the R,G,B member values is above some threshold, though that won't help if the user selects (128,0,0) and it's being pasted onto an image that's (127,0,0) - the difference is (1,0,0) and would be invisible or at minimum almost impossible to spot on most monitors.

Upvotes: 0

Related Questions