diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 117a3864d..4283738b5 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -54,8 +54,8 @@ const DRAG_PAGE_SWITCH_REPEAT_TIMEOUT = 1000;
 
 const DELAYED_MOVE_TIMEOUT = 200;
 
-const DIALOG_SHADE_NORMAL = Clutter.Color.from_pixel(0x000000cc);
-const DIALOG_SHADE_HIGHLIGHT = Clutter.Color.from_pixel(0x00000055);
+const DIALOG_SHADE_NORMAL = new Clutter.Color({red: 0, green: 0, blue: 0, alpha: 204});
+const DIALOG_SHADE_HIGHLIGHT = new Clutter.Color({red: 0, green: 0, blue: 0, alpha: 85});
 
 const DEFAULT_FOLDERS = {
     'Utilities': {
@@ -2732,7 +2732,7 @@ export const AppFolderDialog = GObject.registerClass({
             this.child.get_transformed_position();
 
         this.ease({
-            background_color: Clutter.Color.from_pixel(0x00000000),
+            background_color: new Clutter.Color({red: 0, green: 0, blue: 0, alpha: 0}),
             duration: FOLDER_DIALOG_ANIMATION_TIME,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
         });
diff --git a/js/ui/background.js b/js/ui/background.js
index 8301330a4..959061308 100644
--- a/js/ui/background.js
+++ b/js/ui/background.js
@@ -107,7 +107,7 @@ import * as LoginManager from '../misc/loginManager.js';
 import * as Main from './main.js';
 import * as Params from '../misc/params.js';
 
-const DEFAULT_BACKGROUND_COLOR = Clutter.Color.from_pixel(0x2e3436ff);
+const DEFAULT_BACKGROUND_COLOR = new Clutter.Color({red: 46, green: 52, blue: 54, alpha: 255});
 
 const BACKGROUND_SCHEMA = 'org.gnome.desktop.background';
 const PRIMARY_COLOR_KEY = 'primary-color';
diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js
index 6deff416c..613055b59 100644
--- a/js/ui/quickSettings.js
+++ b/js/ui/quickSettings.js
@@ -818,7 +818,12 @@ export const QuickSettingsMenu = class extends PopupMenu.PopupMenu {
 
     _setDimmed(dim) {
         const val = 127 * (1 + (dim ? 1 : 0) * DIM_BRIGHTNESS);
-        const color = Clutter.Color.new(val, val, val, 255);
+        const color = new Clutter.Color({
+            red: val,
+            green: val,
+            blue: val,
+            alpha: 255,
+        });
 
         this._boxPointer.ease_property('@effects.dim.brightness', color, {
             mode: Clutter.AnimationMode.LINEAR,
diff --git a/js/ui/windowManager.js b/js/ui/windowManager.js
index dd67b8ea3..e3a61f9ab 100644
--- a/js/ui/windowManager.js
+++ b/js/ui/windowManager.js
@@ -149,7 +149,12 @@ class WindowDimmer extends Clutter.BrightnessContrastEffect {
 
     setDimmed(dimmed, animate) {
         let val = 127 * (1 + (dimmed ? 1 : 0) * DIM_BRIGHTNESS);
-        let color = Clutter.Color.new(val, val, val, 255);
+        const color = new Clutter.Color({
+            red: val,
+            green: val,
+            blue: val,
+            alpha: 255,
+        });
 
         this.actor.ease_property(`@effects.${this.name}.brightness`, color, {
             mode: Clutter.AnimationMode.LINEAR,