QML: Any way of using the standard integer RGB values?

Question

I'm using Qt 5.7 on Windows 10 and I'm relatively new to QML. I am currently adding some colors to my application and it struck me that there seems to be no way of using the plain integer RGB values (not hexadecimals) for colors. There are (as far as I know) three direct ways (without using the Qt C++ functions of QColor in combination with the QML code) of setting an item to a specific color:

• Qt.rgba(...) - there are two problems I'm having with this the first one being the usage of floating point numbers for the RGB values and the second one being the weird call - I find myself forgetting quite often that I have to put Qt. in front of the function and needless to say this is annoying (but this is just me :P):

  Rectangle {
    width: 100
    height: 100
    color: Qt.rgba(0.502, 0.502, 0.502, 1)
    border.width: 1
  }
  

• # - again I have two problems here the first one being that obvious inconsistency if we compare it to the Qt.rgba(...) function in terms of placement of the alpha value (here in front and not at the end like the last argument of the Qt.rgba(...)) and the second one being the usage of hexadecimals:

  Rectangle {
    width: 100
    height: 100
    color: "#FF808080"
    border.width: 1
  }
  

• color names - this is nice (perhaps) if English is your native language and you are familiar with the vast amount of color names available in Qt (which uses the SVG color naming):

  Rectangle {
    width: 100
    height: 100
    color: "grey"
    border.width: 1
  }
  

All three coloring conventions above represent the same color (RGB: 128, 128, 128). I really prefer using the normal integer values since I'm more familiar with those. Is it possible to use those without any extra effort in QML?

Answer 1

Instead of converting ints to floats, we can convert from ints to hexadecimal:

    function rgb(r, g, b, a) {
        return "#"
             + (a ? a.toString(16).padStart(2, "0") : "")
             + r.toString(16).padStart(2, "0")
             + g.toString(16).padStart(2, "0")
             + b.toString(16).padStart(2, "0");
    }

Here's a demonstration with Red, Green, Blue sliders:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Page {
    property var col: rgb(redSlider.value, greenSlider.value, blueSlider.value)

    ColumnLayout {
        Frame {
            Rectangle {
                implicitWidth: 200
                implicitHeight: 200
                color: col
                Frame {
                    anchors.centerIn: parent
                    background: Rectangle { }
                    Text {
                        text: col
                    }
                }
            }
        }

        SliderText {
            id: redSlider
            value: 176
        }

        SliderText {
            id: greenSlider
            value: 196
        }

        SliderText {
            id: blueSlider
            value: 222
        }
    }

    function rgb(r, g, b, a) {
        return "#"
             + (a ? a.toString(16).padStart(2, "0") : "")
             + r.toString(16).padStart(2, "0")
             + g.toString(16).padStart(2, "0")
             + b.toString(16).padStart(2, "0");
    }
}

//SliderText.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
RowLayout {
    property alias value: slider.value
    Slider {
        id: slider
        from: 0
        to: 255
        stepSize: 1
    }
    Text {
        text: slider.value
    }
    Text {
        text: slider.value.toString(16).padStart(2, "0")
    }
}

You can Try it Online!

Answer 2

No.

Building off what @Gwen said, you can define your own function that takes integers and does the conversion to floats, and then call that everywhere.