diff --git a/applets/binary-clock/package/contents/ui/ColorButton.qml b/applets/binary-clock/package/contents/ui/ColorButton.qml
new file mode 100644
--- /dev/null
+++ b/applets/binary-clock/package/contents/ui/ColorButton.qml
@@ -0,0 +1,39 @@
+/*
+ *  Copyright 2018  Friedrich W. H. Kossebau <kossebau@kde.org>
+ *
+ *  This program is free software; you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 2 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import QtQuick.Controls 1.0 as QtControls
+import QtQuick.Layouts 1.1
+// for the units & theme
+import org.kde.plasma.core 2.0 as Plasmacore
+
+QtControls.Button {
+    id: root
+
+    property alias color: colorRect.color
+
+    Layout.minimumWidth: units.gridUnit * 3
+
+    Rectangle {
+        id: colorRect
+
+        anchors.centerIn: parent
+        opacity: root.enabled ? 1 : 0.5
+        width: parent.width - 2 * units.smallSpacing
+        height: theme.mSize(theme.defaultFont).height
+    }
+}
diff --git a/applets/binary-clock/package/contents/ui/configGeneral.qml b/applets/binary-clock/package/contents/ui/configGeneral.qml
--- a/applets/binary-clock/package/contents/ui/configGeneral.qml
+++ b/applets/binary-clock/package/contents/ui/configGeneral.qml
@@ -81,53 +81,41 @@
                 id: useCustomColorForActiveCheckBox
                 text: i18n("Use custom color for active LEDs")
             }
-            Rectangle {
-                width:20
-                height:20
-                id:customColorForActive
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: {
-                        colorDialog.element=parent;
-                        colorDialog.color=parent.color;
-                        colorDialog.open();
-                    }
+            ColorButton {
+                id: customColorForActive
+                enabled: useCustomColorForActiveCheckBox.checked
+                onClicked: {
+                    colorDialog.element = customColorForActive;
+                    colorDialog.color = color;
+                    colorDialog.open();
                 }
             }
 
             QtControls.CheckBox {
                 id: useCustomColorForInactiveCheckBox
                 text: i18n("Use custom color for inactive LEDs")
             }
-            Rectangle {
-                width:20
-                height:20
+            ColorButton {
                 id:customColorForInactive
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: {
-                        colorDialog.element=parent;
-                        colorDialog.color=parent.color;
-                        colorDialog.open();
-                    }
+                enabled: useCustomColorForInactiveCheckBox.checked
+                onClicked: {
+                    colorDialog.element = customColorForInactive;
+                    colorDialog.color = color;
+                    colorDialog.open();
                 }
             }
 
             QtControls.CheckBox {
                 id: useCustomColorForGridCheckBox
                 text: i18n("Use custom color for grid")
             }
-            Rectangle {
-                width:20
-                height:20
+            ColorButton {
                 id:customColorForGrid
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: {
-                        colorDialog.element=parent;
-                        colorDialog.color=parent.color;
-                        colorDialog.open();
-                    }
+                enabled: useCustomColorForGridCheckBox.checked
+                onClicked: {
+                    colorDialog.element = customColorForGrid;
+                    colorDialog.color = color;
+                    colorDialog.open();
                 }
             }
         }
diff --git a/applets/systemloadviewer/package/contents/ui/ColorPicker.qml b/applets/systemloadviewer/package/contents/ui/ColorPicker.qml
--- a/applets/systemloadviewer/package/contents/ui/ColorPicker.qml
+++ b/applets/systemloadviewer/package/contents/ui/ColorPicker.qml
@@ -24,37 +24,28 @@
 import QtQuick.Dialogs 1.0 as QtDialogs
 import org.kde.plasma.core 2.0 as PlasmaCore
 
-Item {
+QtControls.Button {
     id: colorPicker
 
     property alias chosenColor: colorDialog.color
 
-    width: childrenRect.width
-    height: childrenRect.height
-    Layout.alignment: Qt.AlignVCenter
+    Layout.minimumWidth: units.gridUnit * 3
+
+    QtDialogs.ColorDialog {
+        id: colorDialog
+    }
 
     Rectangle {
+        id: colorRect
+
         color: colorDialog.color
-        radius: width / 2
-        height: 20
-        width: height
-        opacity: enabled ? 1 : 0.5
-        border {
-            width: mouseArea.containsMouse ? 3 : 1
-            color: Qt.darker(colorDialog.color, 1.5)
-        }
-
-        QtDialogs.ColorDialog {
-            id: colorDialog
-        }
+        anchors.centerIn: parent
+        opacity: root.enabled ? 1 : 0.5
+        width: parent.width - 2 * units.smallSpacing
+        height: theme.mSize(theme.defaultFont).height
     }
 
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-        hoverEnabled: true
-        onClicked: {
-            colorDialog.open()
-        }
+    onClicked: {
+        colorDialog.open()
     }
 }