diff --git a/jmetro/src/main/resources/jfxtras/styles/jmetro/base.css b/jmetro/src/main/resources/jfxtras/styles/jmetro/base.css
index 78b78e67..7ba10948 100644
--- a/jmetro/src/main/resources/jfxtras/styles/jmetro/base.css
+++ b/jmetro/src/main/resources/jfxtras/styles/jmetro/base.css
@@ -2532,7 +2532,47 @@ totally specific (always using direct child) and cover all cases, which would be
  *                                                                             *
  ******************************************************************************/
 
+.color-picker.button {
+    -fx-border-color: transparent;
+    -fx-border-width: 2;
+
+    -fx-background-radius: 0;
+    -fx-background-insets: 0;
+    -fx-background-color: button_background_color;
+
+    -fx-font-family: "Segoe UI";
+    -fx-text-fill: text_color;
+}
+
+.color-picker.button:hover,
+.color-picker.button:focused:hover {
+    -fx-border-color: border_hover_color;
+}
+
+.color-picker.button:pressed,
+.color-picker.button:focused:pressed {
+    -fx-border-color: background_pressed_color;
+    -fx-background-color: background_pressed_color;
+}
 
+.color-picker.button:focused {
+    -fx-border-color: transparent, focus_ring_border_color;
+    -fx-border-width: 1, 1;
+    /*noinspection CssInvalidFunction*/
+    -fx-border-style: solid, segments(1, 2);
+    -fx-border-radius: 0, 0;
+    -fx-border-insets: 1 1 1 1, 0;
+}
+
+.color-picker.button:showing {
+    -fx-border-color: transparent, focus_ring_border_color;
+    -fx-background-color: background_pressed_color;
+    -fx-border-width: 1, 1;
+    /*noinspection CssInvalidFunction*/
+    -fx-border-style: solid, segments(1, 2);
+    -fx-border-radius: 0, 0;
+    -fx-border-insets: 1 1 1 1, 0;
+}
 
 /*******************************************************************************
  *                                                                             *
diff --git a/jmetro/src/main/resources/jfxtras/styles/jmetro/dark_theme.css b/jmetro/src/main/resources/jfxtras/styles/jmetro/dark_theme.css
index 0041e246..0fb197b0 100644
--- a/jmetro/src/main/resources/jfxtras/styles/jmetro/dark_theme.css
+++ b/jmetro/src/main/resources/jfxtras/styles/jmetro/dark_theme.css
@@ -713,4 +713,21 @@ Text {
 
 .mdl2-assets {
     text_color: white;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ColorPicker                                                                 *
+ *                                                                             *
+ ******************************************************************************/
+
+.color-picker.button {
+    button_background_color: #333333;
+    background_pressed_color: #666666;
+
+    border_hover_color: #858585;
+
+    text_color: white;
+
+    focus_ring_border_color: white;
 }
\ No newline at end of file
diff --git a/jmetro/src/main/resources/jfxtras/styles/jmetro/light_theme.css b/jmetro/src/main/resources/jfxtras/styles/jmetro/light_theme.css
index b0fde390..72c0640b 100644
--- a/jmetro/src/main/resources/jfxtras/styles/jmetro/light_theme.css
+++ b/jmetro/src/main/resources/jfxtras/styles/jmetro/light_theme.css
@@ -685,4 +685,21 @@ Text {
 
 .mdl2-assets {
     text_color: #111;
-}
\ No newline at end of file
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ColorPicker                                                                 *
+ *                                                                             *
+ ******************************************************************************/
+
+ .color-picker.button {
+     button_background_color: #cccccc;
+     background_pressed_color: #999999;
+
+     border_hover_color: #7a7a7a;
+
+     text_color: #111;
+
+     focus_ring_border_color: white;
+ }