QQuickColorDialog: Implement ColorInputs in C++

The previous version of the ColorInputs.qml contained a good number of
signal handlers that executed js code.
We prefer to write business logic in C++ since it's faster, and we have
more control. Which is the main focus of this patch.

Additionally, it works around an issue where the binding on the
visibility property for the alpha text fields would cause them to be
omitted from the RowLayout's implicitWidth calculation, that would then be
used by the StackLayout to calculate its own implicitWidth in a
bottom-up direction. This made the size of the dialog become larger when
a different selection was chosen in the combobox, and had a negative
impact on the user experience. (The initial selection is the hexcode
text field, which isn't inside a RowLayout, like the other children of
the StackLayout).

The only workaround that I managed to find, was to call setVisibility
form C++, which is why this patch serves a dual purpose.

Some other minor QoL changes are also included. (Like the footer having
a separator for eating left over space).

The most significalt part, user experience wise, is that the ColorInputs
component will now have a "minimum" width, which will impact the size of
the rest of the dialog.
The reason I did it like that, was because I wanted all of the text
fields to be able to fit 4 characters inside of them, without causing
any scrolling/eliding/clipping. The text fields would simply be too
small to fix 4 characters for some of the styles. This means that this
patch affects the size of the dialog for some styles.

Fixes: QTBUG-103900
Change-Id: Ic88156c0ab1e692ee38eda29d103c9d2adea7b47
Reviewed-by: Qt CI Bot <qt_ci_bot@qt-project.org>
Reviewed-by: Volker Hilsheimer <volker.hilsheimer@qt.io>
(cherry picked from commit 261f527b5a5be24a38c5cb60aa0fcaf76633392d)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

17 files changed, 1055 insertions, 446 deletions

