Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 357
Paulo Avatar asked Mar 29 '11 19:03

Paulo


People also ask

How do I know if my RGB is dark or light?

You can think of the RGB color space as a cube where each of the 3 colors are axis, in one corner you have black (RGB 0,0,0) and in the opposite corner you have white RGB (255,255,255), so if a color is closer to black it should be darker.

How do you find RGB intensity?

The intensity is the sum of the RGB values normalized to 1: 1 1= 3(R + G+ B).

How do you measure the brightness of a color?

A photometer measures the brightness (luminance) of visible light as it is perceived by the human eye. Colorimetry is the science of measuring color (chromaticity) as it is perceived by the human eye. Some instruments, such as a spot meter, can measure both luminance and chromaticity.

How do you interpret RGB values?

RGB defines the values of red (the first number), green (the second number), or blue (the third number). The number 0 signifies no representation of the color and 255 signifies the highest possible concentration of the color.


1 Answers

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.

like image 128
Jakub Hampl Avatar answered Oct 13 '22 01:10

Jakub Hampl