Set color interactively with hsla(hue, saturation, lightness, alpha)

The example set background color interactively with hsla(hue, saturation, lightness, alpha).

qml example: hsla(hue, saturation, lightness, alpha)

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360
    Text {
        anchors.centerIn: parent
        text: "Hello World"
    }

    /*
        hsla ( real hue, real saturation, real lightness, real alpha )
        Returns a color with the specified hue, saturation, lightness
        and alpha components. All components should be in the range 0-1
        inclusive.
    */
    color: Qt.hsla(
               mySliderHandleHue.x/(mySliderHandleHue.parent.width - 30),
               mySliderHandleSaturation.x/(mySliderHandleSaturation.parent.width - 30),
               mySliderHandleLightness.x/(mySliderHandleLightness.parent.width - 30),
               1)

    Rectangle {
        id: mySliderLightness

        anchors {
            left: parent.left
            right: parent.right
            bottom: parent.bottom
            leftMargin: 20
            rightMargin: 20
            bottomMargin: 10
        }

        height: 20
        radius: 10
        smooth: true
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 1.0; color: "gray" }
        }

        Rectangle {
            id: mySliderHandleLightness
            x: 1; y: 1; width: 30; height: 20
            radius: 10
            smooth: true
            color: Qt.hsla(0, 0, 1, 1)

            MouseArea {
                anchors.fill: parent
                drag.target: parent
                drag.axis: Drag.XAxis
                drag.minimumX: 0
                drag.maximumX: parent.parent.width - 30
            }
        }
    }

    Rectangle {
        id: mySliderSaturation

        anchors {
            left: parent.left
            right: parent.right
            bottom: mySliderLightness.top
            leftMargin: 20
            rightMargin: 20
            bottomMargin: 10
        }

        height: 20
        radius: 10
        smooth: true
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 1.0; color: "gray" }
        }

        Rectangle {
            id: mySliderHandleSaturation
            x: 1; y: 1; width: 30; height: 20
            radius: 10
            smooth: true
            color: Qt.hsla(0, 1, 0, 1)

            MouseArea {
                anchors.fill: parent
                drag.target: parent
                drag.axis: Drag.XAxis
                drag.minimumX: 0
                drag.maximumX: parent.parent.width - 30
            }
        }
    }

    Rectangle {
        id: mySliderHue

        anchors {
            left: parent.left
            right: parent.right
            bottom: mySliderSaturation.top
            leftMargin: 20
            rightMargin: 20
            bottomMargin: 10
        }

        height: 20
        radius: 10
        smooth: true
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 1.0; color: "gray" }
        }

        Rectangle {
            id: mySliderHandleHue
            x: 1; y: 1; width: 30; height: 20
            radius: 10
            smooth: true
            color: Qt.hsla(1, 0, 0, 1)

            MouseArea {
                anchors.fill: parent
                drag.target: parent
                drag.axis: Drag.XAxis
                drag.minimumX: 0
                drag.maximumX: parent.parent.width - 30
            }
        }
    }
}