<aclass="facebook-link"target="_blank"href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Facebook">
<aclass="twitter-link"target="_blank"href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Twitter">
<pclass="condensed text-right">Animate <i>color</i> properties for a target element and updates its CSS style via <b>RGB</b>.</p>
</div>
<divclass="col9 border">
<pclass="lead condensed">The KUTE.js <b>Color Properties</b> component provides support for all color properties and all their variations on most browsers.</p>
<p>While with previous versions we used to have a <b>keepHex</b> option to always use the <b>HEX</b> format of the output color, modern browsers outright ignore the option and always
deliver colors in <b>RGB</b> format, probably for performance reasons.</p>
<p>The component supports input values such as <b>HEX</b>, <b>RGB</b> and <b>RGBA</b> for all color properties and most browsers should also work with
<li><kbdclass="bg-olive">color</kbd> allows you to animate the color for a target text element. Eg. <code>color: '#ff0000'</code>.</li>
<li><kbdclass="bg-olive">backgroundColor</kbd> allows you to animate the <code>background-color</code> for a target element. Eg. <code>backgroundColor: 'rgb(202,150,20)'</code>.</li>
<li><kbdclass="bg-olive">outlineColor</kbd> allows you to animate the <code>outline-color</code> for a target element. Eg. <code>outline-color: 'cyan'</code>.</li>
<li><kbdclass="bg-olive">borderColor</kbd> allows you to animate the <code>border-color</code> on all sides for a target element. Eg. <code>borderColor: 'rgba(250,100,20,0.5)'</code>.</li>
<li><kbdclass="bg-olive">borderTopColor</kbd>, <kbdclass="bg-olive">borderRightColor</kbd>, <kbdclass="bg-olive">borderBottomColor</kbd> and <kbdclass="bg-olive">borderLeftColor</kbd> properties allow
you to animate the color of the border on each side of a target element. Eg. <code>borderTopColor: 'rgb(0,66,99)'</code>.</li>
</ul>
<h3>Examples</h3>
<p>OK let's have a look at some sample tween objects and a quick demo:</p>
<li>The component will NOT work with <b>SVGElement</b> targets and their specific color attributes like <code>fill</code> or <code>stroke</code>, for that you can use the
<li>To simplify your workflow, the value processing can also work with web safe colors like <code>steelblue</code> or <code>darkorange</code>.</li>
<li>You can also use <code>RGB</code> or <code>RGBA</code>, but the last one is not supported on legacy browsers and it should fallback to <code>RGB</code>.</li>
<li>Some properties like <code>borderColor</code> and its variations or <code>outlineColor</code> won't have any visible effect if no border or outline style is applied to
your target element.</li>
<li>This component is bundled with the standard <i>kute.js</i> distribution file and the <i>demo/src/kute-extra.js</i> file.</li>