Lack of interest Quick way to create lighter and darker colours in the template system

[Stuart Wright]

So often when buttons are highlighted they have a darker or lighter colour. I see the three colours used often for the normal, hover and selected state of objects.

To achieve this, we have to use the colour palette to set up the original colour plus a lighter and darker version of it meaning three properties for each colour.

I was wondering whether it would be possible to, in the template system, add (or subtract) a 'brightness' adjustment?
I would suggest adding a decimal value because people understand that better.

So, for example, @primaryMedium+20 would add a value of 20 decimal to each decimal of red, green and blue elements. I.e. default Xenforo @primaryMedium+20 would become

#176093 is (23,96,147)

23 + 20 = 43
96 + 20 = 116
147 + 20 = 167

(43,116,167) = #2B74A7 which is a nice, lighter version.

Of course subtracting a value would make the colour darker.
I think this would be a nice and simple way to put what is effectively a brightness adjustment into the template system.

 

[cclaerhout]

@Stuart Wright
If you need it right now for a custom addon, check this.

 

[Stuart Wright]

@Stuart Wright
If you need it right now for a custom addon, check this.

Thank you. That's a nice tool, but for me I'm thinking about making it easier to create colour variations with fewer colour properties set in the color palette.

 

[cclaerhout]

Thank you. That's a nice tool, but for me I'm thinking about making it easier to create colour variations with fewer colour properties set in the color palette.

If I may, the only difference is the syntax. The above addon is using the a template helper. What you've asked for is "@primaryMedium+20". This would require some parsing modification, so may be in XenForo 2.0. But this would also prevent to perform further modifications on a color (ligthen, darken, fadein, fade out, etc.).
With the above addon, the syntax is the following one:

{xen:helper playwithcolors, '@primaryMedium', 'lighten', '20'}

or

{xen:helper playwithcolors, '@primaryMedium', 'darken', '20'}