complements of white and black about tinycolor HOT 6 CLOSED

Good question - since complements are just modifying the hue it makes sense to me that white would be white and black would be black. Quickly checking a few other tools and they seem to give the same results, but I can't say for certain if this is correct.

from tinycolor.

I was trying to use that to select a font color that would be readable on a
given background color. Clearly white on white isn't readable. ;-)
That's okay, I went with a different approach.

On Mon, Mar 31, 2014 at 11:03 AM, Brian Grinstead
[email protected]:

Good question - since complements are just modifying the hue it makes
sense to me that white would be white and black would be black. Quickly
checking a few other tools and they seem to give the same results, but I
can't say for certain if this is correct.

Reply to this email directly or view it on GitHubhttps://github.com//issues/38#issuecomment-39106491
.

R. Mark Volkmann
Object Computing, Inc.

from tinycolor.

OK, cool. By the way, the readable and mostReadable functions could be helpful for this: https://github.com/bgrins/TinyColor/blob/master/tinycolor.js#L586.

I'd be interested in checking out the algorithm you have come up with for determining a readable font color based on the background, if you have it public somewhere.

from tinycolor.

IIUC correctly, those functions can tell me if a color I have chosen is
readable, but they don't suggest a color I should use.

I took a simplistic approach that seems to work well. I decided to always
use either white or black for the font color. The background can be any
color. I just add the R, G and B values of the background and see if the
sum is over 384. If it is, I use black. Otherwise I use white. I arrived at
384 though trial and error.

On Mon, Mar 31, 2014 at 12:16 PM, Brian Grinstead
[email protected]:

OK, cool. By the way, the readable and mostReadable functions could be
helpful for this:
https://github.com/bgrins/TinyColor/blob/master/tinycolor.js#L586.

I'd be interested in checking out the algorithm you have come up with for
determining a readable font color based on the background, if you have it
public somewhere.

Reply to this email directly or view it on GitHubhttps://github.com//issues/38#issuecomment-39114930
.

R. Mark Volkmann
Object Computing, Inc.

from tinycolor.

IIUC correctly, those functions can tell me if a color I have chosen is readable, but they don't suggest a color I should use.

Yeah, that is correct. But if you are limiting to black/white, you could leverage mostReadable like so:

tinycolor.mostReadable("red", ["black", "white"]).toHex()
> "ffffff"
tinycolor.mostReadable("#111", ["black", "white"]).toHex()
> "ffffff"
tinycolor.mostReadable("#ddd", ["black", "white"]).toHex()
> "000000"

This is more likely to work across random color input than the sum of r, g, and b (our eyes perceive the brightness of the three differently, so it usually weighted like so: R*0.299 + G*0.587 + B*0.114).

I'm sure there are separate algorithms to actually select an arbitrary color, or a way to optimize for brightness and color in the existing readability function. Seems like it would be useful, though a lot of times for design purposes it is better to constrain to a couple of chosen text color options like you have.

from tinycolor.

Ah, I didn't consider that option. I'll give that a try. Thanks!

On Mon, Mar 31, 2014 at 1:07 PM, Brian Grinstead
[email protected]:

IIUC correctly, those functions can tell me if a color I have chosen is
readable, but they don't suggest a color I should use.

Yeah, that is correct. But if you are limiting to black/white, you could
leverage mostReadable like so:

tinycolor.mostReadable("red", ["black", "white"]).toHex()

"ffffff"
tinycolor.mostReadable("#111", ["black", "white"]).toHex()
"ffffff"
tinycolor.mostReadable("#ddd", ["black", "white"]).toHex()
"000000"

This is more likely to work across random color input than the sum of r,
g, and b (our eyes perceive the brightness of the three differently, so it
usually weighted like so: R_0.299 + G_0.587 + B*0.114).

I'm sure there are separate algorithms to actually select an arbitrary
color, or a way to optimize for brightness and color in the existing
readability function. Seems like it would be useful, though a lot of
times for design purposes it is better to constrain to a couple of chosen
text color options like you have.

Reply to this email directly or view it on GitHubhttps://github.com//issues/38#issuecomment-39121200
.

R. Mark Volkmann
Object Computing, Inc.

from tinycolor.