W3C home > Mailing lists > Public > www-style@w3.org > January 2012

Color tweaking functions

From: Pete Boere <pete@the-echoplex.net>
Date: Sat, 21 Jan 2012 09:56:19 +0000
Message-ID: <CAKZZz6dd-fu1M-+rFtagaUTYJ16YyZGTRw2NPZPwn6QyeDmtPw@mail.gmail.com>
To: www-style@w3.org
Are there any plans to implement color 'tweaking' functions in css?

I've used the following syntax in a preprocessor to good effect:

h-adjust( red 10% ) => rotate hue 10%
s-adjust( hotpink -100% )  => desaturate
l-adjust( #f00 15% ) => lighten 10%
a-adjust( rgb(0,0,255) -10% ) => reduce opacity 10%

In SASS and LESS:

lighten()
darken()
saturate()
desaturate()
spin()
fade()


It 's very useful when creating gradients:

linear-gradient( top, green, l-adjust( green 10% ) )


Or, for situations when you want to maintain a branded color palette but
increase contrast:

.regular-link {
   color: l-adjust( $( coca-cola-red ) -10% )
}





-- 
Pete Boere
Web Developer
Received on Saturday, 21 January 2012 09:56:53 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:48 GMT