diff --git a/appIcons.js b/appIcons.js
index 3aabb50..c24e133 100644
--- a/appIcons.js
+++ b/appIcons.js
@@ -1049,13 +1049,13 @@ export const TaskbarAppIcon = GObject.registerClass({
 
     _getRunningIndicatorColor(isFocused) {
         let color;
-        const fallbackColor = new Clutter.Color({ red: 82, green: 148, blue: 226, alpha: 255 });
+        const fallbackColor = new Utils.ColorUtils.Color({ red: 82, green: 148, blue: 226, alpha: 255 });
 
         if (SETTINGS.get_boolean('dot-color-dominant')) {
             let dce = new Utils.DominantColorExtractor(this.app);
             let palette = dce._getColorPalette();
             if (palette) {
-                color = Clutter.color_from_string(palette.original)[1];
+                color = Utils.ColorUtils.color_from_string(palette.original)[1];
             } else { // unable to determine color, fall back to theme
                 let themeNode = this._dot.get_theme_node();
                 color = themeNode.get_background_color();
@@ -1069,7 +1069,7 @@ export const TaskbarAppIcon = GObject.registerClass({
             if(!isFocused && SETTINGS.get_boolean('dot-color-unfocused-different'))
                 dotColorSettingPrefix = 'dot-color-unfocused-';
 
-            color = Clutter.color_from_string(SETTINGS.get_string(dotColorSettingPrefix + (this._getRunningIndicatorCount() || 1) ))[1];
+            color = Utils.ColorUtils.color_from_string(SETTINGS.get_string(dotColorSettingPrefix + (this._getRunningIndicatorCount() || 1) ))[1];
         } else {
             // Re-use the style - background color, and border width and color -
             // of the default dot
@@ -1132,8 +1132,8 @@ export const TaskbarAppIcon = GObject.registerClass({
             } else {
                 let blackenedLength = (1 / 48) * areaSize; // need to scale with the SVG for the stacked highlight
                 let darkenedLength = isFocused ? (2 / 48) * areaSize : (10 / 48) * areaSize;
-                let blackenedColor = new Clutter.Color({ red: bodyColor.red * .3, green: bodyColor.green * .3, blue: bodyColor.blue * .3, alpha: bodyColor.alpha });
-                let darkenedColor = new Clutter.Color({ red: bodyColor.red * .7, green: bodyColor.green * .7, blue: bodyColor.blue * .7, alpha: bodyColor.alpha });
+                let blackenedColor = new Utils.ColorUtils.Color({ red: bodyColor.red * .3, green: bodyColor.green * .3, blue: bodyColor.blue * .3, alpha: bodyColor.alpha });
+                let darkenedColor = new Utils.ColorUtils.Color({ red: bodyColor.red * .7, green: bodyColor.green * .7, blue: bodyColor.blue * .7, alpha: bodyColor.alpha });
                 let solidDarkLength = areaSize - darkenedLength;
                 let solidLength = solidDarkLength - blackenedLength;
 
diff --git a/metadata.json b/metadata.json
index cbe0821..e2c7056 100644
--- a/metadata.json
+++ b/metadata.json
@@ -3,7 +3,7 @@
   "uuid": "dash-to-panel@jderose9.github.com",
   "name": "Dash to Panel",
   "description": "An icon taskbar for the Gnome Shell. This extension moves the dash into the gnome main panel so that the application launchers and system tray are combined into a single panel, similar to that found in KDE Plasma and Windows 7+. A separate dock is no longer needed for easy access to running and favorited applications.\n\nFor a more traditional experience, you may also want to use Tweak Tool to enable Windows > Titlebar Buttons > Minimize & Maximize.\n\nFor the best support, please report any issues on Github. Dash-to-panel is developed and maintained by @jderose9 and @charlesg99.",
-  "shell-version": [ "46" ],
+  "shell-version": [ "46", "47" ],
   "url": "https://github.com/home-sweet-gnome/dash-to-panel",
   "gettext-domain": "dash-to-panel",
   "version": 9999,
diff --git a/progress.js b/progress.js
index 473b19d..48105ab 100644
--- a/progress.js
+++ b/progress.js
@@ -405,13 +405,13 @@ export const ProgressIndicator = class {
         if (hasColor)
             this._progressbar_background = color
         else
-            this._progressbar_background = new Clutter.Color({red: 204, green: 204, blue: 204, alpha: 255});
+            this._progressbar_background = new Utils.ColorUtils.Color({red: 204, green: 204, blue: 204, alpha: 255});
 
         [hasColor, color] = node.lookup_color('-progress-bar-border', false);
         if (hasColor)
             this._progressbar_border = color;
         else
-            this._progressbar_border = new Clutter.Color({red: 230, green: 230, blue: 230, alpha: 255});
+            this._progressbar_border = new Utils.ColorUtils.Color({red: 230, green: 230, blue: 230, alpha: 255});
 
         this._updateProgressOverlay();
     }
diff --git a/utils.js b/utils.js
index 828e184..df67ad9 100644
--- a/utils.js
+++ b/utils.js
@@ -22,6 +22,7 @@
  */
 
 import Clutter from 'gi://Clutter';
+import Cogl from 'gi://Cogl';
 import GdkPixbuf from 'gi://GdkPixbuf';
 import Gio from 'gi://Gio';
 import GLib from 'gi://GLib';
@@ -317,7 +318,7 @@ export const removeKeybinding = function(key) {
 };
 
 export const getrgbColor = function(color) {
-    color = typeof color === 'string' ? Clutter.color_from_string(color)[1] : color;
+    color = typeof color === 'string' ? ColorUtils.color_from_string(color)[1] : color;
 
     return { red: color.red, green: color.green, blue: color.blue };
 };
@@ -561,7 +562,12 @@ export const ensureActorVisibleInScrollView = function(scrollView, actor, fadeSi
 /**
  *  ColorUtils is adapted from https://github.com/micheleg/dash-to-dock
  */
+let colorNs = Clutter.Color ? Clutter : Cogl
+
 export const ColorUtils = {
+    color_from_string: colorNs.color_from_string,
+    Color: colorNs.Color,
+
     colorLuminance(r, g, b, dlum) {
         // Darken or brighten color by a fraction dlum
         // Each rgb value is modified by the same fraction.