complements of white and black

[mvolkmann]

Is it correct that the complement of white is white and of black is black?

[bgrins]

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.

[mvolkmann]

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 notifications@github.comwrote:

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/bgrins/TinyColor/issues/38#issuecomment-39106491 .

R. Mark Volkmann Object Computing, Inc.

[bgrins]

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.

[mvolkmann]

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 notifications@github.comwrote:

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/bgrins/TinyColor/issues/38#issuecomment-39114930 .

R. Mark Volkmann Object Computing, Inc.

[bgrins]

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.

[mvolkmann]

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 notifications@github.comwrote:

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/bgrins/TinyColor/issues/38#issuecomment-39121200 .

R. Mark Volkmann Object Computing, Inc.