Rectangle {
    id: colorTemperature
    width: 100; height: 140
    radius: 12
    property int tempMin: -20
    property int tempMax: 40
    property int temperatureInt: {
        return max(tempMin, min(tempMax, parseInt(temperatureHighLabel.text)));
    }
    property real scale: 0.9
    anchors.centerIn: temperatureHighLabel
    color: Qt.hsla((scale * (tempMax - temperatureInt)) / (tempMax - tempMin),
                   1,  // full saturation, feel free to experiment
                   1,  // full lightness, feel free to experiment
                   1); // no transparency, feel free to experiment
}

Rectangle {
        id: teste
        width: 15*mm
        height: 15*mm
        x: 50*mm
        y: 50*mm
        color: getTemperature()
        MouseArea {
            anchors.fill: parent
            onClicked: Math.random()
        }
    }

    ListModel {
          id: colorTemperature
    }

    property real currentTemperature: 16
    property real minTemperature: -20
    property real maxTemperature: 40

    function getTemperature() {
        setArrayOfTEmperatures()
        //normalized temperature [0-1]
        var normalized01Temperature = normalizeTemp(currentTemperature, minTemperature, maxTemperature)
        
        //normalize temperature to [0 - number of temperatures in listmodel]
        var colorT = normalized01Temperature * colorTemperature.count
        var index = Math.floor(colorT) // get the index of listmodel
        return colorTemperature.get(index).cTemp;
    }

    function normalizeTemp(temp, minTemp, maxTemp) {
        return (temp-minTemp)/(maxTemp-minTemp);
    }

    function setArrayOfTEmperatures() {
        colorTemperature.clear()
        colorTemperature.append({"cTemp": "red"})
        colorTemperature.append({"cTemp": "#f7c200"})
        colorTemperature.append({"cTemp": "blue"})
        colorTemperature.append({"cTemp": "yellow"})
        ...........
    }