diff --git a/src/quickdialogs2/quickdialogs2quickimpl/CMakeLists.txt b/src/quickdialogs2/quickdialogs2quickimpl/CMakeLists.txt
index abbee6dfd2..f0531c1d5c 100644
--- a/src/quickdialogs2/quickdialogs2quickimpl/CMakeLists.txt
+++ b/src/quickdialogs2/quickdialogs2quickimpl/CMakeLists.txt
@@ -67,6 +67,10 @@ qt_internal_add_qml_module(QuickDialogs2QuickImpl
         qquickcolordialogimpl.cpp
         qquickcolordialogimpl_p.h
         qquickcolordialogimpl_p_p.h
+        qquickcolordialogutils_p.h
+        qquickcolordialogutils.cpp
+        qquickcolorinputs.cpp
+        qquickcolorinputs_p.h
         qquickdialogimplfactory.cpp
         qquickdialogimplfactory_p.h
         qquickfiledialogdelegate.cpp
diff --git a/src/quickdialogs2/quickdialogs2quickimpl/qml/+Fusion/ColorDialog.qml b/src/quickdialogs2/quickdialogs2quickimpl/qml/+Fusion/ColorDialog.qml
index 441e032fa4..3ad3c80369 100644
--- a/src/quickdialogs2/quickdialogs2quickimpl/qml/+Fusion/ColorDialog.qml
+++ b/src/quickdialogs2/quickdialogs2quickimpl/qml/+Fusion/ColorDialog.qml
@@ -33,6 +33,7 @@ ColorDialogImpl {
     ColorDialogImpl.eyeDropperButton: eyeDropperButton
     ColorDialogImpl.buttonBox: buttonBox
     ColorDialogImpl.colorPicker: colorPicker
+    ColorDialogImpl.colorInputs: inputs
     ColorDialogImpl.alphaSlider: alphaSlider
 
     background: Rectangle {
@@ -132,7 +133,6 @@ ColorDialogImpl {
         Slider {
             id: alphaSlider
             objectName: "alphaSlider"
-            visible: control.showAlpha
             orientation: Qt.Horizontal
             value: control.alpha
             implicitHeight: 20
@@ -187,28 +187,8 @@ ColorDialogImpl {
         ColorInputs {
             id: inputs
 
-            spacing: 12
-            currentColor: control.color
-            red: control.red
-            green: control.green
-            blue: control.blue
-            hue: control.hue
-            saturation: control.saturation
-            value: control.value
-            lightness: control.lightness
-            alpha: control.alpha
-            showAlpha: control.showAlpha
-            onEmitHex: function (hex) { control.color = hex; }
-            onEmitRed: function (r) { control.red = r; }
-            onEmitGreen: function (g) { control.green = g; }
-            onEmitBlue: function (b) { control.blue = b; }
-            onEmitHue: function (h) { control.hue = h; }
-            onEmitSaturation: function (s) { control.saturation = s; }
-            onEmitValue: function(v) { control.value = v; }
-            onEmitLightness: function (l) { control.lightness = l; }
-            onEmitAlpha: function (a) { control.alpha = a; }
+            color: control.color
 
-            Layout.fillWidth: true
             Layout.leftMargin: 12
             Layout.rightMargin: 12
             Layout.bottomMargin: 12
@@ -246,6 +226,12 @@ ColorDialogImpl {
             Layout.bottomMargin: 6
         }
 
+        Item {
+            Layout.fillWidth: true
+            Layout.topMargin: 6
+            Layout.bottomMargin: 6
+        }
+
         DialogButtonBox {
             id: buttonBox
             standardButtons: control.standardButtons
diff --git a/src/quickdialogs2/quickdialogs2quickimpl/qml/+Imagine/ColorDialog.qml b/src/quickdialogs2/quickdialogs2quickimpl/qml/+Imagine/ColorDialog.qml
index b4713cbb76..f0150c8fdd 100644
--- a/src/quickdialogs2/quickdialogs2quickimpl/qml/+Imagine/ColorDialog.qml
+++ b/src/quickdialogs2/quickdialogs2quickimpl/qml/+Imagine/ColorDialog.qml
@@ -43,6 +43,7 @@ ColorDialogImpl {
     ColorDialogImpl.buttonBox: buttonBox
     ColorDialogImpl.colorPicker: colorPicker
     ColorDialogImpl.alphaSlider: alphaSlider
+    ColorDialogImpl.colorInputs: inputs
 
     background: NinePatchImage {
         source: Imagine.url + "dialog-background"
@@ -136,7 +137,6 @@ ColorDialogImpl {
         Slider {
             id: alphaSlider
             objectName: "alphaSlider"
-            visible: control.showAlpha
             orientation: Qt.Horizontal
             value: control.alpha
             implicitHeight: 20
@@ -194,28 +194,8 @@ ColorDialogImpl {
         ColorInputs {
             id: inputs
 
-            spacing: 20
-            currentColor: control.color
-            red: control.red
-            green: control.green
-            blue: control.blue
-            hue: control.hue
-            saturation: control.saturation
-            value: control.value
-            lightness: control.lightness
-            alpha: control.alpha
-            showAlpha: control.showAlpha
-            onEmitHex: function (hex) { control.color = hex; }
-            onEmitRed: function (r) { control.red = r; }
-            onEmitGreen: function (g) { control.green = g; }
-            onEmitBlue: function (b) { control.blue = b; }
-            onEmitHue: function (h) { control.hue = h; }
-            onEmitSaturation: function (s) { control.saturation = s; }
-            onEmitValue: function(v) { control.value = v; }
-            onEmitLightness: function (l) { control.lightness = l; }
-            onEmitAlpha: function (a) { control.alpha = a; }
+            color: control.color
 
-            Layout.fillWidth: true
             Layout.leftMargin: 16
             Layout.rightMargin: 16
             Layout.bottomMargin: 16
@@ -255,6 +235,11 @@ ColorDialogImpl {
             Layout.bottomMargin: 16
         }
 
+        Item {
+            // empty filler
+            Layout.fillWidth: true
+        }
+
         DialogButtonBox {
             id: buttonBox
             standardButtons: control.standardButtons
diff --git a/src/quickdialogs2/quickdialogs2quickimpl/qml/+Material/ColorDialog.qml b/src/quickdialogs2/quickdialogs2quickimpl/qml/+Material/ColorDialog.qml
index 718f5e6730..9f07f9fd3e 100644
--- a/src/quickdialogs2/quickdialogs2quickimpl/qml/+Material/ColorDialog.qml
+++ b/src/quickdialogs2/quickdialogs2quickimpl/qml/+Material/ColorDialog.qml
@@ -33,6 +33,7 @@ ColorDialogImpl {
     ColorDialogImpl.buttonBox: buttonBox
     ColorDialogImpl.colorPicker: colorPicker
     ColorDialogImpl.alphaSlider: alphaSlider
+    ColorDialogImpl.colorInputs: inputs
 
     Material.elevation: 24
 
@@ -127,7 +128,6 @@ ColorDialogImpl {
         Slider {
             id: alphaSlider
             objectName: "alphaSlider"
-            visible: control.showAlpha
             orientation: Qt.Horizontal
             value: control.alpha
             implicitHeight: 20
@@ -185,28 +185,8 @@ ColorDialogImpl {
         ColorInputs {
             id: inputs
 
-            spacing: 12
-            currentColor: control.color
-            red: control.red
-            green: control.green
-            blue: control.blue
-            hue: control.hue
-            saturation: control.saturation
-            value: control.value
-            lightness: control.lightness
-            alpha: control.alpha
-            showAlpha: control.showAlpha
-            onEmitHex: function (hex) { control.color = hex; }
-            onEmitRed: function (r) { control.red = r; }
-            onEmitGreen: function (g) { control.green = g; }
-            onEmitBlue: function (b) { control.blue = b; }
-            onEmitHue: function (h) { control.hue = h; }
-            onEmitSaturation: function (s) { control.saturation = s; }
-            onEmitValue: function(v) { control.value = v; }
-            onEmitLightness: function (l) { control.lightness = l; }
-            onEmitAlpha: function (a) { control.alpha = a; }
+            color: control.color
 
-            Layout.fillWidth: true
             Layout.leftMargin: 12
             Layout.rightMargin: 12
             Layout.bottomMargin: 12
@@ -243,6 +223,10 @@ ColorDialogImpl {
             }
         }
 
+        Item {
+            Layout.fillWidth: true
+        }
+
         DialogButtonBox {
             id: buttonBox
             standardButtons: control.standardButtons
diff --git a/src/quickdialogs2/quickdialogs2quickimpl/qml/+Universal/ColorDialog.qml b/src/quickdialogs2/quickdialogs2quickimpl/qml/+Universal/ColorDialog.qml
index 932c0baadc..f3ef9fe2e5 100644
--- a/src/quickdialogs2/quickdialogs2quickimpl/qml/+Universal/ColorDialog.qml
+++ b/src/quickdialogs2/quickdialogs2quickimpl/qml/+Universal/ColorDialog.qml
@@ -33,6 +33,7 @@ ColorDialogImpl {
     ColorDialogImpl.buttonBox: buttonBox
     ColorDialogImpl.colorPicker: colorPicker
     ColorDialogImpl.alphaSlider: alphaSlider
+    ColorDialogImpl.colorInputs: inputs
 
     background: Rectangle {
         implicitWidth: 200
@@ -130,7 +131,6 @@ ColorDialogImpl {
         Slider {
             id: alphaSlider
             objectName: "alphaSlider"
-            visible: control.showAlpha
             orientation: Qt.Horizontal
             value: control.alpha
             implicitHeight: 20
@@ -188,28 +188,8 @@ ColorDialogImpl {
         ColorInputs {
             id: inputs
 
-            spacing: 12
-            currentColor: control.color
-            red: control.red
-            green: control.green
-            blue: control.blue
-            hue: control.hue
-            saturation: control.saturation
-            value: control.value
-            lightness: control.lightness
-            alpha: control.alpha
-            showAlpha: control.showAlpha
-            onEmitHex: function (hex) { control.color = hex; }
-            onEmitRed: function (r) { control.red = r; }
-            onEmitGreen: function (g) { control.green = g; }
-            onEmitBlue: function (b) { control.blue = b; }
-            onEmitHue: function (h) { control.hue = h; }
-            onEmitSaturation: function (s) { control.saturation = s; }
-            onEmitValue: function(v) { control.value = v; }
-            onEmitLightness: function (l) { control.lightness = l; }
-            onEmitAlpha: function (a) { control.alpha = a; }
+            color: control.color
 
-            Layout.fillWidth: true
             Layout.leftMargin: 12
             Layout.rightMargin: 12
             Layout.bottomMargin: 12
@@ -251,6 +231,10 @@ ColorDialogImpl {
             Layout.bottomMargin: 24
         }
 
+        Item {
+            Layout.fillWidth: true
+        }
+
         DialogButtonBox {
             id: buttonBox
             standardButtons: control.standardButtons
diff --git a/src/quickdialogs2/quickdialogs2quickimpl/qml/ColorDialog.qml b/src/quickdialogs2/quickdialogs2quickimpl/qml/ColorDialog.qml
index 24b75b0add..c8395bacd0 100644
--- a/src/quickdialogs2/quickdialogs2quickimpl/qml/ColorDialog.qml
+++ b/src/quickdialogs2/quickdialogs2quickimpl/qml/ColorDialog.qml
@@ -37,6 +37,7 @@ ColorDialogImpl {
     ColorDialogImpl.eyeDropperButton: eyeDropperButton
     ColorDialogImpl.buttonBox: buttonBox
     ColorDialogImpl.colorPicker: colorPicker
+    ColorDialogImpl.colorInputs: inputs
     ColorDialogImpl.alphaSlider: alphaSlider
 
     background: Rectangle {
@@ -128,7 +129,6 @@ ColorDialogImpl {
         Slider {
             id: alphaSlider
             objectName: "alphaSlider"
-            visible: control.showAlpha
             orientation: Qt.Horizontal
             value: control.alpha
             implicitHeight: 20
@@ -186,26 +186,7 @@ ColorDialogImpl {
         ColorInputs {
             id: inputs
 
-            spacing: 12
-            currentColor: control.color
-            red: control.red
-            green: control.green
-            blue: control.blue
-            hue: control.hue
-            saturation: control.saturation
-            value: control.value
-            lightness: control.lightness
-            alpha: control.alpha
-            showAlpha: control.showAlpha
-            onEmitHex: function (hex) { control.color = hex; }
-            onEmitRed: function (r) { control.red = r; }
-            onEmitGreen: function (g) { control.green = g; }
-            onEmitBlue: function (b) { control.blue = b; }
-            onEmitHue: function (h) { control.hue = h; }
-            onEmitSaturation: function (s) { control.saturation = s; }
-            onEmitValue: function(v) { control.value = v; }
-            onEmitLightness: function (l) { control.lightness = l; }
-            onEmitAlpha: function (a) { control.alpha = a; }
+            color: control.color
 
             Layout.fillWidth: true
             Layout.leftMargin: 12
@@ -252,6 +233,11 @@ ColorDialogImpl {
                 }
             }
 
+            Item {
+                // empty space filler
+                Layout.fillWidth: true
+            }
+
             DialogButtonBox {
                 id: buttonBox
                 standardButtons: control.standardButtons
diff --git a/src/quickdialogs2/quickdialogs2quickimpl/qml/ColorInputs.qml b/src/quickdialogs2/quickdialogs2quickimpl/qml/ColorInputs.qml
index 1fc4d90e2d..42086629ff 100644
--- a/src/quickdialogs2/quickdialogs2quickimpl/qml/ColorInputs.qml
+++ b/src/quickdialogs2/quickdialogs2quickimpl/qml/ColorInputs.qml
@@ -4,269 +4,221 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import QtQuick.Dialogs.quickimpl
 
-RowLayout {
+ColorInputsImpl {
     id: root
-    required property color currentColor
-    required property real red
-    required property real green
-    required property real blue
-    required property real hue
-    required property real saturation
-    required property real value
-    required property real lightness
-    required property real alpha
-    property bool showAlpha
-    property alias currentIndex: colorSystemComboBox.currentIndex
-    signal emitHex(string hex)
-    signal emitRed(int r)
-    signal emitGreen(int g)
-    signal emitBlue(int b)
-    signal emitHue(real h)
-    signal emitSaturation(real s)
-    signal emitValue(real v)
-    signal emitLightness(real l)
-    signal emitAlpha(real a)
 
-    ComboBox {
-        id: colorSystemComboBox
-        objectName: "colorSystemComboBox"
-        editable: false
-        flat: true
-        background.implicitWidth: 0
-        implicitContentWidthPolicy: ComboBox.WidestText
-        model: ListModel {
-            ListElement {
-                name: qsTr("Hex")
-            }
-            ListElement {
-                name: qsTr("RGB")
-            }
-            ListElement {
-                name: qsTr("HSV")
-            }
-            ListElement {
-                name: qsTr("HSL")
-            }
-        }
+    hexInput: hex
+    redInput: rgbRed
+    greenInput: rgbGreen
+    blueInput: rgbBlue
+    rgbAlphaInput: rgbAlpha
+    hsvHueInput: hsvHue
+    hsvSaturationInput: hsvSaturation
+    valueInput: hsvValue
+    hsvAlphaInput: hsvAlpha
+    hslHueInput: hslHue
+    hslSaturationInput: hslSaturation
+    lightnessInput: hslLightness
+    hslAlphaInput: hslAlpha
+
+    implicitWidth: content.implicitWidth
+    implicitHeight: content.implicitHeight
+
+    TextMetrics {
+        id: fourM
+        text: "MMMM"
+        font: colorSystemComboBox.font
     }
-    StackLayout {
-        objectName: "colorParameters"
-        currentIndex: colorSystemComboBox.currentIndex
-
-        Layout.fillWidth: true
-        Layout.fillHeight: false
 
-        TextField {
-            horizontalAlignment: Qt.AlignHCenter
-            text: root.currentColor
-            selectByMouse: true
-            maximumLength: 9
-            validator: RegularExpressionValidator {
-                regularExpression: /^#[0-9A-f]{6}(?:[0-9A-f]{2})?$/
-            }
-            onEditingFinished: function() {
-                root.emitHex(text)
-            }
-        }
+    RowLayout {
+        id: content
+        anchors.fill: parent
+        spacing: 12
 
-        RowLayout {
-            Layout.fillWidth: true
-
-            TextField {
-                horizontalAlignment: Qt.AlignHCenter
-                text: root.red
-                maximumLength: 3
-                validator: IntValidator {
-                    bottom: 0
-                    top: 999
+        ComboBox {
+            id: colorSystemComboBox
+            objectName: "colorSystemComboBox"
+            editable: false
+            flat: true
+            background.implicitWidth: 0
+            implicitContentWidthPolicy: ComboBox.WidestTextWhenCompleted
+            implicitWidth: implicitContentWidth + leftPadding + rightPadding // Workaround QTBUG-106098
+            model: ListModel {
+                ListElement {
+                    name: qsTr("Hex")
                 }
-
-                Layout.preferredWidth: 1
-                Layout.fillWidth: true
-
-                onEditingFinished: function() {
-                    root.emitRed(Math.max(Math.min(parseInt(text), 255), 0))
+                ListElement {
+                    name: qsTr("RGB")
                 }
-            }
-            TextField {
-                horizontalAlignment: Qt.AlignHCenter
-                text: root.green
-                maximumLength: 3
-                validator: IntValidator {
-                    bottom: 0
-                    top: 999
+                ListElement {
+                    name: qsTr("HSV")
                 }
-
-                Layout.preferredWidth: 1
-                Layout.fillWidth: true
-
-                onEditingFinished: function() {
-                    root.emitGreen(Math.max(Math.min(parseInt(text), 255), 0))
-                }
-            }
-            TextField {
-                horizontalAlignment: Qt.AlignHCenter
-                text: root.blue
-                maximumLength: 3
-                validator: IntValidator {
-                    bottom: 0
-                    top: 999
-                }
-
-                Layout.preferredWidth: 1
-                Layout.fillWidth: true
-
-                onEditingFinished: function() {
-                    root.emitBlue(Math.max(Math.min(parseInt(text), 255), 0))
-                }
-            }
-            TextField {
-                visible: root.showAlpha
-                horizontalAlignment: Qt.AlignHCenter
-                text: Math.round(root.alpha * 100).toString() + "%"
-                maximumLength: 4
-                validator: RegularExpressionValidator {
-                    regularExpression: /^[0-9]{0,3}%?$/
-                }
-
-                Layout.preferredWidth: 1
-                Layout.fillWidth: true
-
-                onEditingFinished: function() {
-                    root.emitAlpha(Math.max(Math.min(text.match(/^(\d+)%?$/)[1], 100), 0) / 100.0)
+                ListElement {
+                    name: qsTr("HSL")
                 }
             }
         }
 
-        RowLayout {
-            Layout.fillWidth: true
-
-            TextField {
-                horizontalAlignment: Qt.AlignHCenter
-                text: Math.round(root.hue === -1.0 ? 0 : control.hue * 360).toString() + "°"
-                maximumLength: 4
-                validator: RegularExpressionValidator {
-                    regularExpression: /^[0-9]{0,3}°?$/
-                }
-
-                Layout.preferredWidth: 1
-                Layout.fillWidth: true
-
-                onEditingFinished: function() {
-                    root.emitHue(Math.max(Math.min(text.match(/^(\d+)°?$/)[1], 360), 0) / 360.0)
-                }
-            }
-            TextField {
-                horizontalAlignment: Qt.AlignHCenter
-                text: Math.round(root.saturation * 100).toString() + "%"
-                maximumLength: 4
-                validator: RegularExpressionValidator {
-                    regularExpression: /^[0-9]{0,3}%?$/
-                }
-
-                Layout.preferredWidth: 1
-                Layout.fillWidth: true
-
-                onEditingFinished: function() {
-                    root.emitSaturation(Math.max(Math.min(text.match(/^(\d+)%?$/)[1], 100), 0) / 100.0)
-                }
-            }
-            TextField {
-                horizontalAlignment: Qt.AlignHCenter
-                text: Math.round(root.value * 100).toString() + "%"
-                maximumLength: 4
-                validator: RegularExpressionValidator {
-                    regularExpression: /^[0-9]{0,3}%?$/
-                }
-
-                Layout.preferredWidth: 1
-                Layout.fillWidth: true
-
-                onEditingFinished: function() {
-                    root.emitValue(Math.max(Math.min(text.match(/^(\d+)%?$/)[1], 100), 0) / 100.0)
-                }
-            }
-            TextField {
-                visible: root.showAlpha
-                horizontalAlignment: Qt.AlignHCenter
-                text: Math.round(root.alpha * 100).toString() + "%"
-                maximumLength: 4
-                validator: RegularExpressionValidator {
-                    regularExpression: /^[0-9]{0,3}%?$/
-                }
-
-                Layout.preferredWidth: 1
-                Layout.fillWidth: true
-
-                onEditingFinished: function() {
-                    root.emitAlpha(Math.max(Math.min(text.match(/^(\d+)%?$/)[1], 100), 0) / 100.0)
-                }
-            }
-        }
+        StackLayout {
+            objectName: "colorParameters"
+            currentIndex: colorSystemComboBox.currentIndex
 
-        RowLayout {
             Layout.fillWidth: true
 
             TextField {
-                horizontalAlignment: Qt.AlignHCenter
-                text: Math.round(root.hue === -1.0 ? 0 : control.hue * 360).toString() + "°"
-                maximumLength: 4
+                id: hex
+                horizontalAlignment: Qt.AlignLeft
+                text: root.color
+                maximumLength: 9
                 validator: RegularExpressionValidator {
-                    regularExpression: /^[0-9]{0,3}°?$/
+                    regularExpression: root.showAlpha ? /^#[0-9A-f]{6}(?:[0-9A-f]{2})?$/ : /^#[0-9A-f]{6}$/
                 }
-
-                Layout.preferredWidth: 1
                 Layout.fillWidth: true
-
-                onEditingFinished: function() {
-                    root.emitHue(Math.max(Math.min(text.match(/^(\d+)°?$/)[1], 360), 0) / 360.0)
-                }
-            }
-            TextField {
-                horizontalAlignment: Qt.AlignHCenter
-                text: Math.round(root.saturation * 100).toString() + "%"
-                maximumLength: 4
-                validator: RegularExpressionValidator {
-                    regularExpression: /^[0-9]{0,3}%?$/
-                }
-
-                Layout.preferredWidth: 1
-                Layout.fillWidth: true
-
-                onEditingFinished: function() {
-                    root.emitSaturation(Math.max(Math.min(text.match(/^(\d+)%?$/)[1], 100), 0) / 100.0)
-                }
             }
-            TextField {
-                horizontalAlignment: Qt.AlignHCenter
-                text: Math.round(root.lightness * 100).toString() + "%"
-                maximumLength: 4
-                validator: RegularExpressionValidator {
-                    regularExpression: /^[0-9]{0,3}%?$/
-                }
-
-                Layout.preferredWidth: 1
-                Layout.fillWidth: true
-
-                onEditingFinished: function() {
-                    root.emitLightness(Math.max(Math.min(text.match(/^(\d+)%?$/)[1], 100), 0) / 100.0)
-                }
-            }
-            TextField {
-                visible: root.showAlpha
-                horizontalAlignment: Qt.AlignHCenter
-                text: Math.round(root.alpha * 100).toString() + "%"
-                maximumLength: 4
-                validator: RegularExpressionValidator {
-                    regularExpression: /^[0-9]{0,3}%?$/
-                }
-
-                Layout.preferredWidth: 1
-                Layout.fillWidth: true
 
-                onEditingFinished: function() {
-                    root.emitAlpha(Math.max(Math.min(text.match(/^(\d+)%?$/)[1], 100), 0) / 100.0)
+            RowLayout {
+                TextField {
+                    id: rgbRed
+                    horizontalAlignment: Qt.AlignHCenter
+                    text: root.red
+                    maximumLength: 3
+                    validator: IntValidator {
+                        bottom: 0
+                        top: 999
+                    }
+                    implicitWidth: fourM.width + leftPadding + rightPadding
+                    Layout.fillWidth: true
+                }
+                TextField {
+                    id: rgbGreen
+                    horizontalAlignment: Qt.AlignHCenter
+                    text: root.green
+                    maximumLength: 3
+                    validator: IntValidator {
+                        bottom: 0
+                        top: 999
+                    }
+                    implicitWidth: fourM.width + leftPadding + rightPadding
+                    Layout.fillWidth: true
+                }
+                TextField {
+                    id: rgbBlue
+                    horizontalAlignment: Qt.AlignHCenter
+                    text: root.blue
+                    maximumLength: 3
+                    validator: IntValidator {
+                        bottom: 0
+                        top: 999
+                    }
+                    implicitWidth: fourM.width + leftPadding + rightPadding
+                    Layout.fillWidth: true
+                }
+                TextField {
+                    id: rgbAlpha
+                    horizontalAlignment: Qt.AlignHCenter
+                    text: Math.round(root.alpha * 100).toString() + "%"
+                    maximumLength: 4
+                    validator: RegularExpressionValidator {
+                        regularExpression: /^[0-9]{0,3}%?$/
+                    }
+                    implicitWidth: fourM.width + leftPadding + rightPadding
+                    Layout.fillWidth: true
+                }
+            }
+
+            RowLayout {
+                TextField {
+                    id: hsvHue
+                    horizontalAlignment: Qt.AlignHCenter
+                    text: Math.round(root.hue * 360).toString() + "°"
+                    maximumLength: 4
+                    validator: RegularExpressionValidator {
+                        regularExpression: /^[0-9]{0,3}°?$/
+                    }
+                    implicitWidth: fourM.width + leftPadding + rightPadding
+                    Layout.fillWidth: true
+                }
+                TextField {
+                    id: hsvSaturation
+                    horizontalAlignment: Qt.AlignHCenter
+                    text: Math.round(root.hsvSaturation * 100).toString() + "%"
+                    maximumLength: 4
+                    validator: RegularExpressionValidator {
+                        regularExpression: /^[0-9]{0,3}%?$/
+                    }
+                    implicitWidth: fourM.width + leftPadding + rightPadding
+                    Layout.fillWidth: true
+                }
+                TextField {
+                    id: hsvValue
+                    horizontalAlignment: Qt.AlignHCenter
+                    text: Math.round(root.value * 100).toString() + "%"
+                    maximumLength: 4
+                    validator: RegularExpressionValidator {
+                        regularExpression: /^[0-9]{0,3}%?$/
+                    }
+                    implicitWidth: fourM.width + leftPadding + rightPadding
+                    Layout.fillWidth: true
+                }
+                TextField {
+                    id: hsvAlpha
+                    horizontalAlignment: Qt.AlignHCenter
+                    text: Math.round(root.alpha * 100).toString() + "%"
+                    maximumLength: 4
+                    validator: RegularExpressionValidator {
+                        regularExpression: /^[0-9]{0,3}%?$/
+                    }
+                    implicitWidth: fourM.width + leftPadding + rightPadding
+                    Layout.fillWidth: true
+                }
+            }
+
+            RowLayout {
+                TextField {
+                    id: hslHue
+                    horizontalAlignment: Qt.AlignHCenter
+                    text: Math.round(root.hue * 360).toString() + "°"
+                    maximumLength: 4
+                    validator: RegularExpressionValidator {
+                        regularExpression: /^[0-9]{0,3}°?$/
+                    }
+                    implicitWidth: fourM.width + leftPadding + rightPadding
+                    Layout.fillWidth: true
+                }
+                TextField {
+                    id: hslSaturation
+                    horizontalAlignment: Qt.AlignHCenter
+                    text: Math.round(root.hslSaturation * 100).toString() + "%"
+                    maximumLength: 4
+                    validator: RegularExpressionValidator {
+                        regularExpression: /^[0-9]{0,3}%?$/
+                    }
+                    implicitWidth: fourM.width + leftPadding + rightPadding
+                    Layout.fillWidth: true
+                }
+                TextField {
+                    id: hslLightness
+                    horizontalAlignment: Qt.AlignHCenter
+                    text: Math.round(root.lightness * 100).toString() + "%"
+                    maximumLength: 4
+                    validator: RegularExpressionValidator {
+                        regularExpression: /^[0-9]{0,3}%?$/
+                    }
+                    implicitWidth: fourM.width + leftPadding + rightPadding
+                    Layout.fillWidth: true
+                }
+                TextField {
+                    id: hslAlpha
+                    horizontalAlignment: Qt.AlignHCenter
+                    text: Math.round(root.alpha * 100).toString() + "%"
+                    maximumLength: 4
+                    validator: RegularExpressionValidator {
+                        regularExpression: /^[0-9]{0,3}%?$/
+                    }
+                    implicitWidth: fourM.width + leftPadding + rightPadding
+                    Layout.fillWidth: true
                 }
             }
         }
diff --git a/src/quickdialogs2/quickdialogs2quickimpl/qquickabstractcolorpicker.cpp b/src/quickdialogs2/quickdialogs2quickimpl/qquickabstractcolorpicker.cpp
index 96742b9ce8..4606c00502 100644
--- a/src/quickdialogs2/quickdialogs2quickimpl/qquickabstractcolorpicker.cpp
+++ b/src/quickdialogs2/quickdialogs2quickimpl/qquickabstractcolorpicker.cpp
@@ -3,16 +3,15 @@
 
 #include "qquickabstractcolorpicker_p_p.h"
 
+#include "qquickcolordialogutils_p.h"
+
 #include <QtQuickTemplates2/private/qquickcontrol_p_p.h>
 #include <QtQuickTemplates2/private/qquickdeferredexecute_p_p.h>
 
 #include <qpa/qplatformintegration.h>
 #include <private/qguiapplication_p.h>
 
-QQuickAbstractColorPickerPrivate::QQuickAbstractColorPickerPrivate()
-    : m_pressed(false), m_hsl(false)
-{
-}
+QQuickAbstractColorPickerPrivate::QQuickAbstractColorPickerPrivate() = default;
 
 static inline QString handleName()
 {
@@ -25,7 +24,6 @@ bool QQuickAbstractColorPickerPrivate::handlePress(const QPointF &point, ulong t
     QQuickControlPrivate::handlePress(point, timestamp);
     m_pressPoint = point;
     q->setPressed(true);
-
     q->updateColor(point);
     return true;
 }
@@ -111,6 +109,13 @@ QColor QQuickAbstractColorPicker::color() const
 void QQuickAbstractColorPicker::setColor(const QColor &c)
 {
     Q_D(QQuickAbstractColorPicker);
+    // QColor represents a theoretical color, rather than simply an rgba value.
+    // Therefore, two QColor objects can be different,
+    // and yet translate to the same rgba value.
+    // Since the color picker can reuse the same rgba value for multiple pixels,
+    // we should not return early if the rgba() values are equal,
+    // but only if the QColor objects are exactly the same.
+
     if (color() == c)
         return;
 
@@ -352,24 +357,3 @@ void QQuickAbstractColorPicker::updateColor(const QPointF &pos)
 
     emit colorPicked(c);
 }
-
-std::pair<qreal, qreal> QQuickAbstractColorPicker::getSaturationAndValue(qreal saturation,
-                                                                         qreal lightness)
-{
-    const qreal v = lightness + saturation * qMin(lightness, 1 - lightness);
-    if (v == .0)
-        return { .0, .0 };
-
-    const qreal s = 2 * (1 - lightness / v);
-    return { s, v };
-}
-std::pair<qreal, qreal> QQuickAbstractColorPicker::getSaturationAndLightness(qreal saturation,
-                                                                             qreal value)
-{
-    const qreal l = value * (1 - saturation / 2);
-    if (l == .0)
-        return { .0, .0 };
-
-    const qreal s = (value - l) / qMin(l, 1 - l);
-    return { s, l };
-}
diff --git a/src/quickdialogs2/quickdialogs2quickimpl/qquickabstractcolorpicker_p.h b/src/quickdialogs2/quickdialogs2quickimpl/qquickabstractcolorpicker_p.h
index 6138581d4e..b29e488b3a 100644
--- a/src/quickdialogs2/quickdialogs2quickimpl/qquickabstractcolorpicker_p.h
+++ b/src/quickdialogs2/quickdialogs2quickimpl/qquickabstractcolorpicker_p.h
@@ -87,8 +87,6 @@ protected:
 
 private:
     void updateColor(const QPointF &pos);
-    static std::pair<qreal, qreal> getSaturationAndValue(qreal saturation, qreal lightness);
-    static std::pair<qreal, qreal> getSaturationAndLightness(qreal saturation, qreal value);
     Q_DISABLE_COPY(QQuickAbstractColorPicker)
     Q_DECLARE_PRIVATE(QQuickAbstractColorPicker)
 };
diff --git a/src/quickdialogs2/quickdialogs2quickimpl/qquickabstractcolorpicker_p_p.h b/src/quickdialogs2/quickdialogs2quickimpl/qquickabstractcolorpicker_p_p.h
index eb93cbab07..73878a1cc0 100644
--- a/src/quickdialogs2/quickdialogs2quickimpl/qquickabstractcolorpicker_p_p.h
+++ b/src/quickdialogs2/quickdialogs2quickimpl/qquickabstractcolorpicker_p_p.h
@@ -19,6 +19,7 @@
 #include <QtQuickTemplates2/private/qquickdeferredexecute_p_p.h>
 
 #include "qquickabstractcolorpicker_p.h"
+#include "qquickcolordialogutils_p.h"
 
 QT_BEGIN_NAMESPACE
 
@@ -45,22 +46,13 @@ public:
     void itemImplicitWidthChanged(QQuickItem *item) override;
     void itemImplicitHeightChanged(QQuickItem *item) override;
 
-    struct
-    {
-        qreal h = .0;
-        qreal s = .0;
-        union {
-            qreal v = 1.0;
-            qreal l;
-        };
-        qreal a = 1.0;
-    } m_hsva;
+    HSVA m_hsva;
     QPointF m_pressPoint;
     QQuickDeferredPointer<QQuickItem> m_handle;
-    bool m_pressed : 1;
+    bool m_pressed = false;
 
 protected:
-    bool m_hsl : 1; // Use hsv by default.
+    bool m_hsl = false; // Use hsv by default.
 };
 
 QT_END_NAMESPACE
diff --git a/src/quickdialogs2/quickdialogs2quickimpl/qquickcolordialogimpl.cpp b/src/quickdialogs2/quickdialogs2quickimpl/qquickcolordialogimpl.cpp
index f26b90570c..6f13403766 100644
--- a/src/quickdialogs2/quickdialogs2quickimpl/qquickcolordialogimpl.cpp
+++ b/src/quickdialogs2/quickdialogs2quickimpl/qquickcolordialogimpl.cpp
@@ -4,6 +4,8 @@
 #include "qquickcolordialogimpl_p.h"
 #include "qquickcolordialogimpl_p_p.h"
 
+#include "qquickcolordialogutils_p.h"
+
 #include <QtQuickTemplates2/private/qquickslider_p.h>
 
 #include <qpa/qplatformintegration.h>
@@ -58,8 +60,7 @@ bool QQuickEyeDropperEventFilter::eventFilter(QObject *obj, QEvent *event)
     }
 }
 
-QQuickColorDialogImplPrivate::QQuickColorDialogImplPrivate()
-{}
+QQuickColorDialogImplPrivate::QQuickColorDialogImplPrivate() = default;
 
 QQuickColorDialogImplPrivate::~QQuickColorDialogImplPrivate()
 {
@@ -178,13 +179,38 @@ QColor QQuickColorDialogImpl::color() const
 void QQuickColorDialogImpl::setColor(const QColor &c)
 {
     Q_D(QQuickColorDialogImpl);
-
     if (color().rgba() == c.rgba())
         return;
 
-    d->m_hsva.h = d->m_hsl ? c.hslHueF() : c.hsvHueF();
-    d->m_hsva.s = d->m_hsl ? c.hslSaturationF() : c.hsvSaturationF();
-    d->m_hsva.v = d->m_hsl ? c.lightnessF() : c.valueF();
+    // If we get a QColor from an Hsv or Hsl color system,
+    // we want to get the raw values without the risk of QColor converting them,
+    // and possible deleting relevant information for achromatic cases.
+    if (c.spec() == QColor::Spec::Hsv) {
+        d->m_hsva.h = qBound(.0, c.hsvHueF(), 1.0);
+        if (d->m_hsl) {
+            const auto sl = getSaturationAndLightness(c.hsvSaturationF(), c.valueF());
+            d->m_hsva.s = qBound(.0, sl.first, 1.0);
+            d->m_hsva.l = qBound(.0, sl.second, 1.0);
+        } else {
+            d->m_hsva.s = qBound(.0, c.hsvSaturationF(), 1.0);
+            d->m_hsva.v = qBound(.0, c.valueF(), 1.0);
+        }
+    } else if (c.spec() == QColor::Spec::Hsl) {
+        d->m_hsva.h = qBound(.0, c.hslHueF(), 1.0);
+        if (d->m_hsl) {
+            d->m_hsva.s = qBound(.0, c.hslSaturationF(), 1.0);
+            d->m_hsva.l = qBound(.0, c.lightnessF(), 1.0);
+        } else {
+            const auto sv = getSaturationAndValue(c.hslSaturationF(), c.lightnessF());
+            d->m_hsva.s = qBound(.0, sv.first, 1.0);
+            d->m_hsva.v = qBound(.0, sv.second, 1.0);
+        }
+    } else {
+        d->m_hsva.h = qBound(.0, d->m_hsl ? c.hslHueF() : c.hsvHueF(), 1.0);
+        d->m_hsva.s = qBound(.0, d->m_hsl ? c.hslSaturationF() : c.hsvSaturationF(), 1.0);
+        d->m_hsva.v = qBound(.0, d->m_hsl ? c.lightnessF() : c.valueF(), 1.0);
+    }
+
     d->m_hsva.a = c.alphaF();
 
     emit colorChanged(color());
@@ -379,12 +405,6 @@ void QQuickColorDialogImpl::setHsl(bool hsl)
     emit specChanged();
 }
 
-bool QQuickColorDialogImpl::showAlpha()
-{
-    Q_D(const QQuickColorDialogImpl);
-    return d->m_showAlpha;
-}
-
 QSharedPointer<QColorDialogOptions> QQuickColorDialogImpl::options() const
 {
     Q_D(const QQuickColorDialogImpl);
@@ -406,14 +426,10 @@ void QQuickColorDialogImpl::setOptions(const QSharedPointer<QColorDialogOptions>
         if (d->options) {
             attached->buttonBox()->setVisible(
                     !(d->options->options() & QColorDialogOptions::NoButtons));
-        }
-    }
 
-    if (d->options) {
-        const bool showAlpha = d->options->options() & QColorDialogOptions::ShowAlphaChannel;
-        if (showAlpha != d->m_showAlpha) {
-            d->m_showAlpha = showAlpha;
-            emit showAlphaChanged();
+            const bool showAlpha = d->options->options() & QColorDialogOptions::ShowAlphaChannel;
+            attached->alphaSlider()->setVisible(showAlpha);
+            attached->colorInputs()->setShowAlpha(showAlpha);
         }
     }
 }
@@ -424,25 +440,6 @@ void QQuickColorDialogImpl::invokeEyeDropper()
     d->eyeDropperEnter();
 }
 
-std::pair<qreal, qreal> QQuickColorDialogImpl::getSaturationAndValue(qreal saturation,
-                                                                     qreal lightness)
-{
-    const qreal v = lightness + saturation * qMin(lightness, 1 - lightness);
-    if (v == .0)
-        return { .0, .0 };
-    const qreal s = 2 * (1 - lightness / v);
-    return { s, v };
-}
-std::pair<qreal, qreal> QQuickColorDialogImpl::getSaturationAndLightness(qreal saturation,
-                                                                         qreal value)
-{
-    const qreal l = value * (1 - saturation / 2);
-    if (l == .0)
-        return { .0, .0 };
-    const qreal s = (value - l) / qMin(l, 1 - l);
-    return { s, l };
-}
-
 QQuickColorDialogImplAttached::QQuickColorDialogImplAttached(QObject *parent)
     : QObject(*(new QQuickColorDialogImplAttachedPrivate), parent)
 {
@@ -581,4 +578,36 @@ void QQuickColorDialogImplAttached::setAlphaSlider(QQuickSlider *alphaSlider)
     emit alphaSliderChanged();
 }
 
+QQuickColorInputs *QQuickColorDialogImplAttached::colorInputs() const
+{
+    Q_D(const QQuickColorDialogImplAttached);
+    return d->colorInputs;
+}
+
+void QQuickColorDialogImplAttached::setColorInputs(QQuickColorInputs *colorInputs)
+{
+    Q_D(QQuickColorDialogImplAttached);
+
+    if (d->colorInputs == colorInputs)
+        return;
+
+    if (d->colorInputs) {
+        QQuickColorDialogImpl *colorDialogImpl = qobject_cast<QQuickColorDialogImpl *>(parent());
+        if (colorDialogImpl)
+            QObject::disconnect(d->colorInputs, &QQuickColorInputs::colorModified,
+                                colorDialogImpl, &QQuickColorDialogImpl::setColor);
+    }
+
+    d->colorInputs = colorInputs;
+
+    if (d->colorInputs) {
+        QQuickColorDialogImpl *colorDialogImpl = qobject_cast<QQuickColorDialogImpl *>(parent());
+        if (colorDialogImpl)
+            QObject::connect(d->colorInputs, &QQuickColorInputs::colorModified,
+                             colorDialogImpl, &QQuickColorDialogImpl::setColor);
+    }
+
+    emit colorInputsChanged();
+}
+
 QT_END_NAMESPACE
diff --git a/src/quickdialogs2/quickdialogs2quickimpl/qquickcolordialogimpl_p.h b/src/quickdialogs2/quickdialogs2quickimpl/qquickcolordialogimpl_p.h
index d5c81372ba..110298b5f2 100644
--- a/src/quickdialogs2/quickdialogs2quickimpl/qquickcolordialogimpl_p.h
+++ b/src/quickdialogs2/quickdialogs2quickimpl/qquickcolordialogimpl_p.h
@@ -23,6 +23,7 @@ QT_BEGIN_NAMESPACE
 
 class QQuickDialogButtonBox;
 class QQuickAbstractColorPicker;
+class QQuickColorInputs;
 class QQuickSlider;
 
 class QQuickColorDialogImplAttached;
@@ -42,7 +43,6 @@ class Q_QUICKDIALOGS2QUICKIMPL_PRIVATE_EXPORT QQuickColorDialogImpl : public QQu
     Q_PROPERTY(int green READ green WRITE setGreen NOTIFY colorChanged FINAL)
     Q_PROPERTY(int blue READ blue WRITE setBlue NOTIFY colorChanged FINAL)
     Q_PROPERTY(bool isHsl READ isHsl WRITE setHsl NOTIFY specChanged FINAL)
-    Q_PROPERTY(bool showAlpha READ showAlpha NOTIFY showAlphaChanged)
     QML_NAMED_ELEMENT(ColorDialogImpl)
     QML_ATTACHED(QQuickColorDialogImplAttached)
     QML_ADDED_IN_VERSION(6, 4)
@@ -85,18 +85,13 @@ public:
     bool isHsl() const;
     void setHsl(bool hsl);
 
-    bool showAlpha();
-
     Q_INVOKABLE void invokeEyeDropper();
 
 Q_SIGNALS:
     void colorChanged(const QColor &color);
     void specChanged();
-    void showAlphaChanged();
 
 private:
-    static std::pair<qreal, qreal> getSaturationAndValue(qreal saturation, qreal lightness);
-    static std::pair<qreal, qreal> getSaturationAndLightness(qreal saturation, qreal value);
     Q_DISABLE_COPY(QQuickColorDialogImpl)
     Q_DECLARE_PRIVATE(QQuickColorDialogImpl)
 };
@@ -106,12 +101,17 @@ class Q_QUICKDIALOGS2QUICKIMPL_PRIVATE_EXPORT QQuickColorDialogImplAttached : pu
     Q_OBJECT
     Q_PROPERTY(QQuickDialogButtonBox *buttonBox READ buttonBox WRITE setButtonBox NOTIFY buttonBoxChanged FINAL)
     Q_PROPERTY(QQuickAbstractButton *eyeDropperButton READ eyeDropperButton WRITE setEyeDropperButton NOTIFY eyeDropperButtonChanged FINAL)
-    Q_PROPERTY(QQuickAbstractColorPicker *colorPicker READ colorPicker WRITE setColorPicker NOTIFY colorPickerChanged)
-    Q_PROPERTY(QQuickSlider *alphaSlider READ alphaSlider WRITE setAlphaSlider NOTIFY alphaSliderChanged)
+    Q_PROPERTY(QQuickAbstractColorPicker *colorPicker READ colorPicker WRITE setColorPicker NOTIFY
+                       colorPickerChanged FINAL)
+    Q_PROPERTY(QQuickColorInputs *colorInputs READ colorInputs WRITE setColorInputs NOTIFY
+                       colorInputsChanged FINAL)
+    Q_PROPERTY(QQuickSlider *alphaSlider READ alphaSlider WRITE setAlphaSlider NOTIFY
+                       alphaSliderChanged FINAL)
     Q_MOC_INCLUDE(<QtQuickTemplates2/private/qquickdialogbuttonbox_p.h>)
     Q_MOC_INCLUDE(<QtQuickTemplates2/private/qquickabstractbutton_p.h>)
     Q_MOC_INCLUDE(<QtQuickTemplates2/private/qquickslider_p.h>)
     Q_MOC_INCLUDE("qquickabstractcolorpicker_p.h")
+    Q_MOC_INCLUDE("qquickcolorinputs_p.h")
 
 public:
     explicit QQuickColorDialogImplAttached(QObject *parent = nullptr);
@@ -125,6 +125,9 @@ public:
     QQuickAbstractColorPicker *colorPicker() const;
     void setColorPicker(QQuickAbstractColorPicker *colorPicker);
 
+    QQuickColorInputs *colorInputs() const;
+    void setColorInputs(QQuickColorInputs *colorInputs);
+
     QQuickSlider *alphaSlider() const;
     void setAlphaSlider(QQuickSlider *alphaSlider);
 
@@ -132,6 +135,7 @@ Q_SIGNALS:
     void buttonBoxChanged();
     void eyeDropperButtonChanged();
     void colorPickerChanged();
+    void colorInputsChanged();
     void alphaSliderChanged();
 
 private:
diff --git a/src/quickdialogs2/quickdialogs2quickimpl/qquickcolordialogimpl_p_p.h b/src/quickdialogs2/quickdialogs2quickimpl/qquickcolordialogimpl_p_p.h
index 5349fb7da4..b7c4dc8e2c 100644
--- a/src/quickdialogs2/quickdialogs2quickimpl/qquickcolordialogimpl_p_p.h
+++ b/src/quickdialogs2/quickdialogs2quickimpl/qquickcolordialogimpl_p_p.h
@@ -17,6 +17,7 @@
 
 #include "qquickcolordialogimpl_p.h"
 #include "qquickabstractcolorpicker_p.h"
+#include "qquickcolorinputs_p.h"
 
 #include <QtQuickTemplates2/private/qquickdialog_p_p.h>
 #include <QtQuickTemplates2/private/qquickdialogbuttonbox_p.h>
@@ -69,16 +70,7 @@ public:
     void alphaSliderMoved();
 
     QSharedPointer<QColorDialogOptions> options;
-    struct
-    {
-        qreal h = .0;
-        qreal s = .0;
-        union {
-            qreal v = 1.0;
-            qreal l;
-        };
-        qreal a = 1.0;
-    } m_hsva;
+    HSVA m_hsva;
     std::unique_ptr<QQuickEyeDropperEventFilter> eyeDropperEventFilter;
     QPointer<QQuickWindow> m_eyeDropperWindow;
     QColor m_eyeDropperPreviousColor;
@@ -92,6 +84,7 @@ class QQuickColorDialogImplAttachedPrivate : public QObjectPrivate
 public:
     QPointer<QQuickDialogButtonBox> buttonBox;
     QPointer<QQuickAbstractButton> eyeDropperButton;
+    QPointer<QQuickColorInputs> colorInputs;
     QPointer<QQuickAbstractColorPicker> colorPicker;
     QPointer<QQuickSlider> alphaSlider;
 
diff --git a/src/quickdialogs2/quickdialogs2quickimpl/qquickcolordialogutils.cpp b/src/quickdialogs2/quickdialogs2quickimpl/qquickcolordialogutils.cpp
new file mode 100644
index 0000000000..0a123f84a6
--- /dev/null
+++ b/src/quickdialogs2/quickdialogs2quickimpl/qquickcolordialogutils.cpp
@@ -0,0 +1,24 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickcolordialogutils_p.h"
+
+std::pair<qreal, qreal> getSaturationAndValue(qreal saturation, qreal lightness)
+{
+    const qreal v = lightness + saturation * qMin(lightness, 1 - lightness);
+    if (v == .0)
+        return { .0, .0 };
+    const qreal s = 2 * (1 - lightness / v);
+    return { s, v };
+}
+
+std::pair<qreal, qreal> getSaturationAndLightness(qreal saturation, qreal value)
+{
+    const qreal l = value * (1 - saturation / 2);
+    if (l == .0)
+        return { .0, .0 };
+    if (l == 1 && value == 1)
+        return { saturation, l };
+    const qreal s = (value - l) / qMin(l, 1 - l);
+    return { s, l };
+}
diff --git a/src/quickdialogs2/quickdialogs2quickimpl/qquickcolordialogutils_p.h b/src/quickdialogs2/quickdialogs2quickimpl/qquickcolordialogutils_p.h
new file mode 100644
index 0000000000..837e8b6a84
--- /dev/null
+++ b/src/quickdialogs2/quickdialogs2quickimpl/qquickcolordialogutils_p.h
@@ -0,0 +1,24 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKCOLORDIALOGUTILS_P_H
+#define QQUICKCOLORDIALOGUTILS_P_H
+
+#include <QtCore/QtGlobal>
+
+std::pair<qreal, qreal> getSaturationAndValue(qreal saturation, qreal lightness);
+
+std::pair<qreal, qreal> getSaturationAndLightness(qreal saturation, qreal value);
+
+struct HSVA
+{
+    qreal h = .0;
+    qreal s = .0;
+    union {
+        qreal v = 1.0;
+        qreal l;
+    };
+    qreal a = 1.0;
+};
+
+#endif // QQUICKCOLORDIALOGUTILS_P_H
diff --git a/src/quickdialogs2/quickdialogs2quickimpl/qquickcolorinputs.cpp b/src/quickdialogs2/quickdialogs2quickimpl/qquickcolorinputs.cpp
new file mode 100644
index 0000000000..cc3743c494
--- /dev/null
+++ b/src/quickdialogs2/quickdialogs2quickimpl/qquickcolorinputs.cpp
@@ -0,0 +1,509 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickcolorinputs_p.h"
+
+QT_BEGIN_NAMESPACE
+
+QQuickColorInputs::QQuickColorInputs() = default;
+
+QColor QQuickColorInputs::color() const
+{
+    return QColor::fromHsvF(m_hsva.h, m_hsva.s, m_hsva.v, m_hsva.a);
+}
+
+void QQuickColorInputs::setColor(const QColor &c)
+{
+    if (color().rgba() == c.rgba())
+        return;
+
+    // If we get a QColor from an Hsv or Hsl color system,
+    // we want to get the raw values without the risk of QColor converting them,
+    // and possible deleting relevant information for achromatic cases.
+    if (c.spec() == QColor::Spec::Hsl) {
+        const auto sv = getSaturationAndValue(c.hslSaturationF(), c.lightnessF());
+        m_hsva.h = qBound(.0, c.hslHueF(), 1.0);
+        m_hsva.s = qBound(.0, sv.first, 1.0);
+        m_hsva.v = qBound(.0, sv.second, 1.0);
+    } else {
+        m_hsva.h = qBound(.0, c.hsvHueF(), 1.0);
+        m_hsva.s = qBound(.0, c.hsvSaturationF(), 1.0);
+        m_hsva.v = qBound(.0, c.valueF(), 1.0);
+    }
+
+    m_hsva.a = c.alphaF();
+
+    emit colorChanged(color());
+}
+
+int QQuickColorInputs::red() const
+{
+    return color().red();
+}
+
+int QQuickColorInputs::green() const
+{
+    return color().green();
+}
+
+int QQuickColorInputs::blue() const
+{
+    return color().blue();
+}
+
+qreal QQuickColorInputs::alpha() const
+{
+    return m_hsva.a;
+}
+
+qreal QQuickColorInputs::hue() const
+{
+    return m_hsva.h;
+}
+
+qreal QQuickColorInputs::hslSaturation() const
+{
+    return getSaturationAndLightness(m_hsva.s, m_hsva.v).first;
+}
+
+qreal QQuickColorInputs::hsvSaturation() const
+{
+    return m_hsva.s;
+}
+
+qreal QQuickColorInputs::value() const
+{
+    return m_hsva.v;
+}
+
+qreal QQuickColorInputs::lightness() const
+{
+    return getSaturationAndLightness(m_hsva.s, m_hsva.v).second;
+}
+
+bool QQuickColorInputs::showAlpha() const
+{
+    return m_showAlpha;
+}
+
+void QQuickColorInputs::setShowAlpha(bool showAlpha)
+{
+    if (m_showAlpha == showAlpha)
+        return;
+
+    m_showAlpha = showAlpha;
+    emit showAlphaChanged(m_showAlpha);
+}
+
+QQuickTextInput *QQuickColorInputs::hexInput() const
+{
+    return m_hexInput;
+}
+
+void QQuickColorInputs::setHexInput(QQuickTextInput *hexInput)
+{
+    if (m_hexInput == hexInput)
+        return;
+
+    if (m_hexInput)
+        disconnect(m_hexInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleHexChanged);
+
+    m_hexInput = hexInput;
+
+    if (m_hexInput)
+        connect(m_hexInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleHexChanged);
+
+    emit hexInputChanged();
+}
+
+QQuickTextInput *QQuickColorInputs::redInput() const
+{
+    return m_redInput;
+}
+
+void QQuickColorInputs::setRedInput(QQuickTextInput *redInput)
+{
+    if (m_redInput == redInput)
+        return;
+
+    if (m_redInput)
+        disconnect(m_redInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleRedChanged);
+
+    m_redInput = redInput;
+
+    if (m_redInput)
+        connect(m_redInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleRedChanged);
+
+    emit redInputChanged();
+}
+
+QQuickTextInput *QQuickColorInputs::greenInput() const
+{
+    return m_greenInput;
+}
+
+void QQuickColorInputs::setGreenInput(QQuickTextInput *greenInput)
+{
+    if (m_greenInput == greenInput)
+        return;
+
+    if (m_greenInput)
+        disconnect(m_greenInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleGreenChanged);
+
+    m_greenInput = greenInput;
+
+    if (m_greenInput)
+        connect(m_greenInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleGreenChanged);
+
+    emit greenInputChanged();
+}
+
+QQuickTextInput *QQuickColorInputs::blueInput() const
+{
+    return m_blueInput;
+}
+
+void QQuickColorInputs::setBlueInput(QQuickTextInput *blueInput)
+{
+    if (m_blueInput == blueInput)
+        return;
+
+    if (m_blueInput)
+        disconnect(m_blueInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleBlueChanged);
+
+    m_blueInput = blueInput;
+
+    if (m_blueInput)
+        connect(m_blueInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleBlueChanged);
+
+    emit blueInputChanged();
+}
+
+QQuickTextInput *QQuickColorInputs::hsvHueInput() const
+{
+    return m_hsvHueInput;
+}
+
+void QQuickColorInputs::setHsvHueInput(QQuickTextInput *hsvHueInput)
+{
+    if (m_hsvHueInput == hsvHueInput)
+        return;
+
+    if (m_hsvHueInput)
+        disconnect(m_hsvHueInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleHsvHueChanged);
+
+    m_hsvHueInput = hsvHueInput;
+
+    if (m_hsvHueInput)
+        connect(m_hsvHueInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleHsvHueChanged);
+
+    emit hsvHueInputChanged();
+}
+
+QQuickTextInput *QQuickColorInputs::hslHueInput() const
+{
+    return m_hslHueInput;
+}
+
+void QQuickColorInputs::setHslHueInput(QQuickTextInput *hslHueInput)
+{
+    if (m_hslHueInput == hslHueInput)
+        return;
+
+    if (m_hslHueInput)
+        disconnect(m_hslHueInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleHslHueChanged);
+
+    m_hslHueInput = hslHueInput;
+
+    if (m_hslHueInput)
+        connect(m_hslHueInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleHslHueChanged);
+
+    emit hslHueInputChanged();
+}
+
+QQuickTextInput *QQuickColorInputs::hsvSaturationInput() const
+{
+    return m_hsvSaturationInput;
+}
+
+void QQuickColorInputs::setHsvSaturationInput(QQuickTextInput *hsvSaturationInput)
+{
+    if (m_hsvSaturationInput == hsvSaturationInput)
+        return;
+
+    if (m_hsvSaturationInput)
+        disconnect(m_hsvSaturationInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleHsvSaturationChanged);
+
+    m_hsvSaturationInput = hsvSaturationInput;
+
+    if (m_hsvSaturationInput)
+        connect(m_hsvSaturationInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleHsvSaturationChanged);
+
+    emit hsvSaturationInputChanged();
+}
+
+QQuickTextInput *QQuickColorInputs::hslSaturationInput() const
+{
+    return m_hslSaturationInput;
+}
+
+void QQuickColorInputs::setHslSaturationInput(QQuickTextInput *hslSaturationInput)
+{
+    if (m_hslSaturationInput == hslSaturationInput)
+        return;
+
+    if (m_hslSaturationInput)
+        disconnect(m_hslSaturationInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleHslSaturationChanged);
+
+    m_hslSaturationInput = hslSaturationInput;
+
+    if (m_hslSaturationInput)
+        connect(m_hslSaturationInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleHslSaturationChanged);
+
+    emit hslSaturationInputChanged();
+}
+
+QQuickTextInput *QQuickColorInputs::valueInput() const
+{
+    return m_valueInput;
+}
+
+void QQuickColorInputs::setValueInput(QQuickTextInput *valueInput)
+{
+    if (m_valueInput == valueInput)
+        return;
+
+    if (m_valueInput)
+        disconnect(m_valueInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleValueChanged);
+
+    m_valueInput = valueInput;
+
+    if (m_valueInput)
+        connect(m_valueInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleValueChanged);
+
+    emit valueInputChanged();
+}
+
+QQuickTextInput *QQuickColorInputs::lightnessInput() const
+{
+    return m_lightnessInput;
+}
+
+void QQuickColorInputs::setLightnessInput(QQuickTextInput *lightnessInput)
+{
+    if (m_lightnessInput == lightnessInput)
+        return;
+
+    if (m_lightnessInput)
+        disconnect(m_lightnessInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleLightnessChanged);
+
+    m_lightnessInput = lightnessInput;
+
+    if (m_lightnessInput)
+        connect(m_lightnessInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleLightnessChanged);
+
+    emit lightnessInputChanged();
+}
+
+QQuickTextInput *QQuickColorInputs::rgbAlphaInput() const
+{
+    return m_rgbAlphaInput;
+}
+
+void QQuickColorInputs::setRgbAlphaInput(QQuickTextInput *alphaInput)
+{
+    if (alphaInput == m_rgbAlphaInput)
+        return;
+
+    if (m_rgbAlphaInput) {
+        disconnect(m_rgbAlphaInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleRgbAlphaChanged);
+        disconnect(this, &QQuickColorInputs::showAlphaChanged, m_rgbAlphaInput, &QQuickTextInput::setVisible);
+    }
+
+    m_rgbAlphaInput = alphaInput;
+
+    if (m_rgbAlphaInput) {
+        connect(m_rgbAlphaInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleRgbAlphaChanged);
+        connect(this, &QQuickColorInputs::showAlphaChanged, m_rgbAlphaInput, &QQuickTextInput::setVisible);
+        m_rgbAlphaInput->setVisible(showAlpha());
+    }
+
+    emit rgbAlphaInputChanged();
+}
+
+QQuickTextInput *QQuickColorInputs::hsvAlphaInput() const
+{
+    return m_hsvAlphaInput;
+}
+
+void QQuickColorInputs::setHsvAlphaInput(QQuickTextInput *alphaInput)
+{
+    if (alphaInput == m_hsvAlphaInput)
+        return;
+
+    if (m_hsvAlphaInput) {
+        disconnect(m_hsvAlphaInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleHsvAlphaChanged);
+        disconnect(this, &QQuickColorInputs::showAlphaChanged, m_hsvAlphaInput, &QQuickTextInput::setVisible);
+    }
+
+    m_hsvAlphaInput = alphaInput;
+
+    if (m_hsvAlphaInput) {
+        connect(m_hsvAlphaInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleHsvAlphaChanged);
+        connect(this, &QQuickColorInputs::showAlphaChanged, m_hsvAlphaInput, &QQuickTextInput::setVisible);
+        m_hsvAlphaInput->setVisible(showAlpha());
+    }
+
+    emit hsvAlphaInputChanged();
+}
+
+QQuickTextInput *QQuickColorInputs::hslAlphaInput() const
+{
+    return m_hslAlphaInput;
+}
+
+void QQuickColorInputs::setHslAlphaInput(QQuickTextInput *alphaInput)
+{
+    if (alphaInput == m_hslAlphaInput)
+        return;
+
+    if (m_hslAlphaInput) {
+        disconnect(m_hslAlphaInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleHslAlphaChanged);
+        disconnect(this, &QQuickColorInputs::showAlphaChanged, m_hslAlphaInput, &QQuickTextInput::setVisible);
+    }
+
+    m_hslAlphaInput = alphaInput;
+
+    if (m_hslAlphaInput) {
+        connect(m_hslAlphaInput, &QQuickTextInput::editingFinished, this, &QQuickColorInputs::handleHslAlphaChanged);
+        connect(this, &QQuickColorInputs::showAlphaChanged, m_hslAlphaInput, &QQuickTextInput::setVisible);
+        m_hslAlphaInput->setVisible(showAlpha());
+    }
+
+    emit hslAlphaInputChanged();
+}
+
+void QQuickColorInputs::handleHexChanged()
+{
+    emit colorModified(QColor::fromString(m_hexInput->text()));
+}
+
+void QQuickColorInputs::handleRedChanged()
+{
+    QColor c = color();
+    c.setRed(qBound(0, m_redInput->text().toInt(), 255));
+    emit colorModified(c);
+}
+
+void QQuickColorInputs::handleGreenChanged()
+{
+    QColor c = color();
+    c.setGreen(qBound(0, m_greenInput->text().toInt(), 255));
+    emit colorModified(c);
+}
+
+void QQuickColorInputs::handleBlueChanged()
+{
+    QColor c = color();
+    c.setBlue(qBound(0, m_blueInput->text().toInt(), 255));
+    emit colorModified(c);
+}
+
+static QString s_percentage_pattern = QString::fromUtf8("^(\\d+)%?$");
+static QString s_degree_pattern = QString::fromUtf8("(\\d+)°?$");
+
+void QQuickColorInputs::handleHsvHueChanged()
+{
+    const QRegularExpression pattern(s_degree_pattern);
+    const auto match = pattern.match(m_hsvHueInput->text());
+    if (match.hasMatch()) {
+        const auto substr = match.captured(1);
+        const qreal input = static_cast<qreal>(qBound(0, substr.toInt(), 360)) / static_cast<qreal>(360);
+        emit colorModified(QColor::fromHsvF(input, hsvSaturation(), value(), alpha()));
+    }
+}
+
+void QQuickColorInputs::handleHslHueChanged()
+{
+    const QRegularExpression pattern(s_degree_pattern);
+    const auto match = pattern.match(m_hslHueInput->text());
+    if (match.hasMatch()) {
+        const auto substr = match.captured(1);
+        const qreal input = static_cast<qreal>(qBound(0, substr.toInt(), 360)) / static_cast<qreal>(360);
+        emit colorModified(QColor::fromHslF(input, hslSaturation(), lightness(), alpha()));
+    }
+}
+
+void QQuickColorInputs::handleHsvSaturationChanged()
+{
+    const QRegularExpression pattern(s_percentage_pattern);
+    const auto match = pattern.match(m_hsvSaturationInput->text());
+    if (match.hasMatch()) {
+        const auto substr = match.captured(1);
+        const qreal input = static_cast<qreal>(qBound(0, substr.toInt(), 100)) / static_cast<qreal>(100);
+        emit colorModified(QColor::fromHsvF(hue(), input, value(), alpha()));
+    }
+}
+
+void QQuickColorInputs::handleHslSaturationChanged()
+{
+    const QRegularExpression pattern(s_percentage_pattern);
+    const auto match = pattern.match(m_hslSaturationInput->text());
+    if (match.hasMatch()) {
+        const auto substr = match.captured(1);
+        const qreal input = static_cast<qreal>(qBound(0, substr.toInt(), 100)) / static_cast<qreal>(100);
+        emit colorModified(QColor::fromHslF(hue(), input, lightness(), alpha()));
+    }
+}
+
+void QQuickColorInputs::handleValueChanged()
+{
+    const QRegularExpression pattern(s_percentage_pattern);
+    const auto match = pattern.match(m_valueInput->text());
+    if (match.hasMatch()) {
+        const auto substr = match.captured(1);
+        const qreal input = static_cast<qreal>(qBound(0, substr.toInt(), 100)) / static_cast<qreal>(100);
+        emit colorModified(QColor::fromHsvF(hue(), hsvSaturation(), input, alpha()));
+    }
+}
+
+void QQuickColorInputs::handleLightnessChanged()
+{
+    const QRegularExpression pattern(s_percentage_pattern);
+    const auto match = pattern.match(m_lightnessInput->text());
+    if (match.hasMatch()) {
+        const auto substr = match.captured(1);
+        const qreal input = static_cast<qreal>(qBound(0, substr.toInt(), 100)) / static_cast<qreal>(100);
+        emit colorModified(QColor::fromHslF(hue(), hslSaturation(), input, alpha()));
+    }
+}
+
+void QQuickColorInputs::handleRgbAlphaChanged()
+{
+    handleAlphaChanged(m_rgbAlphaInput->text());
+}
+
+void QQuickColorInputs::handleHsvAlphaChanged()
+{
+    handleAlphaChanged(m_hsvAlphaInput->text());
+}
+
+void QQuickColorInputs::handleHslAlphaChanged()
+{
+    handleAlphaChanged(m_hslAlphaInput->text());
+}
+
+void QQuickColorInputs::handleAlphaChanged(const QString &input)
+{
+    const QRegularExpression pattern(s_percentage_pattern);
+    const auto match = pattern.match(input);
+    if (match.hasMatch()) {
+        QColor c = color();
+        const auto substr = match.captured(1);
+        const qreal input = static_cast<qreal>(qBound(0, substr.toInt(), 100)) / static_cast<qreal>(100);
+        c.setAlphaF(input);
+        emit colorModified(c);
+    }
+}
+
+QT_END_NAMESPACE
diff --git a/src/quickdialogs2/quickdialogs2quickimpl/qquickcolorinputs_p.h b/src/quickdialogs2/quickdialogs2quickimpl/qquickcolorinputs_p.h
new file mode 100644
index 0000000000..4827627d6f
--- /dev/null
+++ b/src/quickdialogs2/quickdialogs2quickimpl/qquickcolorinputs_p.h
@@ -0,0 +1,171 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKCOLORINPUTS_P_H
+#define QQUICKCOLORINPUTS_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtGui/qcolor.h>
+#include <QtQuick/private/qquickitem_p.h>
+#include <QtQuickTemplates2/private/qquickcombobox_p.h>
+#include <QtQuickTemplates2/private/qquicktextfield_p.h>
+
+#include "qtquickdialogs2quickimplglobal_p.h"
+
+#include "qquickcolordialogutils_p.h"
+
+QT_BEGIN_NAMESPACE
+
+class Q_QUICKDIALOGS2QUICKIMPL_PRIVATE_EXPORT QQuickColorInputs : public QQuickItem
+{
+    Q_OBJECT
+    Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)
+    Q_PROPERTY(int red READ red NOTIFY colorChanged)
+    Q_PROPERTY(int green READ green NOTIFY colorChanged)
+    Q_PROPERTY(int blue READ blue NOTIFY colorChanged)
+    Q_PROPERTY(qreal hue READ hue NOTIFY colorChanged)
+    Q_PROPERTY(qreal hslSaturation READ hslSaturation NOTIFY colorChanged)
+    Q_PROPERTY(qreal hsvSaturation READ hsvSaturation NOTIFY colorChanged)
+    Q_PROPERTY(qreal value READ value NOTIFY colorChanged)
+    Q_PROPERTY(qreal lightness READ lightness NOTIFY colorChanged)
+    Q_PROPERTY(qreal alpha READ alpha NOTIFY colorChanged)
+    Q_PROPERTY(bool showAlpha READ showAlpha WRITE setShowAlpha NOTIFY showAlphaChanged)
+    Q_PROPERTY(QQuickTextInput *hexInput READ hexInput WRITE setHexInput NOTIFY hexInputChanged)
+    Q_PROPERTY(QQuickTextInput *redInput READ redInput WRITE setRedInput NOTIFY redInputChanged)
+    Q_PROPERTY(QQuickTextInput *greenInput READ greenInput WRITE setGreenInput NOTIFY greenInputChanged)
+    Q_PROPERTY(QQuickTextInput *blueInput READ blueInput WRITE setBlueInput NOTIFY blueInputChanged)
+    Q_PROPERTY(QQuickTextInput *hsvHueInput READ hsvHueInput WRITE setHsvHueInput NOTIFY hsvHueInputChanged)
+    Q_PROPERTY(QQuickTextInput *hslHueInput READ hslHueInput WRITE setHslHueInput NOTIFY hslHueInputChanged)
+    Q_PROPERTY(QQuickTextInput *hsvSaturationInput READ hsvSaturationInput WRITE setHsvSaturationInput NOTIFY hsvSaturationInputChanged)
+    Q_PROPERTY(QQuickTextInput *hslSaturationInput READ hslSaturationInput WRITE setHslSaturationInput NOTIFY hslSaturationInputChanged)
+    Q_PROPERTY(QQuickTextInput *valueInput READ valueInput WRITE setValueInput NOTIFY valueInputChanged)
+    Q_PROPERTY(QQuickTextInput *lightnessInput READ lightnessInput WRITE setLightnessInput NOTIFY lightnessInputChanged)
+    Q_PROPERTY(QQuickTextInput *rgbAlphaInput READ rgbAlphaInput WRITE setRgbAlphaInput NOTIFY rgbAlphaInputChanged)
+    Q_PROPERTY(QQuickTextInput *hsvAlphaInput READ hsvAlphaInput WRITE setHsvAlphaInput NOTIFY hsvAlphaInputChanged)
+    Q_PROPERTY(QQuickTextInput *hslAlphaInput READ hslAlphaInput WRITE setHslAlphaInput NOTIFY hslAlphaInputChanged)
+    QML_NAMED_ELEMENT(ColorInputsImpl)
+
+public:
+    explicit QQuickColorInputs();
+
+    QColor color() const;
+    void setColor(const QColor &c);
+    int red() const;
+    int green() const;
+    int blue() const;
+    qreal alpha() const;
+    qreal hue() const;
+    qreal hslSaturation() const;
+    qreal hsvSaturation() const;
+    qreal value() const;
+    qreal lightness() const;
+
+    bool showAlpha() const;
+    void setShowAlpha(bool showAlpha);
+
+    QQuickTextInput *hexInput() const;
+    void setHexInput(QQuickTextInput *hexInput);
+
+    QQuickTextInput *redInput() const;
+    void setRedInput(QQuickTextInput *redInput);
+
+    QQuickTextInput *greenInput() const;
+    void setGreenInput(QQuickTextInput *greenInput);
+
+    QQuickTextInput *blueInput() const;
+    void setBlueInput(QQuickTextInput *blueInput);
+
+    QQuickTextInput *hsvHueInput() const;
+    void setHsvHueInput(QQuickTextInput *hsvHueInput);
+
+    QQuickTextInput *hslHueInput() const;
+    void setHslHueInput(QQuickTextInput *hslHueInput);
+
+    QQuickTextInput *hsvSaturationInput() const;
+    void setHsvSaturationInput(QQuickTextInput *hsvSaturationInput);
+
+    QQuickTextInput *hslSaturationInput() const;
+    void setHslSaturationInput(QQuickTextInput *hslSaturationInput);
+
+    QQuickTextInput *valueInput() const;
+    void setValueInput(QQuickTextInput *valueInput);
+
+    QQuickTextInput *lightnessInput() const;
+    void setLightnessInput(QQuickTextInput *lightnessInput);
+
+    QQuickTextInput *rgbAlphaInput() const;
+    void setRgbAlphaInput(QQuickTextInput *alphaInput);
+
+    QQuickTextInput *hsvAlphaInput() const;
+    void setHsvAlphaInput(QQuickTextInput *alphaInput);
+
+    QQuickTextInput *hslAlphaInput() const;
+    void setHslAlphaInput(QQuickTextInput *alphaInput);
+
+Q_SIGNALS:
+    void colorChanged(const QColor &c);
+    void colorModified(const QColor &c);
+    void hslChanged();
+    void showAlphaChanged(bool);
+    void hexInputChanged();
+    void redInputChanged();
+    void greenInputChanged();
+    void blueInputChanged();
+    void hsvHueInputChanged();
+    void hslHueInputChanged();
+    void hsvSaturationInputChanged();
+    void hslSaturationInputChanged();
+    void valueInputChanged();
+    void lightnessInputChanged();
+    void rgbAlphaInputChanged();
+    void hsvAlphaInputChanged();
+    void hslAlphaInputChanged();
+
+private:
+    void handleHexChanged();
+    void handleRedChanged();
+    void handleGreenChanged();
+    void handleBlueChanged();
+    void handleHsvHueChanged();
+    void handleHslHueChanged();
+    void handleHueChanged(const QString &input);
+    void handleHsvSaturationChanged();
+    void handleHslSaturationChanged();
+    void handleSaturationChanged(const QString &input);
+    void handleValueChanged();
+    void handleLightnessChanged();
+    void handleRgbAlphaChanged();
+    void handleHsvAlphaChanged();
+    void handleHslAlphaChanged();
+    void handleAlphaChanged(const QString &input);
+
+    QPointer<QQuickTextInput> m_hexInput;
+    QPointer<QQuickTextInput> m_redInput;
+    QPointer<QQuickTextInput> m_greenInput;
+    QPointer<QQuickTextInput> m_blueInput;
+    QPointer<QQuickTextInput> m_hsvHueInput;
+    QPointer<QQuickTextInput> m_hslHueInput;
+    QPointer<QQuickTextInput> m_hsvSaturationInput;
+    QPointer<QQuickTextInput> m_hslSaturationInput;
+    QPointer<QQuickTextInput> m_valueInput;
+    QPointer<QQuickTextInput> m_lightnessInput;
+    QPointer<QQuickTextInput> m_rgbAlphaInput;
+    QPointer<QQuickTextInput> m_hsvAlphaInput;
+    QPointer<QQuickTextInput> m_hslAlphaInput;
+    HSVA m_hsva;
+    bool m_showAlpha = false;
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKCOLORINPUTS_P_H