Red color and lighten of 50

[mk0y]

Hi all,

I'm having difficulties understanding logic here for some colors, in my case it's red, but it's the problem with any other than black I'd say.

If I use lighten of factor 50 colors already become white. Everything after 50 is white, which shouldn't happen.

Just try it:

tinycolor("#f00").lighten(50).toHex()

Am I missing something here?

[kmgdevelopment]

I'm also seeing this issue.

[CrandellWS]

hmmm

looking at http://online.sfsu.edu/chrism/hexval.html
I see 50% = 128 (dec) = 80 (hex)

tinycolor("#f00").lighten(25).toHex(); outputs to 50% ie ff8080

The docs says it should be 0 to 100 but it seems to be 0 to 50

brighten: function(amount = 10) -> TinyColor. Brighten the color a given amount, from 0 to 100.
https://github.com/bgrins/TinyColor/tree/96592a5cacdbf4d4d16cd7d39d4d6dd28da9bd5f#brighten

ok I find it is also a problem for darkening

Also noticed that

tinycolor('#f00').brighten(50.25).toHex(); //ff8080
quarter percentage accuracy or so lost there...

[CrandellWS]

https://github.com/bgrins/TinyColor/blob/master/tinycolor.js ... perhaps this could be helpful for conversions... idk ... I did not want to open an issue to say that...
@CrandellWS thanks, this issue was already resolved. The plugin is using another color conversion library https://github.com/Qix-/color
https://github.com/farbelous/bootstrap-colorpicker/issues/259#issuecomment-433209639

perhaps I can compare these 2 libraries to see how this one can be improved...

for now I am ok with understanding 25 = 50%, but want things to be accurate.

[jlove73071]

Behind the scenes, to lighten or darken, tinycolor simply converts colors to HSL, then adds whatever number passed in to lighten() to the L value of the HSL.

For example, play around with that theory using this page:
https://htmlcolors.com/hex-to-hsl

Colors get complicated, especially in the RGV color space.. HSL, LAB and other color spaces attack the problem from different ways, but in all in all, there are a ton of ways to do color/brightness math. HSL is one way that the browsers help with and is relatively easy to convert to/from RGB/HEX.