Color value
Color values in the following formats can be parsed and used as values for animatable color properties.
Accepts
| Format | Syntax |
|---|---|
| HEX | '#F44' | '#FF4444' |
| HEXA | '#F443' | '#FF444433' |
| RGB | 'rgb(255, 168, 40)' |
| RGBA | 'rgba(255, 168, 40, .2)' |
| HSL | 'hsl(255, 168, 40)' |
| HSLA | 'hsla(255, 168, 40, .2)' |
| String name WAAPI | 'red' | 'aqua' |
Color value code example
import { animate } from 'animejs';
animate('.hex', {
background: '#FF4B4B',
});
animate('.rgb', {
background: 'rgb(255, 168, 40)',
});
animate('.hsl', {
background: 'hsl(44, 100%, 59%)',
});
animate('.hexa', {
background: '#FF4B4B33',
});
animate('.rgba', {
background: 'rgba(255, 168, 40, .2)',
});
animate('.hsla', {
background: 'hsla(44, 100%, 59%, .2)',
});<div class="large justified row">
<div class="circle hex"></div>
<div class="circle rgb"></div>
<div class="circle hsl"></div>
<div class="circle hexa"></div>
<div class="circle rgba"></div>
<div class="circle hsla"></div>
</div>