diff --git a/gtk/gtkcoloreditor.c b/gtk/gtkcoloreditor.c
index 8fbc8d5dbc..fa80b35423 100644
--- a/gtk/gtkcoloreditor.c
+++ b/gtk/gtkcoloreditor.c
@@ -377,6 +377,8 @@ gtk_color_editor_init (GtkColorEditor *editor)
   gtk_overlay_add_overlay (GTK_OVERLAY (editor->priv->overlay), editor->priv->sv_popup);
   gtk_overlay_add_overlay (GTK_OVERLAY (editor->priv->overlay), editor->priv->h_popup);
   gtk_overlay_add_overlay (GTK_OVERLAY (editor->priv->overlay), editor->priv->a_popup);
+
+  gtk_style_context_remove_class (gtk_widget_get_style_context (editor->priv->swatch), "activatable");
 }
 
 static void
diff --git a/gtk/gtkcolorswatch.c b/gtk/gtkcolorswatch.c
index 9296320e11..05d8734da9 100644
--- a/gtk/gtkcolorswatch.c
+++ b/gtk/gtkcolorswatch.c
@@ -31,6 +31,7 @@
 #include "gtkrenderprivate.h"
 #include "gtkcssnodeprivate.h"
 #include "gtkwidgetprivate.h"
+#include "gtkstylecontextprivate.h"
 #include "a11y/gtkcolorswatchaccessibleprivate.h"
 
 
@@ -39,6 +40,9 @@
  * and a subnode named overlay. The main node gets the .light or .dark
  * style classes added depending on the brightness of the color that
  * the swatch is showing.
+ *
+ * The color swatch has the .activatable style class by default. It can
+ * be removed for non-activatable swatches.
  */
 
 struct _GtkColorSwatchPrivate
