tint.qml

tint.qml:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12

Window {
    visible: true

    minimumWidth: topLayout.implicitWidth
    minimumHeight: topLayout.implicitHeight

    color: "white"

    ColumnLayout {
        id: topLayout

        anchors.fill: parent

        spacing: 14

        Item { height: 8 }

        RowLayout {
            Layout.leftMargin: 20
            Layout.rightMargin: 20

            spacing: 20

            ColorSampler {
                id: baseColor

                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignCenter

                name: "base"
                color: "#f0ffff00"
            }

            ColorSampler {
                id: tintColor

                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignCenter

                name: "tint"
                color: Qt.rgba(0.5, 1.0, 1.0, tintAlphaSlider.value)
            }

            ColorSampler {
                id: resultColor

                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignCenter

                name: "result"
                color: Qt.tint(baseColor.color, tintColor.color)
            }
        }

        Slider {
            id: tintAlphaSlider

            Layout.fillWidth: true
            Layout.leftMargin: 40
            Layout.rightMargin: 40

            value: 0.4
        }

        Item { height: 8 }
    }
}

ColorSampler.qml:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12
import "utils.js" as Utils

Item {
    id: root

    property string name
    property alias color: colorRect.color

    implicitWidth: 100
    implicitHeight: 100

    Rectangle {
        id: colorRect

        anchors.fill: parent

        border.color: "darkgrey"
        radius: 4

        Text {
            anchors.verticalCenter: parent.verticalCenter

            leftPadding: 14
            text: `${name}: \n${Utils.colorName(parent.color)}`
        }
    }
}

スライダーでアルファ値を変化させると色合いがどのように付くかがわかる。

tint.qml の実行結果

参照コード

utils.js