bgrins
commented
9 years ago Hi, so what lighten and darken actually do is increment or decrement the lightness value by amount / 100, where amount is the second parameter you pass in. Once you get to 1 it's white, and 0 is black.
What happens with colors like "#f00" is that they are starting out at .5 lightness - try running this in the console: tinycolor("#f00").toHsl().l; // 0.5. So it needs only 50 to be passed into the lighten or darken functions to turn to either white or black. When you start with "#000", it needs 100 (since the lightness starts at 0 and needs to get all the way to 1).
So it sounds like you want a way to lighten a percentage towards white from a starting color. I think you really want is the tinycolor.mix function:
tinycolor.mix("#f00", "white", 0).toHex() // "#ff0000"
tinycolor.mix("#f00", "white", 50).toHex() // "#ff8080"
tinycolor.mix("#f00", "white", 100).toHex() // "#ffffff"
centinel3
I would like to start by saying that this script is awesome! Thank you very much!
I have implemented a lighten method on a hex color and noticed that after a certain amount, the color is white (#fff), though way before the lighten value makes it to 100. It seems to create white when you pass in an argument that is 50. The same holds true if you use the .darken() method. Is the lighten argument a % value as to how much to lighten the color? Please see below and let me know when you can. I'm using the meteor version of this if that helps.
It seems that a lot of colors other than black will turn to white (#fff) once the lighten argument hits 50. tinycolor("#f00").lighten(50).toString(); // new hex value for red is white (#fff)
It seems that a lot of colors other than black will turn to black (#000) once the darken argument hits 50. tinycolor("#f00").darken(50).toString(); // new hex value for red is black (#000)
Black on the other hand seems to take a lighten value all the way up to 100 tinycolor("#000").lighten(100).toString(); // Only when the value is 100 does this new value make it to white (#fff)
After testing a few other colors, it seems inconsistent behavior. See another example below:
00CC00 = green
tinycolor("#00CC00").lighten(60).toString(); // creates white (#fff) tinycolor("#00CC00").darken(40).toString(); // creates black (#000)
Any help with this would be awesome. Thank you again! -Chris
Not sure if you are implementing something like this, though want to share: http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors