diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml
index a695d16dd9e..385d01c4df8 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml
@@ -223,7 +223,10 @@ SecondColumnLayout {
 
             function open() {
                 popupDialog.ensureLoader()
+
                 popupDialog.show(preview)
+
+                popupDialog.loaderItem.aboutToBeShown() //need it for now
             }
 
             function determineActiveColorMode() {
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditorPopup.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditorPopup.qml
index d3ad19ad852..2c292c5030f 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditorPopup.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditorPopup.qml
@@ -12,6 +12,12 @@ import QtQuickDesignerColorPalette
 Column {
     id: root
 
+    // There seems to be an issue on Windows and MacOS with ColorPickers
+    // Canvases not being painted on initialization
+    // because ColorEditorPopup is invisible at init time,
+    // so we use this signal to explicitly pass visibility status
+    signal aboutToBeShown
+
     property bool eyeDropperActive: ColorPaletteBackend.eyeDropperActive
 
     property bool supportGradient: false
@@ -433,6 +439,13 @@ Column {
                 hsvValueSpinBox.value = colorPicker.value
                 hsvAlphaSpinBox.value = colorPicker.alpha
             }
+
+            Connections {
+                target: root
+                onAboutToBeShown: {
+                    colorPicker.aboutToBeShown()
+                }
+            }
         }
 
         Column {
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/impl/ColorPicker.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/impl/ColorPicker.qml
index cd525114268..fc2a0256644 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/impl/ColorPicker.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/impl/ColorPicker.qml
@@ -13,6 +13,8 @@ Column {
         HSLA
     }
 
+    signal aboutToBeShown
+
     property int mode: ColorPicker.Mode.HSVA
     property color color: "#303091"
 
@@ -206,6 +208,8 @@ Column {
                     target: root
                     function onHueChanged() { gradientOverlay.requestPaint() }
                     function onModeChanged() { gradientOverlay.requestPaint() }
+                    function onAlphaChanged() { gradientOverlay.requestPaint() }
+                    function onAboutToBeShown() { gradientOverlay.requestPaint() }
                 }
 
                 onPaint: {
@@ -249,6 +253,7 @@ Column {
                     function onColorInvalidated() { pickerCross.requestPaint() }
                     function onColorChanged() { pickerCross.requestPaint() }
                     function onModeChanged() { pickerCross.requestPaint() }
+                    function onAboutToBeShown() { pickerCross.requestPaint() }
                 }
 
                 onPaint: {