diff --git a/apps/happy-blocks/package.json b/apps/happy-blocks/package.json
index 23968a54137f1..ff69d31e4d5ef 100644
--- a/apps/happy-blocks/package.json
+++ b/apps/happy-blocks/package.json
@@ -29,7 +29,7 @@
 		"@automattic/calypso-build": "workspace:^",
 		"@automattic/calypso-config": "workspace:^",
 		"@automattic/calypso-products": "workspace:^",
-		"@automattic/color-studio": "^3.0.1",
+		"@automattic/color-studio": "^4.1.0",
 		"@automattic/components": "workspace:^",
 		"@automattic/format-currency": "workspace:^",
 		"@automattic/typography": "workspace:^",
diff --git a/client/package.json b/client/package.json
index 3feb651730c1d..91708eeb03c53 100644
--- a/client/package.json
+++ b/client/package.json
@@ -28,7 +28,7 @@
 		"@automattic/calypso-sentry": "workspace:^",
 		"@automattic/calypso-stripe": "workspace:^",
 		"@automattic/calypso-url": "workspace:^",
-		"@automattic/color-studio": "^3.0.1",
+		"@automattic/color-studio": "^4.1.0",
 		"@automattic/command-palette": "workspace:^",
 		"@automattic/components": "workspace:^",
 		"@automattic/composite-checkout": "workspace:^",
diff --git a/package.json b/package.json
index a03223a896a16..90f3a47c67323 100644
--- a/package.json
+++ b/package.json
@@ -149,7 +149,7 @@
 		"@automattic/calypso-products": "workspace:^",
 		"@automattic/calypso-razorpay": "workspace:^",
 		"@automattic/calypso-router": "workspace:^",
-		"@automattic/color-studio": "^3.0.1",
+		"@automattic/color-studio": "^4.1.0",
 		"@automattic/command-palette": "workspace:^",
 		"@automattic/components": "workspace:^",
 		"@automattic/data-stores": "workspace:^",
