color QML Basic Type

an ARGB color value. 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(), Qt.hsla(), Qt.darker(), Qt.lighter() or Qt.tint() functions.

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
}

Additionally, 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"

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

To test color values for equality, use the Qt.colorEqual() function. This allows colors to be accurately compared whether they are in property form or in any of the acceptable string specification forms.

When integrating with C++, note that any QColor value passed into QML from C++ is automatically converted into a color value, and vice-versa.

This basic type is provided by the QtQuick import.

See also QML Basic Types.

© 2017 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.