Monochromatic doesn't shift to keep index values in consistent slots

[aherasimchuk]

It would be nice if .monochromatic() shifted the color values that are returned so indices were consistent in terms of lightness or value, or allowed this as a property to pass to it. Right now, it appears to be doing a wrap around of the color gamut.

Basically, when doing:

let firstSet = tinyColor('#4171d9').monochromatic(); let secondSet = tinyColor('#9a9082').monochromatic();

The darkest color for the former is firstSet[1], but for the latter it's secondSet[3]. It would be nice if both returned [0] as the darkest color result, and worked upwards from there.

I might be missing something easy here, so my apologies if I am.

[bgrins]

This could be handled by using: tinycolor("#9a9082").monochromatic().sort(function(a,b) { return a.toHsv().v > b.toHsv().v ? 1 : -1}). I agree it looks nicer when presented in a palette to have it ordered by value but it seems more 'right' to return it in the current order which is how the math works out when generating it.

[aherasimchuk]

Makes sense.

Might be nice to have a simple parameter passed to the function to keep our color code a bit cleaner, rather than adding our own sort function, as simple as that one is. Mostly, it's helpful to us designer types with less coding knowledge to have that option already available and (more importantly) documented. Makes the transition from css or less or sass to using javascript + tinycolor a bit easier. But now that I see your solution, I'm smacking my head realizing I didn't think of it.

Thanks for the quick response! Much appreciated.

[aherasimchuk]

Actually, in looking over what I'm trying to do, it would be nicer to have a .tint() and .shade() function. These functions would do the same math as monochromatic does, but only walk in one direction a number of steps and stop at white for tints and black for shades. Maybe default to 3 indices returned, while discarding white and black?

Then I'd be able to write:

let colorTint = tinyColor('#4171d9').tints(); let colorShade = tinyColor('#4171d9').shades();

And get an array of tints: colorTint[0], colorTint[1], and colorTint[2]. Same for shades. In this example, the 4th index would have been white or black but it gets discarded and not returned, as it's not that useful as part of the tint or shade set.

This method makes setting up a base color, then use tints and shades from it to generate themes a lot easier.

Just thinking out loud.

[CiobanuMariusCatalin]

If you need them sorted by lightness i used: tinycolor("#9a9082").monochromatic().sort(function(a,b) { return a.toHsl().l < b.toHsl().l ? 1 : -1})