KUTE.js Color Properties

Color Properties

The component that animates CSS color properties for Element targets on most browsers.

Overview

Animate color properties for a target element and updates its CSS style via RGB.

The KUTE.js Color Properties component provides support for all color properties and all their variations on most browsers.

While with previous versions we used to have a keepHex option to always use the HEX format of the output color, modern browsers outright ignore the option and always deliver colors in RGB format, probably for performance reasons.

The component supports input values such as HEX, RGB and RGBA for all color properties and most browsers should also work with web safe colors, eg. color: 'red'.

For a quick reference, here are all the supported properties:

Supported Properties

color allows you to animate the color for a target text element. Eg. color: '#ff0000'.
backgroundColor allows you to animate the background-color for a target element. Eg. backgroundColor: 'rgb(202,150,20)'.
outlineColor allows you to animate the outline-color for a target element. Eg. outline-color: 'cyan'.
borderColor allows you to animate the border-color on all sides for a target element. Eg. borderColor: 'rgba(250,100,20,0.5)'.
borderTopColor, borderRightColor, borderBottomColor and borderLeftColor properties allow you to animate the color of the border on each side of a target element. Eg. borderTopColor: 'rgb(0,66,99)'.

Examples

OK let's have a look at some sample tween objects and a quick demo:

KUTE.to('selector1',{color:'rgb(0,66,99)'}).start();
KUTE.to('selector1',{backgroundColor:'#069'}).start();
KUTE.to('selector1',{borderColor:'turquoise'}).start(); // IE9+

Colors

Start

Notes

The component will NOT work with SVGElement targets and their specific color attributes like fill or stroke, for that you can use the HTML Attributes component.
To simplify your workflow, the value processing can also work with web safe colors like steelblue or darkorange.
You can also use RGB or RGBA, but the last one is not supported on legacy browsers and it should fallback to RGB.
Some properties like borderColor and its variations or outlineColor won't have any visible effect if no border or outline style is applied to your target element.
This component is bundled with the standard kute.js distribution file and the demo/src/kute-extra.js file.