This means that the animation ends up as a rainbow flash of "inbetween hues" rather than a kind of "blend transition" of the two hues that would happen if you were animating by colour.

The reason for using a HSL filter as opposed to another kind of colourising approach is that it is the only one that keeps the relative hues / saturations separate and is not a "blanked overlay".

For anyone wishing to try this out:

@import QtQuick 2.0
import QtGraphicalEffects 1.0
Row {
Rectangle {
id: color_animation
width: 266
height: 266
color: "#00adee"

    Behavior on color {
//    ColorAnimation on color {
        ColorAnimation {
            duration: 360
            easing.type: Easing.Linear
        }
    }

}
Item {
    width: 266
    height: 266
    HueSaturation {
        id: filter
        width: 266
        height: 266
        source: filter_rect
        hue: -0.35933147632311977715877437325905

        Behavior on hue {
            NumberAnimation {
                duration: 360
                easing.type: Easing.Linear
            }
        }
    }
    Image {
        id: filter_rect
        width: 266
        height: 266
        source:"images/pink_rect.png"
        visible: false
    }
}
focus: true
Keys.onReturnPressed: {
    color_animation.color == "#00adee" ? color_animation.color = "#ed008a" : color_animation.color = "#00adee"
    filter.hue == 0 ? filter.hue = -0.35933147632311977715877437325905 : filter.hue = 0

}
}@

Where pink_rect.png is a single pixel image of colour #ed008a .

Thanks!