diff --git a/packages/calypso-color-schemes/package.json b/packages/calypso-color-schemes/package.json
index d1a5e6a39a6f0..5f3a198818a07 100644
--- a/packages/calypso-color-schemes/package.json
+++ b/packages/calypso-color-schemes/package.json
@@ -28,7 +28,7 @@
 	"devDependencies": {
 		"@automattic/calypso-eslint-overrides": "workspace:^",
 		"@automattic/calypso-typescript-config": "workspace:^",
-		"@automattic/color-studio": "^3.0.1",
+		"@automattic/color-studio": "^4.1.0",
 		"postcss": "^8.4.5",
 		"postcss-custom-properties": "^11.0.0",
 		"sass": "^1.37.5"
diff --git a/packages/components/package.json b/packages/components/package.json
index 0f6fc0c8b173c..1e389864a1a3f 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -30,7 +30,7 @@
 		"@automattic/calypso-analytics": "workspace:^",
 		"@automattic/calypso-color-schemes": "workspace:^",
 		"@automattic/calypso-url": "workspace:^",
-		"@automattic/color-studio": "^3.0.1",
+		"@automattic/color-studio": "^4.1.0",
 		"@automattic/format-currency": "workspace:^",
 		"@automattic/i18n-utils": "workspace:^",
 		"@automattic/load-script": "workspace:^",
diff --git a/packages/composite-checkout/package.json b/packages/composite-checkout/package.json
index feb42061cdd20..87f095450542f 100644
--- a/packages/composite-checkout/package.json
+++ b/packages/composite-checkout/package.json
@@ -46,7 +46,7 @@
 	"devDependencies": {
 		"@automattic/calypso-storybook": "workspace:^",
 		"@automattic/calypso-typescript-config": "workspace:^",
-		"@automattic/color-studio": "^3.0.1",
+		"@automattic/color-studio": "^4.1.0",
 		"@storybook/cli": "^7.6.19",
 		"@storybook/react": "^7.6.19",
 		"@testing-library/dom": "^10.1.0",
diff --git a/packages/page-pattern-modal/package.json b/packages/page-pattern-modal/package.json
index fc18d251834f1..5968467debd4e 100644
--- a/packages/page-pattern-modal/package.json
+++ b/packages/page-pattern-modal/package.json
@@ -27,7 +27,7 @@
 	],
 	"types": "dist/types",
 	"dependencies": {
-		"@automattic/color-studio": "^3.0.1",
+		"@automattic/color-studio": "^4.1.0",
 		"@automattic/typography": "1.0.0",
 		"@wordpress/base-styles": "5.8.0",
 		"@wordpress/block-editor": "^14.3.0",
diff --git a/yarn.lock b/yarn.lock
index 013cb424aef5f..6d2ac7acecd67 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -322,7 +322,7 @@ __metadata:
   dependencies:
     "@automattic/calypso-eslint-overrides": "workspace:^"
     "@automattic/calypso-typescript-config": "workspace:^"
-    "@automattic/color-studio": "npm:^3.0.1"
+    "@automattic/color-studio": "npm:^4.1.0"
     postcss: "npm:^8.4.5"
     postcss-custom-properties: "npm:^11.0.0"
     sass: "npm:^1.37.5"
@@ -562,10 +562,10 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@automattic/color-studio@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "@automattic/color-studio@npm:3.0.1"
-  checksum: 1fed9e35e5a4cf283055d323661bf94f8836fbe762c3a1ff7c514407c9cffcae9b05791fb2d4904050c097e939b745c8f2bc13cc84c9963d35c9d1aa57f1fbd8
+"@automattic/color-studio@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "@automattic/color-studio@npm:4.1.0"
+  checksum: 545a3c6cf2bc0897e0a5b5630a411db027220f821fc1eba3b50cd6d6cb71ea8c6d1469ef93eaa059855010aa64125f32dbf9b763bc83a8c7af410ee4b9b45f90
   languageName: node
   linkType: hard
 
@@ -643,7 +643,7 @@ __metadata:
     "@automattic/calypso-storybook": "workspace:^"
     "@automattic/calypso-typescript-config": "workspace:^"
     "@automattic/calypso-url": "workspace:^"
-    "@automattic/color-studio": "npm:^3.0.1"
+    "@automattic/color-studio": "npm:^4.1.0"
     "@automattic/format-currency": "workspace:^"
     "@automattic/i18n-utils": "workspace:^"
     "@automattic/load-script": "workspace:^"
@@ -697,7 +697,7 @@ __metadata:
   dependencies:
     "@automattic/calypso-storybook": "workspace:^"
     "@automattic/calypso-typescript-config": "workspace:^"
-    "@automattic/color-studio": "npm:^3.0.1"
+    "@automattic/color-studio": "npm:^4.1.0"
     "@emotion/react": "npm:^11.11.1"
     "@emotion/styled": "npm:^11.11.0"
     "@storybook/cli": "npm:^7.6.19"
@@ -1616,7 +1616,7 @@ __metadata:
   resolution: "@automattic/page-pattern-modal@workspace:packages/page-pattern-modal"
   dependencies:
     "@automattic/calypso-typescript-config": "workspace:^"
-    "@automattic/color-studio": "npm:^3.0.1"
+    "@automattic/color-studio": "npm:^4.1.0"
     "@automattic/typography": "npm:1.0.0"
     "@testing-library/react": "npm:^15.0.7"
     "@wordpress/base-styles": "npm:5.8.0"
@@ -13036,7 +13036,7 @@ __metadata:
     "@automattic/calypso-sentry": "workspace:^"
     "@automattic/calypso-stripe": "workspace:^"
     "@automattic/calypso-url": "workspace:^"
-    "@automattic/color-studio": "npm:^3.0.1"
+    "@automattic/color-studio": "npm:^4.1.0"
     "@automattic/command-palette": "workspace:^"
     "@automattic/components": "workspace:^"
     "@automattic/composite-checkout": "workspace:^"
@@ -19656,7 +19656,7 @@ __metadata:
     "@automattic/calypso-build": "workspace:^"
     "@automattic/calypso-config": "workspace:^"
     "@automattic/calypso-products": "workspace:^"
-    "@automattic/color-studio": "npm:^3.0.1"
+    "@automattic/color-studio": "npm:^4.1.0"
     "@automattic/components": "workspace:^"
     "@automattic/format-currency": "workspace:^"
     "@automattic/typography": "workspace:^"
@@ -34792,7 +34792,7 @@ __metadata:
     "@automattic/calypso-razorpay": "workspace:^"
     "@automattic/calypso-router": "workspace:^"
     "@automattic/calypso-storybook": "workspace:^"
-    "@automattic/color-studio": "npm:^3.0.1"
+    "@automattic/color-studio": "npm:^4.1.0"
     "@automattic/command-palette": "workspace:^"
     "@automattic/components": "workspace:^"
     "@automattic/data-stores": "workspace:^"