## 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.