http://onionworks.net/2004/renderengine/utility

fadeColor (sourceColor : string, targetColor : string, position : double) : string

This method makes it possible to specify a starting and a target colour. The parameter “position” works like a sort of controller between these two colours. Depending on the value it has, the colour value returned by the method changes.

Special features:

If “position” has the value 0, the starting colour is displayed, and if it has value 1, the target colour is displayed.

<div style="background-color: {util:fadeColor('#60a0f0', '#ffffff', 0.1)}; width:160px">Fading-Beispiel</div>
<div style="background-color: {util:fadeColor('#60a0f0', '#ffffff', 0.3)}; width:160px">Fading-Beispiel</div>
<div style="background-color: {util:fadeColor('#60a0f0', '#ffffff', 0.5)}; width:160px">Fading-Beispiel</div>
<div style="background-color: {util:fadeColor('#60a0f0', '#ffffff', 0.7)}; width:160px">Fading-Beispiel</div>
<div style="background-color: {util:fadeColor('#60a0f0', '#ffffff', 0.9)}; width:160px">Fading-Beispiel</div>
Farbabstufungen erzeugen

The above example has roughly the following result: