Skip to content

Qt Quick's color

Did you know that all propertys of color type in Qt Quick have attributes that can be accessed as any other object members (via dot or subscription)? I also didn't because the official documentation contains no information (yes, just nothing, zero info) about it.

But I was so kind to collect this here.

It means that you can do, for example, like this:

Item {
    property color color: '#8000ff'

    Component.onCompleted: {
        // Print the color's RGB values:
        console.log(
            'RGB:', color.r, color.g, color.b
        )  // ⇒ RGB: 0.5019607843137255 0 1

        // or print the same color as HSV:
        let {hsvHue: h, hsvSaturation: s, hsvValue: v} = color
        console.log(
            `hsv(${Math.floor(h * 360)}°, ${s * 100}%, ${v * 100}%)`
        )  // ⇒ hsv(270°, 100%, 100%)
    }
}

Properties

Category Properties (and aliases)
Common a, valid
RGB r, g, b
HSL hslHue, hslSaturation, hslLightness
HSV hsvHue, hsvSaturation, hsvValue

a

Type:norm

Returns the alpha channel of the color.

b

Type:norm

Returns the RGB blue channel of the color.

See also: g, r.

g

Type:norm

Returns the RGB green channel of the color.

See also: b, r.

hslHue

Type:norm
Alias:hsvHue

Returns the HSL or HSV hue of the color.

See also:

hslLightness

Type:norm

Returns the HSL lightness of the color.

See also: hslHue, hslSaturation.

r

Type:norm

Returns the RGB red channel of the color.

See also: b, g.

hslSaturation

Type:norm

Returns the HSL saturation of the color.

For HSV saturation, see hsvSaturation.

See also: hslHue, hslLightness.

hsvHue

Same as hslHue.

hsvSaturation

Type:norm

Returns the HSV saturation of the color.

For HSL saturation, see hslSaturation.

See also: hsvHue, hsvValue.

hsvValue

Type:norm

Returns the HSV value of the color.

See also: hsvHue, hsvSaturation.

valid

Type:boolean

Returns true if the color is valid and false otherwise. The only two ways of getting invalid colors in QML I found are:

  1. Passing an invalid (for example, default-constructed QColor from C++.
  2. Defining an uninitialized color property: 
    Item {
    property color myColor
    Component.onCompleted: {
        console.log(myColor.valid)  // ⇒ false
    }
}