diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6a9487ae9..d55f3ba38 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 * Remove eslint deps that are already listed in eslint-config-stripes. (UIEH-1389)
 * Improve HTML page titles for Assigned Users and Usage Consolidation Settings pages. (UIEH-1387)
 * Edit eholdings record (provider/package/title) > Cancel button does not work in same way as other apps Cancel button. (UIEH-1360)
+* Refactor CSS away from `color()` function. (UIEH-1402)
 
 ## [9.0.2] (https://github.com/folio-org/ui-eholdings/tree/v9.0.2) (2023-11-09)
 
diff --git a/src/components/provider-list-item/provider-list-item.css b/src/components/provider-list-item/provider-list-item.css
index fe0cdee30..83c834405 100644
--- a/src/components/provider-list-item/provider-list-item.css
+++ b/src/components/provider-list-item/provider-list-item.css
@@ -66,7 +66,7 @@
     width: 100%;
     height: 100%;
     background-repeat: no-repeat;
-    background-image: linear-gradient(to right, color(white a(0)), color(white a(30%)) 50%, color(white a(0)));
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255,0.3) 50%, rgba(255, 255, 255,0));
     background-size: 10em 100%;
     background-position: -10em 0;
     animation: shimmer 3s infinite;
diff --git a/src/components/search-package-list-item/search-package-list-item.css b/src/components/search-package-list-item/search-package-list-item.css
index f2178f3ef..5774146a9 100644
--- a/src/components/search-package-list-item/search-package-list-item.css
+++ b/src/components/search-package-list-item/search-package-list-item.css
@@ -95,7 +95,7 @@
     width: 100%;
     height: 100%;
     background-repeat: no-repeat;
-    background-image: linear-gradient(to right, color(white a(0)), color(white a(30%)) 50%, color(white a(0)));
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255,0.3) 50%, rgba(255, 255, 255,0));
     background-size: 10em 100%;
     background-position: -10em 0;
     animation: shimmer 3s infinite;
diff --git a/src/components/title-list-item/title-list-item.css b/src/components/title-list-item/title-list-item.css
index 001522f96..1bb86067c 100644
--- a/src/components/title-list-item/title-list-item.css
+++ b/src/components/title-list-item/title-list-item.css
@@ -86,7 +86,7 @@
     width: 100%;
     height: 100%;
     background-repeat: no-repeat;
-    background-image: linear-gradient(to right, color(white a(0)), color(white a(30%)) 50%, color(white a(0)));
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255,0.3) 50%, rgba(255, 255, 255,0));
     background-size: 10em 100%;
     background-position: -10em 0;
     animation: shimmer 3s infinite;
diff --git a/src/components/toaster/style.css b/src/components/toaster/style.css
index b7f101956..2f6a8048c 100644
--- a/src/components/toaster/style.css
+++ b/src/components/toaster/style.css
@@ -73,7 +73,7 @@
 
 .error {
   border-color: var(--error);
-  background-color: color(var(--error, #600) tint(75%));
+  background-color: oklch(from var(--error) 85% calc(c - 0.12) h);
 }
 
 .warn {
@@ -82,7 +82,7 @@
 
 .success {
   border-color: var(--success);
-  background-color: color(var(--success, #060) tint(75%));
+  background-color: oklch(from var(--success) 87% calc(c - 0.12) h);
 }
 
 .closeIcon {