@@ -93,6 +97,7 @@ static void
 gtk_color_swatch_init (GtkColorSwatch *swatch)
 {
   GtkCssNode *widget_node;
+  GtkStyleContext *context;
 
   swatch->priv = gtk_color_swatch_get_instance_private (swatch);
   swatch->priv->use_alpha = TRUE;
@@ -119,6 +124,9 @@ gtk_color_swatch_init (GtkColorSwatch *swatch)
   gtk_css_node_set_parent (swatch->priv->overlay_node, widget_node);
   gtk_css_node_set_state (swatch->priv->overlay_node, gtk_css_node_get_state (widget_node));
   g_object_unref (swatch->priv->overlay_node);
+
+  context = gtk_widget_get_style_context (GTK_WIDGET (swatch));
+  gtk_style_context_add_class (context, "activatable");
 }
 
 #define INTENSITY(r, g, b) ((r) * 0.30 + (g) * 0.59 + (b) * 0.11)
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index b6290de7a9..8b6ef0d005 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3113,8 +3113,8 @@ colorswatch {
   &:only-child > overlay { border-radius: $_colorswatch-radius; }
 
   // hover effect
-  &:hover,
-  &:hover:selected {
+  &.activatable:hover,
+  &.activatable:hover:selected {
     background-image: linear-gradient(135deg, transparentize(white, 0.3),
                                               transparentize(white, 1) 50%);
     box-shadow: inset 0 1px transparentize(white, 0.6),
@@ -3132,16 +3132,6 @@ colorswatch {
     box-shadow: none;
   }
 
-  // no hover effect for the colorswatch in the color editor
-  GtkColorEditor & {
-    border-radius: 3px; // same radius as the entry
-    &:hover {
-      background-image: none;
-      box-shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
-    }
-    &:backdrop { box-shadow: none; }
-  }
-
   // indicator and keynav outline colors
   &.dark overlay {
     color: white;
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index f78854c363..be48970b0f 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -4280,22 +4280,15 @@ colorswatch {
     border-bottom-right-radius: 5px; }
   colorswatch:only-child > overlay {
     border-radius: 5px; }
-  colorswatch:hover, colorswatch:hover:selected {
+  colorswatch.activatable:hover, colorswatch.activatable:hover:selected {
     background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.4); }
-    colorswatch:hover.dark overlay, colorswatch:hover:selected.dark overlay {
+    colorswatch.activatable:hover.dark overlay, colorswatch.activatable:hover:selected.dark overlay {
       background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); }
   colorswatch:backdrop, colorswatch:backdrop:selected
   colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
     background-image: none;
     box-shadow: none; }
-  GtkColorEditor colorswatch {
-    border-radius: 3px; }
-    GtkColorEditor colorswatch:hover {
-      background-image: none;
-      box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
-    GtkColorEditor colorswatch:backdrop {
-      box-shadow: none; }
   colorswatch.dark overlay {
     color: white;
     outline-color: rgba(255, 255, 255, 0.5); }
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index abfdfbf168..c73d400cb4 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -4452,22 +4452,15 @@ colorswatch {
     border-bottom-right-radius: 5px; }
   colorswatch:only-child > overlay {
     border-radius: 5px; }
-  colorswatch:hover, colorswatch:hover:selected {
+  colorswatch.activatable:hover, colorswatch.activatable:hover:selected {
     background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.1); }
-    colorswatch:hover.dark overlay, colorswatch:hover:selected.dark overlay {
+    colorswatch.activatable:hover.dark overlay, colorswatch.activatable:hover:selected.dark overlay {
       background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); }
   colorswatch:backdrop, colorswatch:backdrop:selected
   colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
     background-image: none;
     box-shadow: none; }
-  GtkColorEditor colorswatch {
-    border-radius: 3px; }
-    GtkColorEditor colorswatch:hover {
-      background-image: none;
-      box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
-    GtkColorEditor colorswatch:backdrop {
-      box-shadow: none; }
   colorswatch.dark overlay {
     color: white;
     outline-color: rgba(255, 255, 255, 0.5); }
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 99b0e1a5e3..bbf3111f1b 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -2408,8 +2408,8 @@ colorswatch {
   // and GtkColorSwatch.overlay, I know it's weird, but this is gtk+.
 
   // hover effect
-  &:hover,
-  &:hover:selected {
+  &.activatable:hover,
+  &.activatable:hover:selected {
     background-image: linear-gradient(135deg, transparentize(white, 0.3),
                                               transparentize(white, 1) 50%);
     box-shadow: inset 0 1px transparentize(white, 0.6),
@@ -2421,16 +2421,6 @@ colorswatch {
     box-shadow: none;
   }
 
-  // no hover effect for the colorswatch in the color editor
-  GtkColorEditor & {
-    border-radius: 3px; // same radius as the entry
-    &:hover {
-      background-image: none;
-      box-shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
-    }
-    &:backdrop { box-shadow: none; }
-  }
-
   // indicator and keynav outline colors, color-dark is a color with luminosity lower then 50%
   &.dark {
     color: white;
diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index d046e11b56..7e12fc1619 100644
--- a/gtk/theme/HighContrast/gtk.css
+++ b/gtk/theme/HighContrast/gtk.css
@@ -2626,19 +2626,12 @@ colorswatch {
     border-bottom-right-radius: 5px; }
   colorswatch:only-child:not(overlay), colorswatch:only-child > overlay {
     border-radius: 5px; }
-  colorswatch:hover, colorswatch:hover:selected {
+  colorswatch.activatable:hover, colorswatch.activatable:hover:selected {
     background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.4); }
   colorswatch:backdrop, colorswatch:backdrop:selected {
     background-image: none;
     box-shadow: none; }
-  GtkColorEditor colorswatch {
-    border-radius: 3px; }
-    GtkColorEditor colorswatch:hover {
-      background-image: none;
-      box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px #fff; }
-    GtkColorEditor colorswatch:backdrop {
-      box-shadow: none; }
   colorswatch.dark {
     color: white;
     outline-color: rgba(0, 0, 0, 0.3); }