The color type refers to an ARGB color value. It can be specified in a number of ways:

• By a SVG color name, such as "red", "green" or "lightsteelblue".
• By a hexadecimal triplet or quad in the form "#RRGGBB" and "#AARRGGBB" respectively. For example, the color red corresponds to a triplet of "#FF0000" and a slightly transparent blue to a quad of "#800000FF".
• Using the Qt.rgba()

Example:

Rectangle {
    color: "steelblue"
    width: 40; height: 40
}
Rectangle {
    color: "transparent"
    y: 40; width: 40; height: 40
}
Rectangle {
    color: "#FF0000"
    y: 80; width: 40; height: 40
}
Rectangle {
    color: "#800000FF"
    y: 120; width: 40; height: 40
}
Rectangle {
    color: "#00000000"    // ARGB fully transparent
    y: 160
    width: 40; height: 40
}

A color type has r, g, b and a properties that refer to the red, green, blue and alpha values of the color, respectively.

Text {
    color: "red"

    Component.onCompleted: {
        // prints "1 0 0 1"
        console.log(color.r, color.g, color.b, color.a)

        color.g = 0.5
    }
}

This basic type is provided by the QtQuick import.

SVG Color Reference

The following table lists the available SVG colors: