css-colors icon indicating copy to clipboard operation
css-colors copied to clipboard

Ensure the entry background contrasts with the current color

Open tabatkins opened this issue 12 years ago • 0 comments

The entry box uses partially-transparent black as its background color, which means that it disappears completely if your entered color is very dark.

Instead, you should detect when the current color is 'dark' and switch to using partially-transparent white. A simple way to do so is to use this formula for lightness:

.2126 * Math.pow(r,2.2) + .7152 * Math.pow(g,2.2) + .0722 * Math.pow(b,2.2)

(This assumes that r, g, and b are in the range [0,1].)

If the lightness is > .5, use black background. If < .5, use white background.

tabatkins avatar Jul 08 '12 02:07 tabatkins